Make sure screen reader recognizes draggable items as elements that can

be interacted with, and doesn't intercept keyboard input.

drag_and_drop_v2/public/js/view.js

@@ -62,6 +62,7 @@
             className += " specified-width";  // The author has specified a width for this item.
         }
         var attributes = {
+            'role': 'button',
             'draggable': !item.drag_disabled,
             'aria-grabbed': item.grabbed,
             'data-value': item.value,
@@ -226,12 +227,16 @@
         return (
             h('section.themed-xblock.xblock--drag-and-drop', [
                 problemTitle,
-                h('section.problem', {role: 'application'}, [
+                h('section.problem', [
                     problemHeader,
                     h('p', {innerHTML: ctx.problem_html}),
                 ]),
                 h('section.drag-container', [
-                    h('div.item-bank', renderCollection(itemTemplate, items_in_bank, ctx)),
+                    h(
+                        'div.item-bank',
+                        { attributes: { role: 'application' } },
+                        renderCollection(itemTemplate, items_in_bank, ctx)
+                    ),
                     h('div.target', [
                         h(
                             popupSelector,

tests/integration/test_render.py

@@ -148,6 +148,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
 
         for index, item in enumerate(items):
             item_number = index + 1
+            self.assertEqual(item.get_attribute('role'), 'button')
             self.assertEqual(item.get_attribute('tabindex'), '0')
             self.assertEqual(item.get_attribute('draggable'), 'true')
             self.assertEqual(item.get_attribute('aria-grabbed'), 'false')
@@ -164,6 +165,11 @@ class TestDragAndDropRender(BaseIntegrationTest):
                     'This describes the background image of item {}'.format(item_number)
                 )
 
+    def test_item_bank(self):
+        self.load_scenario()
+        item_bank = self._page.find_element_by_css_selector('.item-bank')
+        self.assertEqual(item_bank.get_attribute('role'), 'application')
+
     def test_zones(self):
         self.load_scenario()