123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424 |
- // Copyright 2007 The Closure Library Authors. All Rights Reserved.
- //
- // Licensed under the Apache License, Version 2.0 (the "License");
- // you may not use this file except in compliance with the License.
- // You may obtain a copy of the License at
- //
- // http://www.apache.org/licenses/LICENSE-2.0
- //
- // Unless required by applicable law or agreed to in writing, software
- // distributed under the License is distributed on an "AS-IS" BASIS,
- // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- // See the License for the specific language governing permissions and
- // limitations under the License.
- /**
- * @fileoverview Utilities for adding, removing and setting ARIA roles and
- * states as defined by W3C ARIA standard: http://www.w3.org/TR/wai-aria/
- * All modern browsers have some form of ARIA support, so no browser checks are
- * performed when adding ARIA to components.
- *
- */
- goog.provide('goog.a11y.aria');
- goog.require('goog.a11y.aria.Role');
- goog.require('goog.a11y.aria.State');
- goog.require('goog.a11y.aria.datatables');
- goog.require('goog.array');
- goog.require('goog.asserts');
- goog.require('goog.dom');
- goog.require('goog.dom.TagName');
- goog.require('goog.object');
- goog.require('goog.string');
- /**
- * ARIA states/properties prefix.
- * @private
- */
- goog.a11y.aria.ARIA_PREFIX_ = 'aria-';
- /**
- * ARIA role attribute.
- * @private
- */
- goog.a11y.aria.ROLE_ATTRIBUTE_ = 'role';
- /**
- * A list of tag names for which we don't need to set ARIA role and states
- * because they have well supported semantics for screen readers or because
- * they don't contain content to be made accessible.
- * @private
- */
- goog.a11y.aria.TAGS_WITH_ASSUMED_ROLES_ = goog.object.createSet([
- goog.dom.TagName.A, goog.dom.TagName.AREA, goog.dom.TagName.BUTTON,
- goog.dom.TagName.HEAD, goog.dom.TagName.INPUT, goog.dom.TagName.LINK,
- goog.dom.TagName.MENU, goog.dom.TagName.META, goog.dom.TagName.OPTGROUP,
- goog.dom.TagName.OPTION, goog.dom.TagName.PROGRESS, goog.dom.TagName.STYLE,
- goog.dom.TagName.SELECT, goog.dom.TagName.SOURCE, goog.dom.TagName.TEXTAREA,
- goog.dom.TagName.TITLE, goog.dom.TagName.TRACK
- ]);
- /**
- * A list of roles which are considered container roles.
- * Container roles are ARIA roles which use the aria-activedescendant property
- * to manage their active descendants or children. See
- * {@link http://www.w3.org/TR/wai-aria/states_and_properties
- * #aria-activedescendant} for more information.
- * @private @const {!Array<goog.a11y.aria.Role>}
- */
- goog.a11y.aria.CONTAINER_ROLES_ = [
- goog.a11y.aria.Role.COMBOBOX, goog.a11y.aria.Role.GRID,
- goog.a11y.aria.Role.GROUP, goog.a11y.aria.Role.LISTBOX,
- goog.a11y.aria.Role.MENU, goog.a11y.aria.Role.MENUBAR,
- goog.a11y.aria.Role.RADIOGROUP, goog.a11y.aria.Role.ROW,
- goog.a11y.aria.Role.ROWGROUP, goog.a11y.aria.Role.TAB_LIST,
- goog.a11y.aria.Role.TEXTBOX, goog.a11y.aria.Role.TOOLBAR,
- goog.a11y.aria.Role.TREE, goog.a11y.aria.Role.TREEGRID
- ];
- /**
- * Sets the role of an element. If the roleName is
- * empty string or null, the role for the element is removed.
- * We encourage clients to call the goog.a11y.aria.removeRole
- * method instead of setting null and empty string values.
- * Special handling for this case is added to ensure
- * backword compatibility with existing code.
- *
- * @param {!Element} element DOM node to set role of.
- * @param {!goog.a11y.aria.Role|string} roleName role name(s).
- */
- goog.a11y.aria.setRole = function(element, roleName) {
- if (!roleName) {
- // Setting the ARIA role to empty string is not allowed
- // by the ARIA standard.
- goog.a11y.aria.removeRole(element);
- } else {
- if (goog.asserts.ENABLE_ASSERTS) {
- goog.asserts.assert(
- goog.object.containsValue(goog.a11y.aria.Role, roleName),
- 'No such ARIA role ' + roleName);
- }
- element.setAttribute(goog.a11y.aria.ROLE_ATTRIBUTE_, roleName);
- }
- };
- /**
- * Gets role of an element.
- * @param {!Element} element DOM element to get role of.
- * @return {?goog.a11y.aria.Role} ARIA Role name.
- */
- goog.a11y.aria.getRole = function(element) {
- var role = element.getAttribute(goog.a11y.aria.ROLE_ATTRIBUTE_);
- return /** @type {goog.a11y.aria.Role} */ (role) || null;
- };
- /**
- * Removes role of an element.
- * @param {!Element} element DOM element to remove the role from.
- */
- goog.a11y.aria.removeRole = function(element) {
- element.removeAttribute(goog.a11y.aria.ROLE_ATTRIBUTE_);
- };
- /**
- * Sets the state or property of an element.
- * @param {!Element} element DOM node where we set state.
- * @param {!(goog.a11y.aria.State|string)} stateName State attribute being set.
- * Automatically adds prefix 'aria-' to the state name if the attribute is
- * not an extra attribute.
- * @param {string|boolean|number|!Array<string>} value Value
- * for the state attribute.
- */
- goog.a11y.aria.setState = function(element, stateName, value) {
- if (goog.isArray(value)) {
- value = value.join(' ');
- }
- var attrStateName = goog.a11y.aria.getAriaAttributeName_(stateName);
- if (value === '' || value == undefined) {
- var defaultValueMap = goog.a11y.aria.datatables.getDefaultValuesMap();
- // Work around for browsers that don't properly support ARIA.
- // According to the ARIA W3C standard, user agents should allow
- // setting empty value which results in setting the default value
- // for the ARIA state if such exists. The exact text from the ARIA W3C
- // standard (http://www.w3.org/TR/wai-aria/states_and_properties):
- // "When a value is indicated as the default, the user agent
- // MUST follow the behavior prescribed by this value when the state or
- // property is empty or undefined."
- // The defaultValueMap contains the default values for the ARIA states
- // and has as a key the goog.a11y.aria.State constant for the state.
- if (stateName in defaultValueMap) {
- element.setAttribute(attrStateName, defaultValueMap[stateName]);
- } else {
- element.removeAttribute(attrStateName);
- }
- } else {
- element.setAttribute(attrStateName, value);
- }
- };
- /**
- * Toggles the ARIA attribute of an element.
- * Meant for attributes with a true/false value, but works with any attribute.
- * If the attribute does not have a true/false value, the following rules apply:
- * A not empty attribute will be removed.
- * An empty attribute will be set to true.
- * @param {!Element} el DOM node for which to set attribute.
- * @param {!(goog.a11y.aria.State|string)} attr ARIA attribute being set.
- * Automatically adds prefix 'aria-' to the attribute name if the attribute
- * is not an extra attribute.
- */
- goog.a11y.aria.toggleState = function(el, attr) {
- var val = goog.a11y.aria.getState(el, attr);
- if (!goog.string.isEmptyOrWhitespace(goog.string.makeSafe(val)) &&
- !(val == 'true' || val == 'false')) {
- goog.a11y.aria.removeState(el, /** @type {!goog.a11y.aria.State} */ (attr));
- return;
- }
- goog.a11y.aria.setState(el, attr, val == 'true' ? 'false' : 'true');
- };
- /**
- * Remove the state or property for the element.
- * @param {!Element} element DOM node where we set state.
- * @param {!goog.a11y.aria.State} stateName State name.
- */
- goog.a11y.aria.removeState = function(element, stateName) {
- element.removeAttribute(goog.a11y.aria.getAriaAttributeName_(stateName));
- };
- /**
- * Gets value of specified state or property.
- * @param {!Element} element DOM node to get state from.
- * @param {!goog.a11y.aria.State|string} stateName State name.
- * @return {string} Value of the state attribute.
- */
- goog.a11y.aria.getState = function(element, stateName) {
- // TODO(user): return properly typed value result --
- // boolean, number, string, null. We should be able to chain
- // getState(...) and setState(...) methods.
- var attr =
- /** @type {string|number|boolean} */ (
- element.getAttribute(
- goog.a11y.aria.getAriaAttributeName_(stateName)));
- var isNullOrUndefined = attr == null || attr == undefined;
- return isNullOrUndefined ? '' : String(attr);
- };
- /**
- * Returns the activedescendant element for the input element by
- * using the activedescendant ARIA property of the given element.
- * @param {!Element} element DOM node to get activedescendant
- * element for.
- * @return {?Element} DOM node of the activedescendant, if found.
- */
- goog.a11y.aria.getActiveDescendant = function(element) {
- var id =
- goog.a11y.aria.getState(element, goog.a11y.aria.State.ACTIVEDESCENDANT);
- return goog.dom.getOwnerDocument(element).getElementById(id);
- };
- /**
- * Sets the activedescendant ARIA property value for an element.
- * If the activeElement is not null, it should have an id set.
- * @param {!Element} element DOM node to set activedescendant ARIA property to.
- * @param {?Element} activeElement DOM node being set as activedescendant.
- */
- goog.a11y.aria.setActiveDescendant = function(element, activeElement) {
- var id = '';
- if (activeElement) {
- id = activeElement.id;
- goog.asserts.assert(id, 'The active element should have an id.');
- }
- goog.a11y.aria.setState(element, goog.a11y.aria.State.ACTIVEDESCENDANT, id);
- };
- /**
- * Gets the label of the given element.
- * @param {!Element} element DOM node to get label from.
- * @return {string} label The label.
- */
- goog.a11y.aria.getLabel = function(element) {
- return goog.a11y.aria.getState(element, goog.a11y.aria.State.LABEL);
- };
- /**
- * Sets the label of the given element.
- * @param {!Element} element DOM node to set label to.
- * @param {string} label The label to set.
- */
- goog.a11y.aria.setLabel = function(element, label) {
- goog.a11y.aria.setState(element, goog.a11y.aria.State.LABEL, label);
- };
- /**
- * Asserts that the element has a role set if it's not an HTML element whose
- * semantics is well supported by most screen readers.
- * Only to be used internally by the ARIA library in goog.a11y.aria.*.
- * @param {!Element} element The element to assert an ARIA role set.
- * @param {!IArrayLike<string>} allowedRoles The child roles of
- * the roles.
- */
- goog.a11y.aria.assertRoleIsSetInternalUtil = function(element, allowedRoles) {
- if (goog.a11y.aria.TAGS_WITH_ASSUMED_ROLES_[element.tagName]) {
- return;
- }
- var elementRole = /** @type {string}*/ (goog.a11y.aria.getRole(element));
- goog.asserts.assert(
- elementRole != null, 'The element ARIA role cannot be null.');
- goog.asserts.assert(
- goog.array.contains(allowedRoles, elementRole),
- 'Non existing or incorrect role set for element.' +
- 'The role set is "' + elementRole + '". The role should be any of "' +
- allowedRoles + '". Check the ARIA specification for more details ' +
- 'http://www.w3.org/TR/wai-aria/roles.');
- };
- /**
- * Gets the boolean value of an ARIA state/property.
- * @param {!Element} element The element to get the ARIA state for.
- * @param {!goog.a11y.aria.State|string} stateName the ARIA state name.
- * @return {?boolean} Boolean value for the ARIA state value or null if
- * the state value is not 'true', not 'false', or not set.
- */
- goog.a11y.aria.getStateBoolean = function(element, stateName) {
- var attr =
- /** @type {string|boolean} */ (
- element.getAttribute(
- goog.a11y.aria.getAriaAttributeName_(stateName)));
- goog.asserts.assert(
- goog.isBoolean(attr) || attr == null || attr == 'true' ||
- attr == 'false');
- if (attr == null) {
- return attr;
- }
- return goog.isBoolean(attr) ? attr : attr == 'true';
- };
- /**
- * Gets the number value of an ARIA state/property.
- * @param {!Element} element The element to get the ARIA state for.
- * @param {!goog.a11y.aria.State|string} stateName the ARIA state name.
- * @return {?number} Number value for the ARIA state value or null if
- * the state value is not a number or not set.
- */
- goog.a11y.aria.getStateNumber = function(element, stateName) {
- var attr =
- /** @type {string|number} */ (
- element.getAttribute(
- goog.a11y.aria.getAriaAttributeName_(stateName)));
- goog.asserts.assert(
- (attr == null || !isNaN(Number(attr))) && !goog.isBoolean(attr));
- return attr == null ? null : Number(attr);
- };
- /**
- * Gets the string value of an ARIA state/property.
- * @param {!Element} element The element to get the ARIA state for.
- * @param {!goog.a11y.aria.State|string} stateName the ARIA state name.
- * @return {?string} String value for the ARIA state value or null if
- * the state value is empty string or not set.
- */
- goog.a11y.aria.getStateString = function(element, stateName) {
- var attr =
- element.getAttribute(goog.a11y.aria.getAriaAttributeName_(stateName));
- goog.asserts.assert(
- (attr == null || goog.isString(attr)) &&
- (attr == '' || isNaN(Number(attr))) && attr != 'true' && attr != 'false');
- return (attr == null || attr == '') ? null : attr;
- };
- /**
- * Gets array of strings value of the specified state or
- * property for the element.
- * Only to be used internally by the ARIA library in goog.a11y.aria.*.
- * @param {!Element} element DOM node to get state from.
- * @param {!goog.a11y.aria.State} stateName State name.
- * @return {!IArrayLike<string>} string Array
- * value of the state attribute.
- */
- goog.a11y.aria.getStringArrayStateInternalUtil = function(element, stateName) {
- var attrValue =
- element.getAttribute(goog.a11y.aria.getAriaAttributeName_(stateName));
- return goog.a11y.aria.splitStringOnWhitespace_(attrValue);
- };
- /**
- * Returns true if element has an ARIA state/property, false otherwise.
- * @param {!Element} element The element to get the ARIA state for.
- * @param {!goog.a11y.aria.State|string} stateName the ARIA state name.
- * @return {boolean}
- */
- goog.a11y.aria.hasState = function(element, stateName) {
- return element.hasAttribute(goog.a11y.aria.getAriaAttributeName_(stateName));
- };
- /**
- * Returns whether the element has a container ARIA role.
- * Container roles are ARIA roles that use the aria-activedescendant property
- * to manage their active descendants or children. See
- * {@link http://www.w3.org/TR/wai-aria/states_and_properties
- * #aria-activedescendant} for more information.
- * @param {!Element} element
- * @return {boolean}
- */
- goog.a11y.aria.isContainerRole = function(element) {
- var role = goog.a11y.aria.getRole(element);
- return goog.array.contains(goog.a11y.aria.CONTAINER_ROLES_, role);
- };
- /**
- * Splits the input stringValue on whitespace.
- * @param {string} stringValue The value of the string to split.
- * @return {!IArrayLike<string>} string Array
- * value as result of the split.
- * @private
- */
- goog.a11y.aria.splitStringOnWhitespace_ = function(stringValue) {
- return stringValue ? stringValue.split(/\s+/) : [];
- };
- /**
- * Adds the 'aria-' prefix to ariaName.
- * @param {string} ariaName ARIA state/property name.
- * @private
- * @return {string} The ARIA attribute name with added 'aria-' prefix.
- * @throws {Error} If no such attribute exists.
- */
- goog.a11y.aria.getAriaAttributeName_ = function(ariaName) {
- if (goog.asserts.ENABLE_ASSERTS) {
- goog.asserts.assert(ariaName, 'ARIA attribute cannot be empty.');
- goog.asserts.assert(
- goog.object.containsValue(goog.a11y.aria.State, ariaName),
- 'No such ARIA attribute ' + ariaName);
- }
- return goog.a11y.aria.ARIA_PREFIX_ + ariaName;
- };
|