[TNL-6029] Remove role=button from items and zones.

The button role was misleading and is not needed.

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -66,7 +66,6 @@ function DragAndDropTemplates(configuration) {
             className += " grabbed-with-" + item.grabbed_with;
         }
         var attributes = {
-            'role': 'button',
             'draggable': !item.drag_disabled,
             'aria-grabbed': item.grabbed,
             'data-value': item.value,
@@ -212,7 +211,6 @@ function DragAndDropTemplates(configuration) {
                         'aria-dropeffect': 'move',
                         'data-uid': zone.uid,
                         'data-zone_align': zone.align,
-                        'role': 'button',
                         'aria-describedby': zone_description_id,
                     },
                     style: {
@@ -221,8 +219,15 @@ function DragAndDropTemplates(configuration) {
                     }
                 },
                 [
-                    h('p', { className: className }, zone.title),
-                    h('p', { className: 'zone-description sr' }, zone.description || gettext("droppable")),
+                    h(
+                        'p',
+                        { className: className },
+                        [
+                            zone.title,
+                            h('span.sr', gettext(', dropzone'))
+                        ]
+                    ),
+                    h('p', { className: 'zone-description sr' }, zone.description || gettext('droppable')),
                     h(item_wrapper, renderCollection(itemTemplate, items_in_zone, ctx)),
                     zone_description
                 ]
@@ -520,7 +525,6 @@ function DragAndDropTemplates(configuration) {
             item_bank_properties.attributes['tabindex'] = 0;
             item_bank_properties.attributes['dropzone'] = 'move';
             item_bank_properties.attributes['aria-dropeffect'] = 'move';
-            item_bank_properties.attributes['role'] = 'button';
         }
         return (
             h('section.themed-xblock.xblock--drag-and-drop', [

tests/integration/test_render.py

@@ -142,7 +142,6 @@ 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')
@@ -194,7 +193,7 @@ class TestDragAndDropRender(BaseIntegrationTest):
                 '#-Zone_{}'.format(zone_number), **zone_box_percentages
             )
             zone_name = zone.find_element_by_css_selector('p.zone-name')
-            self.assertEqual(zone_name.text, 'Zone {}'.format(zone_number))
+            self.assertEqual(zone_name.text, 'Zone {}\n, dropzone'.format(zone_number))
             zone_description = zone.find_element_by_css_selector('p.zone-description')
             self.assertEqual(zone_description.text, 'This describes zone {}'.format(zone_number))
             # Zone description should only be visible to screen readers: