MDL-74741 javascript: A11y fix for dialogues visible from beginning

moodle · Jun 24, 2022 · 544947c · 544947c
1 parent 8303206
commit 544947c
Show file tree

Hide file tree

Showing 4 changed files with 122 additions and 80 deletions.
diff --git a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js
@@ -176,6 +176,13 @@ Y.extend(DIALOGUE, Y.Panel, {
 
         if (this.get('visible')) {
             this.applyZIndex();
+            this.applyAndTrapFocus();
+            // Only do accessibility hiding for modals because the ARIA spec
+            // says that all ARIA dialogues should be modal.
+            if (this.get('modal')) {
+                // Make this dialogue visible to screen readers.
+                this.setAccessibilityVisible();
+            }
         }
         // Recalculate the zIndex every time the modal is altered.
         this.on('maskShow', this.applyZIndex);
@@ -420,35 +427,12 @@ Y.extend(DIALOGUE, Y.Panel, {
     },
 
     show: function() {
-        var result = null,
-            content = this.bodyNode,
-            focusSelector = this.get('focusOnShowSelector'),
-            focusNode = null;
-
-        result = DIALOGUE.superclass.show.call(this);
-
+        var result = DIALOGUE.superclass.show.call(this);
         if (!this.get('center') && this._originalPosition) {
             // Restore the dialogue position to it's location before it was moved at show time.
             this.get('boundingBox').setXY(this._originalPosition);
         }
-
-        // Try and find a node to focus on using the focusOnShowSelector attribute.
-        if (focusSelector !== null) {
-            focusNode = this.get('boundingBox').one(focusSelector);
-        }
-        if (!focusNode) {
-            // Fall back to the first focusable element in the body of the dialogue if no focus node was found yet.
-            if (content && content !== '') {
-                focusNode = content.one(CAN_RECEIVE_FOCUS_SELECTOR);
-            }
-        }
-        require(['core/local/aria/focuslock'], function(FocusLockManager) {
-            // Trap focus to the current bounding box.
-            FocusLockManager.trapFocus(this.get('boundingBox').getDOMNode());
-            if (focusNode) {
-                focusNode.focus();
-            }
-        }.bind(this));
+        this.applyAndTrapFocus();
         return result;
     },
 
@@ -571,7 +555,37 @@ Y.extend(DIALOGUE, Y.Panel, {
 
         // Clear the cache. No longer need to store these.
         this._hiddenSiblings = [];
-    }
+    },
+
+    /**
+     * Focuses on the node specified by focusOnShowSelector, or the first focusable node if nothing is specified.
+     * It also traps the focus to the current bounding box.
+     *
+     * @method applyAndTrapFocus
+     */
+    applyAndTrapFocus: function() {
+        var content = this.bodyNode;
+        var focusSelector = this.get('focusOnShowSelector');
+        var focusNode = null;
+
+        // Try and find a node to focus on using the focusOnShowSelector attribute.
+        if (focusSelector !== null) {
+            focusNode = this.get('boundingBox').one(focusSelector);
+        }
+        if (!focusNode) {
+            // Fall back to the first focusable element in the body of the dialogue if no focus node was found yet.
+            if (content && content !== '') {
+                focusNode = content.one(CAN_RECEIVE_FOCUS_SELECTOR);
+            }
+        }
+        require(['core/local/aria/focuslock'], function(FocusLockManager) {
+            // Trap focus to the current bounding box.
+            FocusLockManager.trapFocus(this.get('boundingBox').getDOMNode());
+            if (focusNode) {
+                focusNode.focus();
+            }
+        }.bind(this));
+    },
 }, {
     NAME: DIALOGUE_NAME,
     CSS_PREFIX: DIALOGUE_PREFIX,