[A11y enhancement] Adding role=button to sortable-handle

Author: ygongdev

addon/components/sortable-handle.js

@@ -5,6 +5,7 @@ import Component from '@ember/component';
  */
 export default Component.extend({
   tabindex: 0,
-  attributeBindings: ["dataSortableHandle:data-sortable-handle", "tabindex"],
+  role: 'button',
+  attributeBindings: ["dataSortableHandle:data-sortable-handle", "tabindex", "role"],
   dataSortableHandle: true,
 });

tests/integration/components/sortable-group-test.js

@@ -5,7 +5,7 @@ import { render, find, triggerEvent, fillIn, triggerKeyEvent } from '@ember/test
 import { ENTER_KEY_CODE, SPACE_KEY_CODE, ARROW_KEY_CODES } from "ember-sortable/utils/keyboard";
 import { set, setProperties } from '@ember/object';
 
-module('Integration | Component | sortable group', function(hooks) {
+module('Integration | Component | sortable-group', function(hooks) {
   setupRenderingTest(hooks);
 
   const NESTED_MODEL = [

tests/integration/components/sortable-handle-test.js

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { render } from '@ember/test-helpers';
+
+module('Integration | Component | sortable-handle', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('[A11y] Sortable-handle has button role', async function(assert) {
+    assert.expect(1);
+
+    await render(hbs`
+      {{#sortable-handle id="dummy-sortable-handle"}}
+      {{/sortable-handle}}
+    `);
+
+    assert.dom('#dummy-sortable-handle').hasAttribute('role', 'button', 'sortable-handle have role of button');
+  });
+});

tests/integration/components/sortable-item-test.js

@@ -0,0 +1,24 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { render } from '@ember/test-helpers';
+
+module('Integration | Component | sortable-item', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('[A11y] sortable-items have tabindexes for accessibility', async function(assert) {
+    assert.expect(1);
+
+    await render(hbs`
+      {{#sortable-group
+        as |group|
+      }}
+        {{#group.item tabindex=0 model=1 id="dummy-sortable-item"}}
+          sort me
+        {{/group.item}}
+      {{/sortable-group}}
+    `);
+
+    assert.dom('#dummy-sortable-item').hasAttribute('tabindex', '0', 'sortable-items have tabindexes');
+  });
+});