Added aria-hidden attribute to elements obscured behind an overlay to aid screen readers.

chrome/browser/resources/options2/options_page.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('options', function() {
   /////////////////////////////////////////////////////////////////////////////
   // OptionsPage class:
 
   /**
    * Base class for options page.
@@ skipping 49 matching lines @@
   /**
    * "Navigates" to a page, meaning that the page will be shown and the
    * appropriate entry is placed in the history.
    * @param {string} pageName Page name.
    */
   OptionsPage.navigateToPage = function(pageName) {
     this.showPageByName(pageName, true);
   };
 
   /**
+   * Removes the aria-hidden attribute from both the topmost visible page and
+   * the search box if needed.
+   */
+  OptionsPage.removeAriaHidden_ = function() {
+    var topmostPage = this.getTopmostVisiblePage();
+    topmostPage.pageDiv.removeAttribute('aria-hidden');
+
+    if (!this.isOverlayVisible_())
+      $('searchBox').removeAttribute('aria-hidden');
+  };
+
+  /**
    * Shows a registered page. This handles both top-level and overlay pages.
    * @param {string} pageName Page name.
    * @param {boolean} updateHistory True if we should update the history after
    *     showing the page.
    * @param {Object=} opt_propertyBag An optional bag of properties including
    *     replaceState (if history state should be replaced instead of pushed).
    * @private
    */
   OptionsPage.showPageByName = function(pageName,
                                         updateHistory,
@@ skipping 11 matching lines @@
       }
     }
 
     // Find the target page.
     var targetPage = this.registeredPages[pageName.toLowerCase()];
     if (!targetPage || !targetPage.canShowPage()) {
       // If it's not a page, try it as an overlay.
       if (!targetPage && this.showOverlay_(pageName, rootPage)) {
         if (updateHistory)
           this.updateHistoryState_(!!opt_propertyBag.replaceState);
+        this.removeAriaHidden_();

[Evan Stade, 2012/05/15 21:37:33]

sprinkling this.removeAriaHidden_() all across this file doesn't seem like a
particularly robust way to solve the problem. Next time someone needs to make a
change, what are the chances they'll think about whether they need to make this
call? Also it's really hard to know that all possible situations are handled
correctly. 

         return;
       } else {
         targetPage = this.getDefaultPage();
       }
     }
 
     pageName = targetPage.name.toLowerCase();
     var targetPageWasVisible = targetPage.visible;
 
     // Determine if the root page is 'sticky', meaning that it
@@ skipping 22 matching lines @@
     // Update visibilities to show only the hierarchy of the target page.
     for (var i = 0; i < allPageNames.length; ++i) {
       var name = allPageNames[i];
       var page = this.registeredPages[name] ||
                  this.registeredOverlayPages[name];
       if (!page.parentPage && isRootPageLocked)
         continue;
       page.visible = name == pageName || page.isAncestorOfPage(targetPage);
     }
 
+    this.removeAriaHidden_();
+
     // Update the history and current location.
     if (updateHistory)
       this.updateHistoryState_(!!opt_propertyBag.replaceState);
 
     // Update tab title.
     this.setTitle_(targetPage.title);
 
     // Notify pages if they were shown.
     for (var i = 0; i < allPageNames.length; ++i) {
       var name = allPageNames[i];
@@ skipping 82 matching lines @@
       return false;
 
     if ((!rootPage || !rootPage.sticky) && overlay.parentPage)
       this.showPageByName(overlay.parentPage.name, false);
 
     if (!overlay.visible) {
       overlay.visible = true;
       if (overlay.didShowPage) overlay.didShowPage();
     }
 
+    // The pages behind the new topmost overlay are now obscured behind its
+    // contents. To prevent screen readers from reading this "hidden"
+    // information, enable the aria-hidden attribute on those pages.
+    var current = this.getTopmostVisiblePage();
+    while (current = current.parentPage)
+      current.pageDiv.setAttribute('aria-hidden', true);
+
+    // The search box also needs to have this attribute applied.
+    $('searchBox').setAttribute('aria-hidden', true);
+
     // Update tab title.
     this.setTitle_(overlay.title);
     // Try to focus the first element of the new overlay.
     options.FocusManager.getInstance().focusFirstElement();
 
     return true;
   };
 
   /**
    * Returns whether or not an overlay is visible.
@@ skipping 27 matching lines @@
   OptionsPage.closeOverlay = function() {
     var overlay = this.getVisibleOverlay_();
     if (!overlay)
       return;
 
     overlay.visible = false;
 
     if (overlay.didClosePage) overlay.didClosePage();
     this.updateHistoryState_(false, {ignoreHash: true});
 
-    // TODO(khorimoto): Set correct focus on new topmost dialog.
+    this.removeAriaHidden_();
   };
 
   /**
    * Cancels (closes) the overlay, due to the user pressing <Esc>.
    */
   OptionsPage.cancelOverlay = function() {
     // Blur the active element to ensure any changed pref value is saved.
     document.activeElement.blur();
     var overlay = this.getVisibleOverlay_();
     // Let the overlay handle the <Esc> if it wants to.
-    if (overlay.handleCancel)
+    if (overlay.handleCancel) {
       overlay.handleCancel();
-    else
+      this.removeAriaHidden_();
+    } else {
       this.closeOverlay();
-  }
+    }
+  };
 
   /**
    * Hides the visible overlay. Does not affect the history state.
    * @private
    */
   OptionsPage.hideOverlay_ = function() {
     var overlay = this.getVisibleOverlay_();
     if (overlay)
       overlay.visible = false;
   };
@@ skipping 542 matching lines @@
     canShowPage: function() {
       return true;
     },
   };
 
   // Export
   return {
     OptionsPage: OptionsPage
   };
 });