fix: Safari focus when there are no draggables left

Resolves a11y issue with using a keyboard in Safari.
openedx · Oct 19, 2023 · 376ec5c · 376ec5c
1 parent f331884
commit 376ec5c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -4,6 +4,11 @@ Drag and Drop XBlock changelog
 Unreleased
 ---------------------------
 
+Version 3.2.2 (2023-10-19)
+---------------------------
+
+* Fix Safari focus when there are no draggables left.
+
 Version 3.2.1 (2023-10-12)
 ---------------------------
 

diff --git a/drag_and_drop_v2/__init__.py b/drag_and_drop_v2/__init__.py
@@ -1,4 +1,4 @@
 """ Drag and Drop v2 XBlock """
 from .drag_and_drop_v2 import DragAndDropBlock
 
-__version__ = "3.2.1"
+__version__ = "3.2.2"
diff --git a/drag_and_drop_v2/public/js/drag_and_drop.js b/drag_and_drop_v2/public/js/drag_and_drop.js
@@ -1310,7 +1310,14 @@ function DragAndDropBlock(runtime, element, configuration) {
     };
 
     var focusFirstDraggable = function() {
-        $root.find('.item-bank .option').first().focus();
+        var draggables = $root.find('.item-bank .option[draggable=true]').toArray();
+        if (draggables.length){
+            draggables[0].focus();
+        }
+        else {
+            // In case there are no draggable options, we default focus to the first zone.
+            $root.find('.target .zone').first().focus();
+        }
     };
 
     var focusItemFeedbackPopup = function() {