gaiety/sortable-recipes
1
0
Fork 0
Code Activity

Focus follows movement

Browse source
This commit is contained in:
Ava Wroten 2020-03-04 10:31:31 -06:00
parent 7ac2a80e00
commit d1a31edbad
3 changed files with 21 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ember-ui/app/components/sortable-group-accessible.hbs
View file

@ -1,4 +1,5 @@
<div
data-id={{this.uniqId}}
{{on 'focus' this.handleFocus}}
{{on 'blur' this.handleBlur}}
{{key-up this.handleArrowUp key='ArrowUp'}}

18
ember-ui/app/components/sortable-group-accessible.js
View file

@ -1,11 +1,16 @@
import Component from '@glimmer/component';
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import { next } from '@ember/runloop';
export default class SortableGroupAccessibleComponent extends Component {
@tracked selectedIndex = 0;
@tracked groupHasFocus = false;
uniqId = uuid();
get listElement() { return document.querySelector(`[data-id="${this.uniqId}"]`); }
@action
handleFocus() { this.groupHasFocus = true; }
@ -38,6 +43,10 @@ export default class SortableGroupAccessibleComponent extends Component {
item.listOrder = index - 1;
prevItem.listOrder = index;
this.selectedIndex = index - 1;
next(this, function() {
this.listElement.querySelector('[data-action-up]').focus();
});
}
@action
@ -50,7 +59,16 @@ export default class SortableGroupAccessibleComponent extends Component {
item.listOrder = index + 1;
nextItem.listOrder = index;
this.selectedIndex = index + 1;
next(this, function() {
this.listElement.querySelector('[data-action-down]').focus();
});
}
preventDefault(evt) { evt.preventDefault(); }
}
// Thanks to jed https://gist.github.com/jed/982883
function uuid(a) {
return a?(a^Math.random()*16>>a/4).toString(16):([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,uuid)
}

2
ember-ui/app/components/sortable-item-accessible.hbs
View file

@ -3,12 +3,14 @@
{{#if active}}
<button
{{on 'click' (fn @orderItemUp @currentIndex)}}
data-action-up
role="button"
class="text-gray-800 outline-none absolute left-0 top-0 p-2 m-4 bg-white rounded-lg border-2 border-gray-800 focus:border-teal-400 shadow-sm">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>
</button>
<button
{{on 'click' (fn @orderItemDown @currentIndex)}}
data-action-down
role="button"
class="transform rotate-180 text-gray-800 outline-none absolute left-0 bottom-0 p-2 m-4 bg-white rounded-lg border-2 border-gray-800 focus:border-teal-400 shadow-sm">
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>