angular-aria.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406
  1. /**
  2. * @license AngularJS v1.5.8
  3. * (c) 2010-2016 Google, Inc. http://angularjs.org
  4. * License: MIT
  5. */
  6. (function(window, angular) {'use strict';
  7. /**
  8. * @ngdoc module
  9. * @name ngAria
  10. * @description
  11. *
  12. * The `ngAria` module provides support for common
  13. * [<abbr title="Accessible Rich Internet Applications">ARIA</abbr>](http://www.w3.org/TR/wai-aria/)
  14. * attributes that convey state or semantic information about the application for users
  15. * of assistive technologies, such as screen readers.
  16. *
  17. * <div doc-module-components="ngAria"></div>
  18. *
  19. * ## Usage
  20. *
  21. * For ngAria to do its magic, simply include the module `ngAria` as a dependency. The following
  22. * directives are supported:
  23. * `ngModel`, `ngChecked`, `ngReadonly`, `ngRequired`, `ngValue`, `ngDisabled`, `ngShow`, `ngHide`, `ngClick`,
  24. * `ngDblClick`, and `ngMessages`.
  25. *
  26. * Below is a more detailed breakdown of the attributes handled by ngAria:
  27. *
  28. * | Directive | Supported Attributes |
  29. * |---------------------------------------------|----------------------------------------------------------------------------------------|
  30. * | {@link ng.directive:ngModel ngModel} | aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-invalid, aria-required, input roles |
  31. * | {@link ng.directive:ngDisabled ngDisabled} | aria-disabled |
  32. * | {@link ng.directive:ngRequired ngRequired} | aria-required
  33. * | {@link ng.directive:ngChecked ngChecked} | aria-checked
  34. * | {@link ng.directive:ngReadonly ngReadonly} | aria-readonly |
  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 |
  41. *
  42. * Find out more information about each directive by reading the
  43. * {@link guide/accessibility ngAria Developer Guide}.
  44. *
  45. * ## Example
  46. * Using ngDisabled with ngAria:
  47. * ```html
  48. * <md-checkbox ng-disabled="disabled">
  49. * ```
  50. * Becomes:
  51. * ```html
  52. * <md-checkbox ng-disabled="disabled" aria-disabled="true">
  53. * ```
  54. *
  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}.
  59. */
  60. /* global -ngAriaModule */
  61. var ngAriaModule = angular.module('ngAria', ['ng']).
  62. provider('$aria', $AriaProvider);
  63. /**
  64. * Internal Utilities
  65. */
  66. var nodeBlackList = ['BUTTON', 'A', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS', 'SUMMARY'];
  67. var isNodeOneOf = function(elem, nodeTypeArray) {
  68. if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
  69. return true;
  70. }
  71. };
  72. /**
  73. * @ngdoc provider
  74. * @name $ariaProvider
  75. *
  76. * @description
  77. *
  78. * Used for configuring the ARIA attributes injected and managed by ngAria.
  79. *
  80. * ```js
  81. * angular.module('myApp', ['ngAria'], function config($ariaProvider) {
  82. * $ariaProvider.config({
  83. * ariaValue: true,
  84. * tabindex: false
  85. * });
  86. * });
  87. *```
  88. *
  89. * ## Dependencies
  90. * Requires the {@link ngAria} module to be installed.
  91. *
  92. */
  93. function $AriaProvider() {
  94. var config = {
  95. ariaHidden: true,
  96. ariaChecked: true,
  97. ariaReadonly: true,
  98. ariaDisabled: true,
  99. ariaRequired: true,
  100. ariaInvalid: true,
  101. ariaValue: true,
  102. tabindex: true,
  103. bindKeypress: true,
  104. bindRoleForClick: true
  105. };
  106. /**
  107. * @ngdoc method
  108. * @name $ariaProvider#config
  109. *
  110. * @param {object} config object to enable/disable specific ARIA attributes
  111. *
  112. * - **ariaHidden** – `{boolean}` – Enables/disables aria-hidden tags
  113. * - **ariaChecked** – `{boolean}` – Enables/disables aria-checked tags
  114. * - **ariaReadonly** – `{boolean}` – Enables/disables aria-readonly tags
  115. * - **ariaDisabled** – `{boolean}` – Enables/disables aria-disabled tags
  116. * - **ariaRequired** – `{boolean}` – Enables/disables aria-required tags
  117. * - **ariaInvalid** – `{boolean}` – Enables/disables aria-invalid tags
  118. * - **ariaValue** – `{boolean}` – Enables/disables aria-valuemin, aria-valuemax and aria-valuenow tags
  119. * - **tabindex** – `{boolean}` – Enables/disables tabindex tags
  120. * - **bindKeypress** – `{boolean}` – Enables/disables keypress event binding on `div` and
  121. * `li` elements with ng-click
  122. * - **bindRoleForClick** – `{boolean}` – Adds role=button to non-interactive elements like `div`
  123. * using ng-click, making them more accessible to users of assistive technologies
  124. *
  125. * @description
  126. * Enables/disables various ARIA attributes
  127. */
  128. this.config = function(newConfig) {
  129. config = angular.extend(config, newConfig);
  130. };
  131. function watchExpr(attrName, ariaAttr, nodeBlackList, negate) {
  132. return function(scope, elem, attr) {
  133. var ariaCamelName = attr.$normalize(ariaAttr);
  134. if (config[ariaCamelName] && !isNodeOneOf(elem, nodeBlackList) && !attr[ariaCamelName]) {
  135. scope.$watch(attr[attrName], function(boolVal) {
  136. // ensure boolean value
  137. boolVal = negate ? !boolVal : !!boolVal;
  138. elem.attr(ariaAttr, boolVal);
  139. });
  140. }
  141. };
  142. }
  143. /**
  144. * @ngdoc service
  145. * @name $aria
  146. *
  147. * @description
  148. * @priority 200
  149. *
  150. * The $aria service contains helper methods for applying common
  151. * [ARIA](http://www.w3.org/TR/wai-aria/) attributes to HTML directives.
  152. *
  153. * ngAria injects common accessibility attributes that tell assistive technologies when HTML
  154. * elements are enabled, selected, hidden, and more. To see how this is performed with ngAria,
  155. * let's review a code snippet from ngAria itself:
  156. *
  157. *```js
  158. * ngAriaModule.directive('ngDisabled', ['$aria', function($aria) {
  159. * return $aria.$$watchExpr('ngDisabled', 'aria-disabled', nodeBlackList, false);
  160. * }])
  161. *```
  162. * Shown above, the ngAria module creates a directive with the same signature as the
  163. * traditional `ng-disabled` directive. But this ngAria version is dedicated to
  164. * solely managing accessibility attributes on custom elements. The internal `$aria` service is
  165. * used to watch the boolean attribute `ngDisabled`. If it has not been explicitly set by the
  166. * developer, `aria-disabled` is injected as an attribute with its value synchronized to the
  167. * value in `ngDisabled`.
  168. *
  169. * Because ngAria hooks into the `ng-disabled` directive, developers do not have to do
  170. * anything to enable this feature. The `aria-disabled` attribute is automatically managed
  171. * simply as a silent side-effect of using `ng-disabled` with the ngAria module.
  172. *
  173. * The full list of directives that interface with ngAria:
  174. * * **ngModel**
  175. * * **ngChecked**
  176. * * **ngReadonly**
  177. * * **ngRequired**
  178. * * **ngDisabled**
  179. * * **ngValue**
  180. * * **ngShow**
  181. * * **ngHide**
  182. * * **ngClick**
  183. * * **ngDblclick**
  184. * * **ngMessages**
  185. *
  186. * Read the {@link guide/accessibility ngAria Developer Guide} for a thorough explanation of each
  187. * directive.
  188. *
  189. *
  190. * ## Dependencies
  191. * Requires the {@link ngAria} module to be installed.
  192. */
  193. this.$get = function() {
  194. return {
  195. config: function(key) {
  196. return config[key];
  197. },
  198. $$watchExpr: watchExpr
  199. };
  200. };
  201. }
  202. ngAriaModule.directive('ngShow', ['$aria', function($aria) {
  203. return $aria.$$watchExpr('ngShow', 'aria-hidden', [], true);
  204. }])
  205. .directive('ngHide', ['$aria', function($aria) {
  206. return $aria.$$watchExpr('ngHide', 'aria-hidden', [], false);
  207. }])
  208. .directive('ngValue', ['$aria', function($aria) {
  209. return $aria.$$watchExpr('ngValue', 'aria-checked', nodeBlackList, false);
  210. }])
  211. .directive('ngChecked', ['$aria', function($aria) {
  212. return $aria.$$watchExpr('ngChecked', 'aria-checked', nodeBlackList, false);
  213. }])
  214. .directive('ngReadonly', ['$aria', function($aria) {
  215. return $aria.$$watchExpr('ngReadonly', 'aria-readonly', nodeBlackList, false);
  216. }])
  217. .directive('ngRequired', ['$aria', function($aria) {
  218. return $aria.$$watchExpr('ngRequired', 'aria-required', nodeBlackList, false);
  219. }])
  220. .directive('ngModel', ['$aria', function($aria) {
  221. function shouldAttachAttr(attr, normalizedAttr, elem, allowBlacklistEls) {
  222. return $aria.config(normalizedAttr) && !elem.attr(attr) && (allowBlacklistEls || !isNodeOneOf(elem, nodeBlackList));
  223. }
  224. function shouldAttachRole(role, elem) {
  225. // if element does not have role attribute
  226. // AND element type is equal to role (if custom element has a type equaling shape) <-- remove?
  227. // AND element is not INPUT
  228. return !elem.attr('role') && (elem.attr('type') === role) && (elem[0].nodeName !== 'INPUT');
  229. }
  230. function getShape(attr, elem) {
  231. var type = attr.type,
  232. role = attr.role;
  233. return ((type || role) === 'checkbox' || role === 'menuitemcheckbox') ? 'checkbox' :
  234. ((type || role) === 'radio' || role === 'menuitemradio') ? 'radio' :
  235. (type === 'range' || role === 'progressbar' || role === 'slider') ? 'range' : '';
  236. }
  237. return {
  238. restrict: 'A',
  239. require: 'ngModel',
  240. priority: 200, //Make sure watches are fired after any other directives that affect the ngModel value
  241. compile: function(elem, attr) {
  242. var shape = getShape(attr, elem);
  243. return {
  244. pre: function(scope, elem, attr, ngModel) {
  245. if (shape === 'checkbox') {
  246. //Use the input[checkbox] $isEmpty implementation for elements with checkbox roles
  247. ngModel.$isEmpty = function(value) {
  248. return value === false;
  249. };
  250. }
  251. },
  252. post: function(scope, elem, attr, ngModel) {
  253. var needsTabIndex = shouldAttachAttr('tabindex', 'tabindex', elem, false);
  254. function ngAriaWatchModelValue() {
  255. return ngModel.$modelValue;
  256. }
  257. function getRadioReaction(newVal) {
  258. var boolVal = (attr.value == ngModel.$viewValue);
  259. elem.attr('aria-checked', boolVal);
  260. }
  261. function getCheckboxReaction() {
  262. elem.attr('aria-checked', !ngModel.$isEmpty(ngModel.$viewValue));
  263. }
  264. switch (shape) {
  265. case 'radio':
  266. case 'checkbox':
  267. if (shouldAttachRole(shape, elem)) {
  268. elem.attr('role', shape);
  269. }
  270. if (shouldAttachAttr('aria-checked', 'ariaChecked', elem, false)) {
  271. scope.$watch(ngAriaWatchModelValue, shape === 'radio' ?
  272. getRadioReaction : getCheckboxReaction);
  273. }
  274. if (needsTabIndex) {
  275. elem.attr('tabindex', 0);
  276. }
  277. break;
  278. case 'range':
  279. if (shouldAttachRole(shape, elem)) {
  280. elem.attr('role', 'slider');
  281. }
  282. if ($aria.config('ariaValue')) {
  283. var needsAriaValuemin = !elem.attr('aria-valuemin') &&
  284. (attr.hasOwnProperty('min') || attr.hasOwnProperty('ngMin'));
  285. var needsAriaValuemax = !elem.attr('aria-valuemax') &&
  286. (attr.hasOwnProperty('max') || attr.hasOwnProperty('ngMax'));
  287. var needsAriaValuenow = !elem.attr('aria-valuenow');
  288. if (needsAriaValuemin) {
  289. attr.$observe('min', function ngAriaValueMinReaction(newVal) {
  290. elem.attr('aria-valuemin', newVal);
  291. });
  292. }
  293. if (needsAriaValuemax) {
  294. attr.$observe('max', function ngAriaValueMinReaction(newVal) {
  295. elem.attr('aria-valuemax', newVal);
  296. });
  297. }
  298. if (needsAriaValuenow) {
  299. scope.$watch(ngAriaWatchModelValue, function ngAriaValueNowReaction(newVal) {
  300. elem.attr('aria-valuenow', newVal);
  301. });
  302. }
  303. }
  304. if (needsTabIndex) {
  305. elem.attr('tabindex', 0);
  306. }
  307. break;
  308. }
  309. if (!attr.hasOwnProperty('ngRequired') && ngModel.$validators.required
  310. && shouldAttachAttr('aria-required', 'ariaRequired', elem, false)) {
  311. // ngModel.$error.required is undefined on custom controls
  312. attr.$observe('required', function() {
  313. elem.attr('aria-required', !!attr['required']);
  314. });
  315. }
  316. if (shouldAttachAttr('aria-invalid', 'ariaInvalid', elem, true)) {
  317. scope.$watch(function ngAriaInvalidWatch() {
  318. return ngModel.$invalid;
  319. }, function ngAriaInvalidReaction(newVal) {
  320. elem.attr('aria-invalid', !!newVal);
  321. });
  322. }
  323. }
  324. };
  325. }
  326. };
  327. }])
  328. .directive('ngDisabled', ['$aria', function($aria) {
  329. return $aria.$$watchExpr('ngDisabled', 'aria-disabled', nodeBlackList, false);
  330. }])
  331. .directive('ngMessages', function() {
  332. return {
  333. restrict: 'A',
  334. require: '?ngMessages',
  335. link: function(scope, elem, attr, ngMessages) {
  336. if (!elem.attr('aria-live')) {
  337. elem.attr('aria-live', 'assertive');
  338. }
  339. }
  340. };
  341. })
  342. .directive('ngClick',['$aria', '$parse', function($aria, $parse) {
  343. return {
  344. restrict: 'A',
  345. compile: function(elem, attr) {
  346. var fn = $parse(attr.ngClick, /* interceptorFn */ null, /* expensiveChecks */ true);
  347. return function(scope, elem, attr) {
  348. if (!isNodeOneOf(elem, nodeBlackList)) {
  349. if ($aria.config('bindRoleForClick') && !elem.attr('role')) {
  350. elem.attr('role', 'button');
  351. }
  352. if ($aria.config('tabindex') && !elem.attr('tabindex')) {
  353. elem.attr('tabindex', 0);
  354. }
  355. if ($aria.config('bindKeypress') && !attr.ngKeypress) {
  356. elem.on('keypress', function(event) {
  357. var keyCode = event.which || event.keyCode;
  358. if (keyCode === 32 || keyCode === 13) {
  359. scope.$apply(callback);
  360. }
  361. function callback() {
  362. fn(scope, { $event: event });
  363. }
  364. });
  365. }
  366. }
  367. };
  368. }
  369. };
  370. }])
  371. .directive('ngDblclick', ['$aria', function($aria) {
  372. return function(scope, elem, attr) {
  373. if ($aria.config('tabindex') && !elem.attr('tabindex') && !isNodeOneOf(elem, nodeBlackList)) {
  374. elem.attr('tabindex', 0);
  375. }
  376. };
  377. }]);
  378. })(window, window.angular);