+ index.hbs +
+ +
+ <SortableGroupAccessible
+ tabindex="0"
+ class="border focus:border-teal-400"
+ > Foo </SortableGroupAccessible>
+
+
+ + sortable-group-accessible.hbs +
+ +
+ <div ...attributes>
+ {{yield}}
+ </div>
+
+ + rendered html +
+ +
+ <div tabindex="0" class="border focus:border-teal-400"
+ > Foo </div>
+
+ + sortable-group-accessible.hbs +
+ +
+ <div
+ {{on 'focus' this.handleFocus}}
+ {{on 'blur' this.handleBlur}}
+ {{key-up this.handleArrowUp key='ArrowUp'}}
+ {{key-up this.handleArrowDown key='ArrowDown'}}
+
+
+ + modifiers/key-up.js +
+ +
+ import { modifier } from 'ember-modifier';
+ const listener = (evt) => {
+ if (!desiredKey || desiredKey === evt.key) handler(evt);
+ }
+ export default modifier(function keyUp(element, [handler], { key: desiredKey }) {
+ element.addEventListener('keyup', listener);
+ return () => { element.removeEventListener('keyup', listener); }
+ });
+
+ + modifiers/key-up-test.js +
+ +
+ test('it can listen for specific key up events', async function(assert) {
+ this.keyUp = ({ key }) => {
+ assert.step('key up');
+ assert.equal(key, 'Enter');
+ };
+ await render(hbs`
+ <div {{key-up this.keyUp}} data-test-id='keyup'></div>`);
+ let selector = '[data-test-id=keyup]';
+ await triggerKeyEvent(selector, 'keyup', 'Enter');
+ assert.verifySteps(['key up']);
+ });
+
+ + index-test.js +
+ +
+ assert.dom(findAll('[data-test-id=item]')[0]).hasText('Item 1');
+ assert.dom(findAll('[data-test-id=item]')[1]).hasText('Item 2');
+
+ await triggerEvent('[data-test-id=group]', 'focus');
+ await click('[data-test-id=sort-down]');
+
+ assert.dom(findAll('[data-test-id=item]')[0]).hasText('Item 2');
+ assert.dom(findAll('[data-test-id=item]')[1]).hasText('Item 1');
+