modalariavisibilityhelper.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. // Copyright 2011 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Helper object used by modal elements to control aria
  16. * visibility of the rest of the page.
  17. */
  18. goog.provide('goog.ui.ModalAriaVisibilityHelper');
  19. goog.require('goog.a11y.aria');
  20. goog.require('goog.a11y.aria.State');
  21. /**
  22. * Helper object to control aria visibility of the rest of the page (background)
  23. * for a given element. Example usage is to restrict screenreader focus to
  24. * a modal popup while it is visible.
  25. *
  26. * WARNING: This will work only if the element is rendered directly in the
  27. * 'body' element.
  28. *
  29. * @param {!Element} element The given element.
  30. * @param {!goog.dom.DomHelper} domHelper DomHelper for the page.
  31. * @constructor
  32. */
  33. goog.ui.ModalAriaVisibilityHelper = function(element, domHelper) {
  34. /**
  35. * @private {!Element}
  36. */
  37. this.element_ = element;
  38. /**
  39. * @private {!goog.dom.DomHelper}
  40. */
  41. this.dom_ = domHelper;
  42. };
  43. /**
  44. * The elements set to aria-hidden when the popup was made visible.
  45. * @type {Array<!Element>}
  46. * @private
  47. */
  48. goog.ui.ModalAriaVisibilityHelper.prototype.hiddenElements_;
  49. /**
  50. * Sets aria-hidden on the rest of the page to restrict screen reader focus.
  51. * Top-level elements with an explicit aria-hidden state are not altered.
  52. * @param {boolean} hide Whether to hide or show the rest of the page.
  53. */
  54. goog.ui.ModalAriaVisibilityHelper.prototype.setBackgroundVisibility = function(
  55. hide) {
  56. if (hide) {
  57. if (!this.hiddenElements_) {
  58. this.hiddenElements_ = [];
  59. }
  60. var topLevelChildren = this.dom_.getChildren(this.dom_.getDocument().body);
  61. for (var i = 0; i < topLevelChildren.length; i++) {
  62. var child = topLevelChildren[i];
  63. if (child != this.element_ &&
  64. !goog.a11y.aria.getState(child, goog.a11y.aria.State.HIDDEN)) {
  65. goog.a11y.aria.setState(child, goog.a11y.aria.State.HIDDEN, true);
  66. this.hiddenElements_.push(child);
  67. }
  68. }
  69. } else if (this.hiddenElements_) {
  70. for (var i = 0; i < this.hiddenElements_.length; i++) {
  71. goog.a11y.aria.removeState(
  72. this.hiddenElements_[i], goog.a11y.aria.State.HIDDEN);
  73. }
  74. this.hiddenElements_ = null;
  75. }
  76. };