v1.3.0-rc.4

1.3.0-rc.4/angular-aria.js

@@ -0,0 +1,250 @@
+/**
+ * @license AngularJS v1.3.0-rc.4
+ * (c) 2010-2014 Google, Inc. http://angularjs.org
+ * License: MIT
+ */
+(function(window, angular, undefined) {'use strict';
+
+/**
+ * @ngdoc module
+ * @name ngAria
+ * @description
+ *
+ * The `ngAria` module provides support for adding aria tags that convey state or semantic information
+ * about the application in order to allow assistive technologies to convey appropriate information to
+ * persons with disabilities.
+ *
+ * <div doc-module-components="ngAria"></div>
+ *
+ * # Usage
+ * To enable the addition of the aria tags, just require the module into your application and the tags will
+ * hook into your ng-show/ng-hide, input, textarea, button, select and ng-required directives and adds the
+ * appropriate aria-tags.
+ *
+ * Currently, the following aria tags are implemented:
+ *
+ * + aria-hidden
+ * + aria-checked
+ * + aria-disabled
+ * + aria-required
+ * + aria-invalid
+ * + aria-multiline
+ * + aria-valuenow
+ * + aria-valuemin
+ * + aria-valuemax
+ * + tabindex
+ *
+ * You can disable individual aria tags by using the {@link ngAria.$ariaProvider#config config} method.
+ */
+
+ /* global -ngAriaModule */
+var ngAriaModule = angular.module('ngAria', ['ng']).
+                        provider('$aria', $AriaProvider);
+
+/**
+ * @ngdoc provider
+ * @name $ariaProvider
+ *
+ * @description
+ *
+ * Used for configuring aria attributes.
+ *
+ * ## Dependencies
+ * Requires the {@link ngAria} module to be installed.
+ */
+function $AriaProvider() {
+  var config = {
+    ariaHidden : true,
+    ariaChecked: true,
+    ariaDisabled: true,
+    ariaRequired: true,
+    ariaInvalid: true,
+    ariaMultiline: true,
+    ariaValue: true,
+    tabindex: true
+  };
+
+  /**
+   * @ngdoc method
+   * @name $ariaProvider#config
+   *
+   * @param {object} config object to enable/disable specific aria tags
+   *
+   *  - **ariaHidden** – `{boolean}` – Enables/disables aria-hidden tags
+   *  - **ariaChecked** – `{boolean}` – Enables/disables aria-checked tags
+   *  - **ariaDisabled** – `{boolean}` – Enables/disables aria-disabled tags
+   *  - **ariaRequired** – `{boolean}` – Enables/disables aria-required tags
+   *  - **ariaInvalid** – `{boolean}` – Enables/disables aria-invalid tags
+   *  - **ariaMultiline** – `{boolean}` – Enables/disables aria-multiline tags
+   *  - **ariaValue** – `{boolean}` – Enables/disables aria-valuemin, aria-valuemax and aria-valuenow tags
+   *  - **tabindex** – `{boolean}` – Enables/disables tabindex tags
+   *
+   * @description
+   * Enables/disables various aria tags
+   */
+  this.config = function(newConfig) {
+    config = angular.extend(config, newConfig);
+  };
+
+  function camelCase(input) {
+    return input.replace(/-./g, function(letter, pos) {
+      return letter[1].toUpperCase();
+    });
+  }
+
+
+  function watchExpr(attrName, ariaAttr, negate) {
+    var ariaCamelName = camelCase(ariaAttr);
+    return function(scope, elem, attr) {
+      if (config[ariaCamelName] && !attr[ariaCamelName]) {
+        scope.$watch(attr[attrName], function(boolVal) {
+          if (negate) {
+            boolVal = !boolVal;
+          }
+          elem.attr(ariaAttr, boolVal);
+        });
+      }
+    };
+  }
+
+  /**
+   * @ngdoc service
+   * @name $aria
+   *
+   * @description
+   *
+   * Contains helper methods for applying aria tags to HTML
+   *
+   * ## Dependencies
+   * Requires the {@link ngAria} module to be installed.
+   */
+  this.$get = function() {
+    return {
+      config: function (key) {
+        return config[camelCase(key)];
+      },
+      $$watchExpr: watchExpr
+    };
+  };
+}
+
+var ngAriaTabindex = ['$aria', function($aria) {
+  return function(scope, elem, attr) {
+    if ($aria.config('tabindex') && !elem.attr('tabindex')) {
+      elem.attr('tabindex', 0);
+    }
+  };
+}];
+
+ngAriaModule.directive('ngShow', ['$aria', function($aria) {
+  return $aria.$$watchExpr('ngShow', 'aria-hidden', true);
+}])
+.directive('ngHide', ['$aria', function($aria) {
+  return $aria.$$watchExpr('ngHide', 'aria-hidden', false);
+}])
+.directive('ngModel', ['$aria', function($aria) {
+
+  function shouldAttachAttr (attr, elem) {
+    return $aria.config(attr) && !elem.attr(attr);
+  }
+
+  function getShape (attr, elem) {
+    var type = attr.type,
+        role = attr.role;
+
+    return ((type || role) === 'checkbox' || role === 'menuitemcheckbox') ? 'checkbox' :
+           ((type || role) === 'radio'    || role === 'menuitemradio') ? 'radio' :
+           (type === 'range'              || role === 'progressbar' || role === 'slider') ? 'range' :
+           (type || role) === 'textbox'   || elem[0].nodeName === 'TEXTAREA' ? 'multiline' : '';
+  }
+
+  return {
+    restrict: 'A',
+    require: '?ngModel',
+    link: function(scope, elem, attr, ngModel) {
+      var shape = getShape(attr, elem);
+      var needsTabIndex = shouldAttachAttr('tabindex', elem);
+
+      function ngAriaWatchModelValue() {
+        return ngModel.$modelValue;
+      }
+
+      function getRadioReaction() {
+        if (needsTabIndex) {
+          needsTabIndex = false;
+          return function ngAriaRadioReaction(newVal) {
+            var boolVal = newVal === attr.value;
+            elem.attr('aria-checked', boolVal);
+            elem.attr('tabindex', 0 - !boolVal);
+          };
+        } else {
+          return function ngAriaRadioReaction(newVal) {
+            elem.attr('aria-checked', newVal === attr.value);
+          };
+        }
+      }
+
+      function ngAriaCheckboxReaction(newVal) {
+        elem.attr('aria-checked', !!newVal);
+      }
+
+      switch (shape) {
+        case 'radio':
+        case 'checkbox':
+          if (shouldAttachAttr('aria-checked', elem)) {
+            scope.$watch(ngAriaWatchModelValue, shape === 'radio' ?
+                getRadioReaction() : ngAriaCheckboxReaction);
+          }
+          break;
+        case 'range':
+          if ($aria.config('ariaValue')) {
+            if (attr.min && !elem.attr('aria-valuemin')) {
+              elem.attr('aria-valuemin', attr.min);
+            }
+            if (attr.max && !elem.attr('aria-valuemax')) {
+              elem.attr('aria-valuemax', attr.max);
+            }
+            if (!elem.attr('aria-valuenow')) {
+              scope.$watch(ngAriaWatchModelValue, function ngAriaValueNowReaction(newVal) {
+                elem.attr('aria-valuenow', newVal);
+              });
+            }
+          }
+          break;
+        case 'multiline':
+          if (shouldAttachAttr('aria-multiline', elem)) {
+            elem.attr('aria-multiline', true);
+          }
+          break;
+      }
+
+      if (needsTabIndex) {
+        elem.attr('tabindex', 0);
+      }
+
+      if (ngModel.$validators.required && shouldAttachAttr('aria-required', elem)) {
+        scope.$watch(function ngAriaRequiredWatch() {
+          return ngModel.$error.required;
+        }, function ngAriaRequiredReaction(newVal) {
+          elem.attr('aria-required', !!newVal);
+        });
+      }
+
+      if (shouldAttachAttr('aria-invalid', elem)) {
+        scope.$watch(function ngAriaInvalidWatch() {
+          return ngModel.$invalid;
+        }, function ngAriaInvalidReaction(newVal) {
+          elem.attr('aria-invalid', !!newVal);
+        });
+      }
+    }
+  };
+}])
+.directive('ngDisabled', ['$aria', function($aria) {
+  return $aria.$$watchExpr('ngDisabled', 'aria-disabled');
+}])
+.directive('ngClick', ngAriaTabindex)
+.directive('ngDblclick', ngAriaTabindex);
+
+
+})(window, window.angular);