MDL-51799 javascript: dialogue accessibility
authorRyan Wyllie <ryan@moodle.com>
Mon, 26 Oct 2015 07:02:03 +0000 (07:02 +0000)
committerRyan Wyllie <ryan@moodle.com>
Thu, 29 Oct 2015 05:10:10 +0000 (05:10 +0000)
Moved setting the aria visiblity of the dialogues from the show
and hide functions into the visibility change handler to stop
multiple calls.

Also made the visibility checker just continue to buffer the elements
it hides, rather than clearning them, on multiple calls.

lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js
lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js
lib/yui/src/notification/js/dialogue.js

index 384dfcf..b94fdf9 100644 (file)
Binary files a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js and b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-debug.js differ
index 4fa7dd8..db5eca8 100644 (file)
Binary files a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js and b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue-min.js differ
index 78eb3ae..77ad4e4 100644 (file)
Binary files a/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js and b/lib/yui/build/moodle-core-notification-dialogue/moodle-core-notification-dialogue.js differ
index ffede8a..c1cbbf0 100644 (file)
@@ -80,6 +80,16 @@ Y.extend(DIALOGUE, Y.Panel, {
      */
     _originalPosition: null,
 
+    /**
+     * The list of elements that have been aria hidden when displaying
+     * this dialogue.
+     *
+     * @property _hiddenSiblings
+     * @protected
+     * @type Array
+     */
+    _hiddenSiblings: null,
+
     /**
      * Initialise the dialogue.
      *
@@ -88,6 +98,9 @@ Y.extend(DIALOGUE, Y.Panel, {
     initializer : function() {
         var bb;
 
+        // Initialise the element cache.
+        this._hiddenSiblings = [];
+
         if (this.get('render')) {
             this.render();
         }
@@ -214,6 +227,7 @@ Y.extend(DIALOGUE, Y.Panel, {
         var titlebar, bb;
         if (e.attrName === 'visible') {
             this.get('maskNode').addClass(CSS.LIGHTBOX);
+            // Going from visible to hidden.
             if (e.prevVal && !e.newVal) {
                 bb = this.get('boundingBox');
                 if (this._resizeevent) {
@@ -225,7 +239,13 @@ Y.extend(DIALOGUE, Y.Panel, {
                     this._orientationevent = null;
                 }
                 bb.detach('key', this.keyDelegation);
+
+                if (this.get('modal')) {
+                    // Hide this dialogue from screen readers.
+                    this.setAccessibilityHidden();
+                }
             }
+            // Going from hidden to visible.
             if (!e.prevVal && e.newVal) {
                 // This needs to be done each time the dialog is shown as new dialogs may have been opened.
                 this.applyZIndex();
@@ -239,6 +259,13 @@ Y.extend(DIALOGUE, Y.Panel, {
                     }
                 }
                 this.keyDelegation();
+
+                // 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();
+                }
             }
             if (this.get('center') && !e.prevVal && e.newVal) {
                 this.centerDialogue();
@@ -338,13 +365,6 @@ Y.extend(DIALOGUE, Y.Panel, {
             this.lockScroll.enableScrollLock(this.shouldResizeFullscreen());
         }
 
-        // 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();
-        }
-
         // Try and find a node to focus on using the focusOnShowSelector attribute.
         if (focusSelector !== null) {
             focusNode = this.get('boundingBox').one(focusSelector);
@@ -372,11 +392,6 @@ Y.extend(DIALOGUE, Y.Panel, {
             }
         }
 
-        if (this.get('modal')) {
-            // Hide this dialogue from screen readers.
-            this.setAccessibilityHidden();
-        }
-
         // Unlock scroll if the plugin is present.
         if (this.lockScroll) {
             this.lockScroll.disableScrollLock();
@@ -434,8 +449,6 @@ Y.extend(DIALOGUE, Y.Panel, {
         // Get the element that contains this dialogue because we need it
         // to filter out from the document.body child elements.
         var container = this.get(BASE);
-        // Keep a record of any elements we change so that they can be reverted later.
-        this.hiddenSiblings = [];
 
         // We need to get a list containing each sibling element and the shallowest
         // non-ancestral nodes in the DOM. We can shortcut this a little by leveraging
@@ -450,7 +463,7 @@ Y.extend(DIALOGUE, Y.Panel, {
                 if (hidden !== 'true') {
                     // Save their current state.
                     node.setData('previous-aria-hidden', hidden);
-                    this.hiddenSiblings.push(node);
+                    this._hiddenSiblings.push(node);
 
                     // Hide this node from screen readers.
                     node.set('aria-hidden', 'true');
@@ -474,7 +487,7 @@ Y.extend(DIALOGUE, Y.Panel, {
         container.set('aria-hidden', 'true');
 
         // Restore the sibling nodes back to their original values.
-        Y.Array.each(this.hiddenSiblings, function(node) {
+        Y.Array.each(this._hiddenSiblings, function(node) {
             var previousValue = node.getData('previous-aria-hidden');
             // If the element didn't previously have an aria-hidden attribute
             // then we can just remove the one we set.
@@ -487,7 +500,7 @@ Y.extend(DIALOGUE, Y.Panel, {
         });
 
         // Clear the cache. No longer need to store these.
-        this.hiddenSiblings = [];
+        this._hiddenSiblings = [];
     }
 }, {
     NAME : DIALOGUE_NAME,