Merge pull request #408 from open-craft/dvz/improve-a11y

fix: set go to beginning button to hidden

Author: edx-requirements-bot

Changelog.md

@@ -6,6 +6,11 @@ Unreleased
 
 * Adjust code styling for newer pylint versions.
 
+Version 4.0.3 (2024-05-23)
+---------------------------
+
+* Set go-to-beginning button to hidden for Screen Readers
+
 Version 4.0.2 (2024-04-24)
 --------------------------
 

drag_and_drop_v2/__init__.py

@@ -1,4 +1,4 @@
 """ Drag and Drop v2 XBlock """
 from .drag_and_drop_v2 import DragAndDropBlock
 
-__version__ = "4.0.2"
+__version__ = "4.0.3"

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -815,7 +815,6 @@
     color: #000000;
 }
 
-
 /* Prevent mobile browsers from emulating hover effects on item tap, which can be confusing. */
 @media (hover: none) {
     .xblock--drag-and-drop .drag-container .option[draggable='true']:hover {

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -318,7 +318,7 @@ function DragAndDropTemplates(configuration) {
 
         return (
             h('div.feedback', {
-                attributes: {'role': 'group', 'aria-label': gettext('Feedback')},
+                attributes: {'role': 'group', 'aria-label': gettext('Feedback'), 'aria-live': 'polite'},
                 style: { display: feedback_display }
             }, [
                 h('div.feedback-content',[
@@ -424,7 +424,7 @@ function DragAndDropTemplates(configuration) {
             iconClass = 'fa-spin fa-spinner';
         }
         return (
-            h('span.problem-action-button-wrapper', {}, [
+            h('span.problem-action-button-wrapper', {attributes: {"aria-hidden": options.disabled || false}}, [
                 h(
                     'button.problem-action-btn.btn-default.btn-small',
                     {
@@ -459,7 +459,7 @@ function DragAndDropTemplates(configuration) {
             go_to_beginning_button_class += ' sr';
         }
         return(
-            h("div.problem-action-buttons-wrapper", {attributes: {'role': 'group', 'aria-label': gettext('Actions')}}, [
+            h("div.problem-action-buttons-wrapper", {}, [
                 sidebarButtonTemplate(
                     go_to_beginning_button_class,
                     "fa-arrow-up",
@@ -1052,6 +1052,16 @@ function DragAndDropBlock(runtime, element, configuration) {
         $root.find('.keyboard-help-dialog .modal-dismiss-button').focus();
     };
 
+    var focusSuccessFeedback = function() {
+        var $feedback = $element.find('.final');
+        if ($feedback.is(':visible')) {
+            $feedback.attr('tabindex', '-1');
+            $feedback.focus();
+            return true;
+        };
+        return false;
+    }
+
     var showKeyboardHelp = function(evt) {
         var focusId = document.activeElement;
         evt.preventDefault();
@@ -1320,6 +1330,17 @@ function DragAndDropBlock(runtime, element, configuration) {
         }
     };
 
+    var focusSubmitButton = function() {
+        var submitButton = $root.find('.btn-brand.submit').toArray();
+        if (submitButton.length){
+            submitButton[0].focus();
+        }
+        else {
+            // In case there are is no submit button, we default focus to the first zone.
+            $root.find('.target .zone').first().focus();
+        }
+    };
+
     var focusItemFeedbackPopup = function() {
         var popup = $root.find('.item-feedback-popup');
         if (popup.length && popup.is(":visible")) {
@@ -1800,8 +1821,11 @@ function DragAndDropBlock(runtime, element, configuration) {
                     // Move focus the the close button of the feedback popup.
                     focusItemFeedbackPopup();
                 } else {
-                    // Next tab press should take us to the "Go to Beginning" button.
-                    state.tab_to_go_to_beginning_button = true;
+                    if ($root.find('.item-bank .option[draggable=true]').length) {
+                        focusFirstDraggable();
+                    } else {
+                        focusSubmitButton();
+                    };
                 }
             })
             .fail(function (data) {
@@ -1829,7 +1853,7 @@ function DragAndDropBlock(runtime, element, configuration) {
         applyState();
 
         if (manually_closed) {
-            focusFirstDraggable();
+            focusSuccessFeedback() || focusFirstDraggable();
         }
     };
 
@@ -1903,7 +1927,7 @@ function DragAndDropBlock(runtime, element, configuration) {
         }).always(function() {
             state.submit_spinner = false;
             applyState();
-            focusItemFeedbackPopup() || focusFirstDraggable();
+            focusItemFeedbackPopup() || focusSuccessFeedback() || focusFirstDraggable();
         });
     };