Better accessibility for feedback popups and higher contrast for dropped items.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -9,6 +9,34 @@
     margin-right: 3px;
 }
 
+/* Button style tricks, defined higher so they can be overridden */
+
+.xblock--drag-and-drop .unbutton {
+    background: none;
+    box-shadow: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+
+.xblock--drag-and-drop .unbutton:active {
+    background: none;
+    box-shadow: none;
+    border: none;
+}
+
+.xblock--drag-and-drop .unbutton:hover {
+    background: none;
+    box-shadow: none;
+    border: none;
+}
+
+.xblock--drag-and-drop .unbutton:focus {
+    background: none;
+    box-shadow: none;
+    border: none;
+}
+
 /* Header, instruction text, etc. */
 
 .xblock--drag-and-drop .problem-title {
@@ -180,7 +208,7 @@
 }
 
 .xblock--drag-and-drop .drag-container .option.fade {
-    opacity: 0.5;
+    opacity: 0.80;
 }
 
 /*** DROP TARGET ***/
@@ -299,6 +327,10 @@
     font-size: 18pt;
 }
 
+.xblock--drag-and-drop .popup .close:focus {
+    outline: 2px solid white;
+}
+
 /*** KEYBOARD HELP ***/
 
 .xblock--drag-and-drop .keyboard-help {
@@ -373,21 +405,7 @@
 }
 
 .xblock--drag-and-drop .link-button:focus {
-    background: none;
-    box-shadow: none;
-    border: none;
-}
-
-.xblock--drag-and-drop .link-button:active {
-    background: none;
-    box-shadow: none;
-    border: none;
-}
-
-.xblock--drag-and-drop .link-button:hover {
-    background: none;
-    box-shadow: none;
-    border: none;
+    outline: 2px solid #2d74b3;
 }
 
 /* Make sure screen-reader content is hidden in the workbench: */

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -237,6 +237,7 @@ function DragAndDropBlock(runtime, element, configuration) {
 
         updateDOM();
         destroyDraggable();
+        $element.find('div.popup').focus()
         if (!state.finished) {
             initDraggable();
         }

drag_and_drop_v2/public/js/view.js

@@ -174,7 +174,7 @@
         return (
             h('section.feedback', properties, [
                 h(
-                    'button.reset-button.link-button',
+                    'button.reset-button.unbutton.link-button',
                     { style: { display: reset_button_display }, attributes: { tabindex: 0 }, 'aria-live': 'off'},
                     gettext('Reset problem')
                 ),
@@ -189,7 +189,7 @@
         var dialog_style = {};
         return (
             h('section.keyboard-help', [
-                h('button.keyboard-help-button.link-button', { attributes: { tabindex: 0 } }, gettext('Keyboard Help')),
+                h('button.keyboard-help-button.unbutton.link-button', { attributes: { tabindex: 0 } }, gettext('Keyboard Help')),
                 h('div.keyboard-help-dialog', [
                     h('div.modal-window-overlay'),
                     h('div.modal-window', { attributes: dialog_attributes, style: dialog_style }, [
@@ -231,21 +231,22 @@
                     problemHeader,
                     h('p', {innerHTML: ctx.problem_html}),
                 ]),
-                h('section.drag-container', [
+                h('section.drag-container', { attributes: { role: 'application' } }, [
                     h(
                         'div.item-bank',
-                        { attributes: { role: 'application' } },
                         renderCollection(itemTemplate, items_in_bank, ctx)
                     ),
                     h('div.target', [
                         h(
                             popupSelector,
                             {
-                                attributes: {'aria-live': 'polite'},
+                                attributes: {'aria-live': 'polite', 'tabindex': 0},
                                 style: {display: ctx.popup_html ? 'block' : 'none'},
                             },
                             [
-                                h('div.close.icon-remove-sign.fa-times-circle'),
+                                h('button.unbutton.close.icon-remove-sign.fa-times-circle', [
+                                    h('div', {attributes: {'class': 'sr'}}, gettext("Close"))
+                                ]),
                                 h('p.popup-content', {innerHTML: ctx.popup_html}),
                             ]
                         ),

tests/integration/test_render.py

@@ -165,9 +165,9 @@ class TestDragAndDropRender(BaseIntegrationTest):
                     'This describes the background image of item {}'.format(item_number)
                 )
 
-    def test_item_bank(self):
+    def test_drag_container(self):
         self.load_scenario()
-        item_bank = self._page.find_element_by_css_selector('.item-bank')
+        item_bank = self._page.find_element_by_css_selector('.drag-container')
         self.assertEqual(item_bank.get_attribute('role'), 'application')
 
     def test_zones(self):