[TNL-6024] Move close button to beginning of dialog.

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -675,11 +675,24 @@
     z-index: 1500;
 }
 
+.xblock--drag-and-drop .modal-dismiss-button {
+    font-size: 24px;
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    padding: 5px 8px;
+}
+
+.xblock--drag-and-drop .modal-header h2 {
+    height: 30px;
+    line-height: 30px;
+    margin-bottom: 5px;
+}
+
 .xblock--drag-and-drop .modal-content {
     border-radius: 5px;
     background-color: #ffffff;
-    margin-bottom: 5px;
-    padding: 5px;
+    padding: 8px;
 }
 
 .xblock--drag-and-drop .modal-content li {

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -261,8 +261,12 @@ function DragAndDropTemplates(configuration) {
             h('div.keyboard-help-dialog', [
                 h('div.modal-window-overlay'),
                 h('div.modal-window', {attributes: {role: 'dialog', 'aria-labelledby': labelledby_id, tabindex: -1}}, [
+                    h('button.modal-dismiss-button.unbutton', {attributes: {tabindex: 1}}, [
+                        h('span.fa.fa-remove', {attributes: {'aria-hidden': true}}),
+                        h('span.sr', gettext('Close'))
+                    ]),
                     h('div.modal-header', [
-                        h('h2.modal-window-title#'+labelledby_id, gettext('Keyboard Help'))
+                        h('h2.modal-window-title', {id: labelledby_id}, gettext('Keyboard Help'))
                     ]),
                     h('div.modal-content', [
                         h('p.sr', gettext('This is a screen reader-friendly problem.')),
@@ -275,9 +279,6 @@ function DragAndDropTemplates(configuration) {
                             h('li', gettext('Press ESC if you want to cancel the drop operation (for example, to select a different item).')),
                             h('li', gettext('TAB back to the list of draggable items and repeat this process until all of the draggable items have been placed on their respective dropzones.')),
                         ])
-                    ]),
-                    h('div.modal-actions', [
-                        h('button.modal-dismiss-button', gettext("OK"))
                     ])
                 ])
             ])

drag_and_drop_v2/translations/en/LC_MESSAGES/text.po

@@ -527,7 +527,7 @@ msgid ""
 msgstr ""
 
 #: public/js/drag_and_drop.js
-msgid "OK"
+msgid "Close"
 msgstr ""
 
 #: public/js/drag_and_drop.js

drag_and_drop_v2/translations/eo/LC_MESSAGES/text.po

@@ -627,8 +627,8 @@ msgstr ""
 "ηση ρяσι∂єηт, ѕυηт ιη ¢υłρα qυι σƒƒι¢ια ∂єѕєяυηт мσłłιт αηιм ι∂ є#"
 
 #: public/js/drag_and_drop.js
-msgid "OK"
-msgstr "ÖK Ⱡ'σя#"
+msgid "Close"
+msgstr "Çlösé Ⱡ'σя#"
 
 #: public/js/drag_and_drop.js
 msgid "Problem"

tests/integration/test_base.py

@@ -310,6 +310,10 @@ class InteractionTestBase(object):
     def assertNotDraggable(self, item_value):
         self.assertFalse(self._get_draggable_property(item_value))
 
+    def assertFocused(self, element):
+        focused_element = self.browser.switch_to.active_element
+        self.assertTrue(element == focused_element, 'expected element to have focus')
+
     @staticmethod
     def wait_until_ondrop_xhr_finished(elem):
         """