fix: Safari focus when there are no draggables left

Resolves a11y issue with using a keyboard in Safari.

Author: CefBoud

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)
 ---------------------------
 

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"

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() {