diff --git a/Changelog.md b/Changelog.md index 1f256fdce..ab240a324 100644 --- a/Changelog.md +++ b/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) -------------------------- diff --git a/drag_and_drop_v2/__init__.py b/drag_and_drop_v2/__init__.py index a87e4c58f..f2d7c7682 100644 --- 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__ = "4.0.2" +__version__ = "4.0.3" diff --git a/drag_and_drop_v2/public/css/drag_and_drop.css b/drag_and_drop_v2/public/css/drag_and_drop.css index 61b695154..c1008f39d 100644 --- a/drag_and_drop_v2/public/css/drag_and_drop.css +++ b/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 { diff --git a/drag_and_drop_v2/public/js/drag_and_drop.js b/drag_and_drop_v2/public/js/drag_and_drop.js index c0b512e0e..c1dde0b68 100644 --- a/drag_and_drop_v2/public/js/drag_and_drop.js +++ b/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(); }); };