From 147b474831ec21b486a1ededaa4a267c4825d2dc Mon Sep 17 00:00:00 2001 From: Daniel Valenzuela Date: Fri, 17 May 2024 02:06:25 -0400 Subject: [PATCH 1/4] refactor: set go to beginning button to hidden --- drag_and_drop_v2/public/js/drag_and_drop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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..389dab0a7 100644 --- a/drag_and_drop_v2/public/js/drag_and_drop.js +++ b/drag_and_drop_v2/public/js/drag_and_drop.js @@ -456,7 +456,7 @@ function DragAndDropTemplates(configuration) { } var go_to_beginning_button_class = 'go-to-beginning-button'; if (!ctx.show_go_to_beginning_button) { - go_to_beginning_button_class += ' sr'; + go_to_beginning_button_class += ' hidden'; } return( h("div.problem-action-buttons-wrapper", {attributes: {'role': 'group', 'aria-label': gettext('Actions')}}, [ From 366cb0292267e86f31ee8ddb5021941af858ec4f Mon Sep 17 00:00:00 2001 From: Daniel Valenzuela Date: Wed, 22 May 2024 20:06:07 -0400 Subject: [PATCH 2/4] fixup! fix: focus feedback after submit --- Changelog.md | 5 +++++ drag_and_drop_v2/__init__.py | 2 +- drag_and_drop_v2/public/js/drag_and_drop.js | 14 ++++++++++++-- 3 files changed, 18 insertions(+), 3 deletions(-) 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/js/drag_and_drop.js b/drag_and_drop_v2/public/js/drag_and_drop.js index 389dab0a7..ae3acd673 100644 --- a/drag_and_drop_v2/public/js/drag_and_drop.js +++ b/drag_and_drop_v2/public/js/drag_and_drop.js @@ -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(); @@ -1829,7 +1839,7 @@ function DragAndDropBlock(runtime, element, configuration) { applyState(); if (manually_closed) { - focusFirstDraggable(); + focusSuccessFeedback() || focusFirstDraggable(); } }; @@ -1903,7 +1913,7 @@ function DragAndDropBlock(runtime, element, configuration) { }).always(function() { state.submit_spinner = false; applyState(); - focusItemFeedbackPopup() || focusFirstDraggable(); + focusItemFeedbackPopup() || focusSuccessFeedback() || focusFirstDraggable(); }); }; From d50b3b9cf3b2a36bed3e9a2215d8dea67ea30e68 Mon Sep 17 00:00:00 2001 From: Daniel Valenzuela Date: Sun, 9 Jun 2024 22:13:46 -0400 Subject: [PATCH 3/4] fixup! fix: focus submit after no items and improve go-to-beginning hiding --- drag_and_drop_v2/public/css/drag_and_drop.css | 1 - drag_and_drop_v2/public/js/drag_and_drop.js | 24 +++++++++++++++---- 2 files changed, 19 insertions(+), 6 deletions(-) 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 ae3acd673..1bf437216 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', { @@ -456,7 +456,7 @@ function DragAndDropTemplates(configuration) { } var go_to_beginning_button_class = 'go-to-beginning-button'; if (!ctx.show_go_to_beginning_button) { - go_to_beginning_button_class += ' hidden'; + go_to_beginning_button_class += ' sr'; } return( h("div.problem-action-buttons-wrapper", {attributes: {'role': 'group', 'aria-label': gettext('Actions')}}, [ @@ -1330,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")) { @@ -1810,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) { From ce7181269b832b2d44e87f2c5acc8ff561aae193 Mon Sep 17 00:00:00 2001 From: Daniel Valenzuela Date: Wed, 19 Jun 2024 19:39:15 -0400 Subject: [PATCH 4/4] fix: remove role group --- drag_and_drop_v2/public/js/drag_and_drop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1bf437216..c1dde0b68 100644 --- a/drag_and_drop_v2/public/js/drag_and_drop.js +++ b/drag_and_drop_v2/public/js/drag_and_drop.js @@ -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",