2 * @license AngularJS v1.5.0
3 * (c) 2010-2016 Google, Inc. http://angularjs.org
6 (function(window, angular, undefined) {'use strict';
13 * The `ngAria` module provides support for common
14 * [<abbr title="Accessible Rich Internet Applications">ARIA</abbr>](http://www.w3.org/TR/wai-aria/)
15 * attributes that convey state or semantic information about the application for users
16 * of assistive technologies, such as screen readers.
18 * <div doc-module-components="ngAria"></div>
22 * For ngAria to do its magic, simply include the module `ngAria` as a dependency. The following
23 * directives are supported:
24 * `ngModel`, `ngChecked`, `ngRequired`, `ngValue`, `ngDisabled`, `ngShow`, `ngHide`, `ngClick`,
25 * `ngDblClick`, and `ngMessages`.
27 * Below is a more detailed breakdown of the attributes handled by ngAria:
29 * | Directive | Supported Attributes |
30 * |---------------------------------------------|----------------------------------------------------------------------------------------|
31 * | {@link ng.directive:ngModel ngModel} | aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-invalid, aria-required, input roles |
32 * | {@link ng.directive:ngDisabled ngDisabled} | aria-disabled |
33 * | {@link ng.directive:ngRequired ngRequired} | aria-required |
34 * | {@link ng.directive:ngChecked ngChecked} | aria-checked |
35 * | {@link ng.directive:ngValue ngValue} | aria-checked |
36 * | {@link ng.directive:ngShow ngShow} | aria-hidden |
37 * | {@link ng.directive:ngHide ngHide} | aria-hidden |
38 * | {@link ng.directive:ngDblclick ngDblclick} | tabindex |
39 * | {@link module:ngMessages ngMessages} | aria-live |
40 * | {@link ng.directive:ngClick ngClick} | tabindex, keypress event, button role |
42 * Find out more information about each directive by reading the
43 * {@link guide/accessibility ngAria Developer Guide}.
46 * Using ngDisabled with ngAria:
48 * <md-checkbox ng-disabled="disabled">
52 * <md-checkbox ng-disabled="disabled" aria-disabled="true">
55 * ##Disabling Attributes
56 * It's possible to disable individual attributes added by ngAria with the
57 * {@link ngAria.$ariaProvider#config config} method. For more details, see the
58 * {@link guide/accessibility Developer Guide}.
60 /* global -ngAriaModule */
61 var ngAriaModule = angular.module('ngAria', ['ng']).
62 provider('$aria', $AriaProvider);
67 var nodeBlackList = ['BUTTON', 'A', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS', 'SUMMARY'];
69 var isNodeOneOf = function(elem, nodeTypeArray) {
70 if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
80 * Used for configuring the ARIA attributes injected and managed by ngAria.
83 * angular.module('myApp', ['ngAria'], function config($ariaProvider) {
84 * $ariaProvider.config({
92 * Requires the {@link ngAria} module to be installed.
95 function $AriaProvider() {
105 bindRoleForClick: true
110 * @name $ariaProvider#config
112 * @param {object} config object to enable/disable specific ARIA attributes
114 * - **ariaHidden** – `{boolean}` – Enables/disables aria-hidden tags
115 * - **ariaChecked** – `{boolean}` – Enables/disables aria-checked tags
116 * - **ariaDisabled** – `{boolean}` – Enables/disables aria-disabled tags
117 * - **ariaRequired** – `{boolean}` – Enables/disables aria-required tags
118 * - **ariaInvalid** – `{boolean}` – Enables/disables aria-invalid tags
119 * - **ariaValue** – `{boolean}` – Enables/disables aria-valuemin, aria-valuemax and aria-valuenow tags
120 * - **tabindex** – `{boolean}` – Enables/disables tabindex tags
121 * - **bindKeypress** – `{boolean}` – Enables/disables keypress event binding on `div` and
122 * `li` elements with ng-click
123 * - **bindRoleForClick** – `{boolean}` – Adds role=button to non-interactive elements like `div`
124 * using ng-click, making them more accessible to users of assistive technologies
127 * Enables/disables various ARIA attributes
129 this.config = function(newConfig) {
130 config = angular.extend(config, newConfig);
133 function watchExpr(attrName, ariaAttr, nodeBlackList, negate) {
134 return function(scope, elem, attr) {
135 var ariaCamelName = attr.$normalize(ariaAttr);
136 if (config[ariaCamelName] && !isNodeOneOf(elem, nodeBlackList) && !attr[ariaCamelName]) {
137 scope.$watch(attr[attrName], function(boolVal) {
138 // ensure boolean value
139 boolVal = negate ? !boolVal : !!boolVal;
140 elem.attr(ariaAttr, boolVal);
152 * The $aria service contains helper methods for applying common
153 * [ARIA](http://www.w3.org/TR/wai-aria/) attributes to HTML directives.
155 * ngAria injects common accessibility attributes that tell assistive technologies when HTML
156 * elements are enabled, selected, hidden, and more. To see how this is performed with ngAria,
157 * let's review a code snippet from ngAria itself:
160 * ngAriaModule.directive('ngDisabled', ['$aria', function($aria) {
161 * return $aria.$$watchExpr('ngDisabled', 'aria-disabled', nodeBlackList, false);
164 * Shown above, the ngAria module creates a directive with the same signature as the
165 * traditional `ng-disabled` directive. But this ngAria version is dedicated to
166 * solely managing accessibility attributes on custom elements. The internal `$aria` service is
167 * used to watch the boolean attribute `ngDisabled`. If it has not been explicitly set by the
168 * developer, `aria-disabled` is injected as an attribute with its value synchronized to the
169 * value in `ngDisabled`.
171 * Because ngAria hooks into the `ng-disabled` directive, developers do not have to do
172 * anything to enable this feature. The `aria-disabled` attribute is automatically managed
173 * simply as a silent side-effect of using `ng-disabled` with the ngAria module.
175 * The full list of directives that interface with ngAria:
187 * Read the {@link guide/accessibility ngAria Developer Guide} for a thorough explanation of each
192 * Requires the {@link ngAria} module to be installed.
194 this.$get = function() {
196 config: function(key) {
199 $$watchExpr: watchExpr
205 ngAriaModule.directive('ngShow', ['$aria', function($aria) {
206 return $aria.$$watchExpr('ngShow', 'aria-hidden', [], true);
208 .directive('ngHide', ['$aria', function($aria) {
209 return $aria.$$watchExpr('ngHide', 'aria-hidden', [], false);
211 .directive('ngValue', ['$aria', function($aria) {
212 return $aria.$$watchExpr('ngValue', 'aria-checked', nodeBlackList, false);
214 .directive('ngChecked', ['$aria', function($aria) {
215 return $aria.$$watchExpr('ngChecked', 'aria-checked', nodeBlackList, false);
217 .directive('ngRequired', ['$aria', function($aria) {
218 return $aria.$$watchExpr('ngRequired', 'aria-required', nodeBlackList, false);
220 .directive('ngModel', ['$aria', function($aria) {
222 function shouldAttachAttr(attr, normalizedAttr, elem, allowBlacklistEls) {
223 return $aria.config(normalizedAttr) && !elem.attr(attr) && (allowBlacklistEls || !isNodeOneOf(elem, nodeBlackList));
226 function shouldAttachRole(role, elem) {
227 // if element does not have role attribute
228 // AND element type is equal to role (if custom element has a type equaling shape) <-- remove?
229 // AND element is not INPUT
230 return !elem.attr('role') && (elem.attr('type') === role) && (elem[0].nodeName !== 'INPUT');
233 function getShape(attr, elem) {
234 var type = attr.type,
237 return ((type || role) === 'checkbox' || role === 'menuitemcheckbox') ? 'checkbox' :
238 ((type || role) === 'radio' || role === 'menuitemradio') ? 'radio' :
239 (type === 'range' || role === 'progressbar' || role === 'slider') ? 'range' : '';
245 priority: 200, //Make sure watches are fired after any other directives that affect the ngModel value
246 compile: function(elem, attr) {
247 var shape = getShape(attr, elem);
250 pre: function(scope, elem, attr, ngModel) {
251 if (shape === 'checkbox') {
252 //Use the input[checkbox] $isEmpty implementation for elements with checkbox roles
253 ngModel.$isEmpty = function(value) {
254 return value === false;
258 post: function(scope, elem, attr, ngModel) {
259 var needsTabIndex = shouldAttachAttr('tabindex', 'tabindex', elem, false);
261 function ngAriaWatchModelValue() {
262 return ngModel.$modelValue;
265 function getRadioReaction(newVal) {
266 var boolVal = (attr.value == ngModel.$viewValue);
267 elem.attr('aria-checked', boolVal);
270 function getCheckboxReaction() {
271 elem.attr('aria-checked', !ngModel.$isEmpty(ngModel.$viewValue));
277 if (shouldAttachRole(shape, elem)) {
278 elem.attr('role', shape);
280 if (shouldAttachAttr('aria-checked', 'ariaChecked', elem, false)) {
281 scope.$watch(ngAriaWatchModelValue, shape === 'radio' ?
282 getRadioReaction : getCheckboxReaction);
285 elem.attr('tabindex', 0);
289 if (shouldAttachRole(shape, elem)) {
290 elem.attr('role', 'slider');
292 if ($aria.config('ariaValue')) {
293 var needsAriaValuemin = !elem.attr('aria-valuemin') &&
294 (attr.hasOwnProperty('min') || attr.hasOwnProperty('ngMin'));
295 var needsAriaValuemax = !elem.attr('aria-valuemax') &&
296 (attr.hasOwnProperty('max') || attr.hasOwnProperty('ngMax'));
297 var needsAriaValuenow = !elem.attr('aria-valuenow');
299 if (needsAriaValuemin) {
300 attr.$observe('min', function ngAriaValueMinReaction(newVal) {
301 elem.attr('aria-valuemin', newVal);
304 if (needsAriaValuemax) {
305 attr.$observe('max', function ngAriaValueMinReaction(newVal) {
306 elem.attr('aria-valuemax', newVal);
309 if (needsAriaValuenow) {
310 scope.$watch(ngAriaWatchModelValue, function ngAriaValueNowReaction(newVal) {
311 elem.attr('aria-valuenow', newVal);
316 elem.attr('tabindex', 0);
321 if (!attr.hasOwnProperty('ngRequired') && ngModel.$validators.required
322 && shouldAttachAttr('aria-required', 'ariaRequired', elem, false)) {
323 // ngModel.$error.required is undefined on custom controls
324 attr.$observe('required', function() {
325 elem.attr('aria-required', !!attr['required']);
329 if (shouldAttachAttr('aria-invalid', 'ariaInvalid', elem, true)) {
330 scope.$watch(function ngAriaInvalidWatch() {
331 return ngModel.$invalid;
332 }, function ngAriaInvalidReaction(newVal) {
333 elem.attr('aria-invalid', !!newVal);
341 .directive('ngDisabled', ['$aria', function($aria) {
342 return $aria.$$watchExpr('ngDisabled', 'aria-disabled', nodeBlackList, false);
344 .directive('ngMessages', function() {
347 require: '?ngMessages',
348 link: function(scope, elem, attr, ngMessages) {
349 if (!elem.attr('aria-live')) {
350 elem.attr('aria-live', 'assertive');
355 .directive('ngClick',['$aria', '$parse', function($aria, $parse) {
358 compile: function(elem, attr) {
359 var fn = $parse(attr.ngClick, /* interceptorFn */ null, /* expensiveChecks */ true);
360 return function(scope, elem, attr) {
362 if (!isNodeOneOf(elem, nodeBlackList)) {
364 if ($aria.config('bindRoleForClick') && !elem.attr('role')) {
365 elem.attr('role', 'button');
368 if ($aria.config('tabindex') && !elem.attr('tabindex')) {
369 elem.attr('tabindex', 0);
372 if ($aria.config('bindKeypress') && !attr.ngKeypress) {
373 elem.on('keypress', function(event) {
374 var keyCode = event.which || event.keyCode;
375 if (keyCode === 32 || keyCode === 13) {
376 scope.$apply(callback);
379 function callback() {
380 fn(scope, { $event: event });
389 .directive('ngDblclick', ['$aria', function($aria) {
390 return function(scope, elem, attr) {
391 if ($aria.config('tabindex') && !elem.attr('tabindex') && !isNodeOneOf(elem, nodeBlackList)) {
392 elem.attr('tabindex', 0);
398 })(window, window.angular);