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

chrome/browser/resources/options2/options_page.js

Index: chrome/browser/resources/options2/options_page.js
diff --git a/chrome/browser/resources/options2/options_page.js b/chrome/browser/resources/options2/options_page.js
index 33652e67a59492ae596a022397cd9e8347538463..af39c54bd7aacee175ddb699451336110b322c0b 100644
--- a/chrome/browser/resources/options2/options_page.js
+++ b/chrome/browser/resources/options2/options_page.js
@@ -67,6 +67,18 @@ cr.define('options', function() {
   };
 
   /**
+   * 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
@@ -98,6 +110,7 @@ cr.define('options', function() {
       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();
@@ -140,6 +153,8 @@ cr.define('options', function() {
       page.visible = name == pageName || page.isAncestorOfPage(targetPage);
     }
 
+    this.removeAriaHidden_();
+
     // Update the history and current location.
     if (updateHistory)
       this.updateHistoryState_(!!opt_propertyBag.replaceState);
@@ -242,6 +257,16 @@ cr.define('options', function() {
       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.
@@ -289,7 +314,7 @@ cr.define('options', function() {
     if (overlay.didClosePage) overlay.didClosePage();
     this.updateHistoryState_(false, {ignoreHash: true});
 
-    // TODO(khorimoto): Set correct focus on new topmost dialog.
+    this.removeAriaHidden_();
   };
 
   /**
@@ -300,11 +325,13 @@ cr.define('options', function() {
     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.