Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(14)

Side by Side Diff: chrome/browser/resources/options2/options_page.js

Issue 10382073: Added aria-hidden attribute to elements obscured behind an overlay to aid screen readers. (Closed) Base URL: http://git.chromium.org/chromium/src.git@master
Patch Set: Added aria-hidden to $('searchBox') Created 8 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 cr.define('options', function() { 5 cr.define('options', function() {
6 ///////////////////////////////////////////////////////////////////////////// 6 /////////////////////////////////////////////////////////////////////////////
7 // OptionsPage class: 7 // OptionsPage class:
8 8
9 /** 9 /**
10 * Base class for options page. 10 * Base class for options page.
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after
60 /** 60 /**
61 * "Navigates" to a page, meaning that the page will be shown and the 61 * "Navigates" to a page, meaning that the page will be shown and the
62 * appropriate entry is placed in the history. 62 * appropriate entry is placed in the history.
63 * @param {string} pageName Page name. 63 * @param {string} pageName Page name.
64 */ 64 */
65 OptionsPage.navigateToPage = function(pageName) { 65 OptionsPage.navigateToPage = function(pageName) {
66 this.showPageByName(pageName, true); 66 this.showPageByName(pageName, true);
67 }; 67 };
68 68
69 /** 69 /**
70 * Removes the aria-hidden attribute from both the topmost visible page and
71 * the search box if needed.
72 */
73 OptionsPage.removeAriaHidden_ = function() {
74 var topmostPage = this.getTopmostVisiblePage();
75 topmostPage.pageDiv.removeAttribute('aria-hidden');
76
77 if (!this.isOverlayVisible_())
78 $('searchBox').removeAttribute('aria-hidden');
79 };
80
81 /**
70 * Shows a registered page. This handles both top-level and overlay pages. 82 * Shows a registered page. This handles both top-level and overlay pages.
71 * @param {string} pageName Page name. 83 * @param {string} pageName Page name.
72 * @param {boolean} updateHistory True if we should update the history after 84 * @param {boolean} updateHistory True if we should update the history after
73 * showing the page. 85 * showing the page.
74 * @param {Object=} opt_propertyBag An optional bag of properties including 86 * @param {Object=} opt_propertyBag An optional bag of properties including
75 * replaceState (if history state should be replaced instead of pushed). 87 * replaceState (if history state should be replaced instead of pushed).
76 * @private 88 * @private
77 */ 89 */
78 OptionsPage.showPageByName = function(pageName, 90 OptionsPage.showPageByName = function(pageName,
79 updateHistory, 91 updateHistory,
(...skipping 11 matching lines...) Expand all
91 } 103 }
92 } 104 }
93 105
94 // Find the target page. 106 // Find the target page.
95 var targetPage = this.registeredPages[pageName.toLowerCase()]; 107 var targetPage = this.registeredPages[pageName.toLowerCase()];
96 if (!targetPage || !targetPage.canShowPage()) { 108 if (!targetPage || !targetPage.canShowPage()) {
97 // If it's not a page, try it as an overlay. 109 // If it's not a page, try it as an overlay.
98 if (!targetPage && this.showOverlay_(pageName, rootPage)) { 110 if (!targetPage && this.showOverlay_(pageName, rootPage)) {
99 if (updateHistory) 111 if (updateHistory)
100 this.updateHistoryState_(!!opt_propertyBag.replaceState); 112 this.updateHistoryState_(!!opt_propertyBag.replaceState);
113 this.removeAriaHidden_();
Evan Stade 2012/05/15 21:37:33 sprinkling this.removeAriaHidden_() all across thi
101 return; 114 return;
102 } else { 115 } else {
103 targetPage = this.getDefaultPage(); 116 targetPage = this.getDefaultPage();
104 } 117 }
105 } 118 }
106 119
107 pageName = targetPage.name.toLowerCase(); 120 pageName = targetPage.name.toLowerCase();
108 var targetPageWasVisible = targetPage.visible; 121 var targetPageWasVisible = targetPage.visible;
109 122
110 // Determine if the root page is 'sticky', meaning that it 123 // Determine if the root page is 'sticky', meaning that it
(...skipping 22 matching lines...) Expand all
133 // Update visibilities to show only the hierarchy of the target page. 146 // Update visibilities to show only the hierarchy of the target page.
134 for (var i = 0; i < allPageNames.length; ++i) { 147 for (var i = 0; i < allPageNames.length; ++i) {
135 var name = allPageNames[i]; 148 var name = allPageNames[i];
136 var page = this.registeredPages[name] || 149 var page = this.registeredPages[name] ||
137 this.registeredOverlayPages[name]; 150 this.registeredOverlayPages[name];
138 if (!page.parentPage && isRootPageLocked) 151 if (!page.parentPage && isRootPageLocked)
139 continue; 152 continue;
140 page.visible = name == pageName || page.isAncestorOfPage(targetPage); 153 page.visible = name == pageName || page.isAncestorOfPage(targetPage);
141 } 154 }
142 155
156 this.removeAriaHidden_();
157
143 // Update the history and current location. 158 // Update the history and current location.
144 if (updateHistory) 159 if (updateHistory)
145 this.updateHistoryState_(!!opt_propertyBag.replaceState); 160 this.updateHistoryState_(!!opt_propertyBag.replaceState);
146 161
147 // Update tab title. 162 // Update tab title.
148 this.setTitle_(targetPage.title); 163 this.setTitle_(targetPage.title);
149 164
150 // Notify pages if they were shown. 165 // Notify pages if they were shown.
151 for (var i = 0; i < allPageNames.length; ++i) { 166 for (var i = 0; i < allPageNames.length; ++i) {
152 var name = allPageNames[i]; 167 var name = allPageNames[i];
(...skipping 82 matching lines...) Expand 10 before | Expand all | Expand 10 after
235 return false; 250 return false;
236 251
237 if ((!rootPage || !rootPage.sticky) && overlay.parentPage) 252 if ((!rootPage || !rootPage.sticky) && overlay.parentPage)
238 this.showPageByName(overlay.parentPage.name, false); 253 this.showPageByName(overlay.parentPage.name, false);
239 254
240 if (!overlay.visible) { 255 if (!overlay.visible) {
241 overlay.visible = true; 256 overlay.visible = true;
242 if (overlay.didShowPage) overlay.didShowPage(); 257 if (overlay.didShowPage) overlay.didShowPage();
243 } 258 }
244 259
260 // The pages behind the new topmost overlay are now obscured behind its
261 // contents. To prevent screen readers from reading this "hidden"
262 // information, enable the aria-hidden attribute on those pages.
263 var current = this.getTopmostVisiblePage();
264 while (current = current.parentPage)
265 current.pageDiv.setAttribute('aria-hidden', true);
266
267 // The search box also needs to have this attribute applied.
268 $('searchBox').setAttribute('aria-hidden', true);
269
245 // Update tab title. 270 // Update tab title.
246 this.setTitle_(overlay.title); 271 this.setTitle_(overlay.title);
247 // Try to focus the first element of the new overlay. 272 // Try to focus the first element of the new overlay.
248 options.FocusManager.getInstance().focusFirstElement(); 273 options.FocusManager.getInstance().focusFirstElement();
249 274
250 return true; 275 return true;
251 }; 276 };
252 277
253 /** 278 /**
254 * Returns whether or not an overlay is visible. 279 * Returns whether or not an overlay is visible.
(...skipping 27 matching lines...) Expand all
282 OptionsPage.closeOverlay = function() { 307 OptionsPage.closeOverlay = function() {
283 var overlay = this.getVisibleOverlay_(); 308 var overlay = this.getVisibleOverlay_();
284 if (!overlay) 309 if (!overlay)
285 return; 310 return;
286 311
287 overlay.visible = false; 312 overlay.visible = false;
288 313
289 if (overlay.didClosePage) overlay.didClosePage(); 314 if (overlay.didClosePage) overlay.didClosePage();
290 this.updateHistoryState_(false, {ignoreHash: true}); 315 this.updateHistoryState_(false, {ignoreHash: true});
291 316
292 // TODO(khorimoto): Set correct focus on new topmost dialog. 317 this.removeAriaHidden_();
293 }; 318 };
294 319
295 /** 320 /**
296 * Cancels (closes) the overlay, due to the user pressing <Esc>. 321 * Cancels (closes) the overlay, due to the user pressing <Esc>.
297 */ 322 */
298 OptionsPage.cancelOverlay = function() { 323 OptionsPage.cancelOverlay = function() {
299 // Blur the active element to ensure any changed pref value is saved. 324 // Blur the active element to ensure any changed pref value is saved.
300 document.activeElement.blur(); 325 document.activeElement.blur();
301 var overlay = this.getVisibleOverlay_(); 326 var overlay = this.getVisibleOverlay_();
302 // Let the overlay handle the <Esc> if it wants to. 327 // Let the overlay handle the <Esc> if it wants to.
303 if (overlay.handleCancel) 328 if (overlay.handleCancel) {
304 overlay.handleCancel(); 329 overlay.handleCancel();
305 else 330 this.removeAriaHidden_();
331 } else {
306 this.closeOverlay(); 332 this.closeOverlay();
307 } 333 }
334 };
308 335
309 /** 336 /**
310 * Hides the visible overlay. Does not affect the history state. 337 * Hides the visible overlay. Does not affect the history state.
311 * @private 338 * @private
312 */ 339 */
313 OptionsPage.hideOverlay_ = function() { 340 OptionsPage.hideOverlay_ = function() {
314 var overlay = this.getVisibleOverlay_(); 341 var overlay = this.getVisibleOverlay_();
315 if (overlay) 342 if (overlay)
316 overlay.visible = false; 343 overlay.visible = false;
317 }; 344 };
(...skipping 542 matching lines...) Expand 10 before | Expand all | Expand 10 after
860 canShowPage: function() { 887 canShowPage: function() {
861 return true; 888 return true;
862 }, 889 },
863 }; 890 };
864 891
865 // Export 892 // Export
866 return { 893 return {
867 OptionsPage: OptionsPage 894 OptionsPage: OptionsPage
868 }; 895 };
869 }); 896 });
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698