@angular-wave/angular.ts 0.0.1

package/src/exts/aria.js

@@ -0,0 +1,544 @@
+import { extend } from "../core/utils";
+
+/**
+ * @ngdoc module
+ * @name ngAria
+ * @description
+ *
+ * The `ngAria` module provides support for common
+ * [<abbr title="Accessible Rich Internet Applications">ARIA</abbr>](http://www.w3.org/TR/wai-aria/)
+ * attributes that convey state or semantic information about the application for users
+ * of assistive technologies, such as screen readers.
+ *
+ * ## Usage
+ *
+ * For ngAria to do its magic, simply include the module `ngAria` as a dependency. The following
+ * directives are supported:
+ * `ngModel`, `ngChecked`, `ngReadonly`, `ngRequired`, `ngValue`, `ngDisabled`, `ngShow`, `ngHide`,
+ * `ngClick`, `ngDblClick`, and `ngMessages`.
+ *
+ * Below is a more detailed breakdown of the attributes handled by ngAria:
+ *
+ * | Directive                                   | Supported Attributes                                                                                |
+ * |---------------------------------------------|-----------------------------------------------------------------------------------------------------|
+ * | {@link ng.directive:ngModel ngModel}        | aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-invalid, aria-required, input roles |
+ * | {@link ng.directive:ngDisabled ngDisabled}  | aria-disabled                                                                                       |
+ * | {@link ng.directive:ngRequired ngRequired}  | aria-required                                                                                       |
+ * | {@link ng.directive:ngChecked ngChecked}    | aria-checked                                                                                        |
+ * | {@link ng.directive:ngReadonly ngReadonly}  | aria-readonly                                                                                       |
+ * | {@link ng.directive:ngValue ngValue}        | aria-checked                                                                                        |
+ * | {@link ng.directive:ngShow ngShow}          | aria-hidden                                                                                         |
+ * | {@link ng.directive:ngHide ngHide}          | aria-hidden                                                                                         |
+ * | {@link ng.directive:ngDblclick ngDblclick}  | tabindex                                                                                            |
+ * | {@link module:ngMessages ngMessages}        | aria-live                                                                                           |
+ * | {@link ng.directive:ngClick ngClick}        | tabindex, keydown event, button role                                                                |
+ *
+ * Find out more information about each directive by reading the
+ * {@link guide/accessibility ngAria Developer Guide}.
+ *
+ * ## Example
+ * Using ngDisabled with ngAria:
+ * ```html
+ * <md-checkbox ng-disabled="disabled">
+ * ```
+ * Becomes:
+ * ```html
+ * <md-checkbox ng-disabled="disabled" aria-disabled="true">
+ * ```
+ *
+ * ## Disabling Specific Attributes
+ * It is possible to disable individual attributes added by ngAria with the
+ * {@link ngAria.$ariaProvider#config config} method. For more details, see the
+ * {@link guide/accessibility Developer Guide}.
+ *
+ * ## Disabling `ngAria` on Specific Elements
+ * It is possible to make `ngAria` ignore a specific element, by adding the `ng-aria-disable`
+ * attribute on it. Note that only the element itself (and not its child elements) will be ignored.
+ */
+const ARIA_DISABLE_ATTR = "ngAriaDisable";
+
+export function initAriaModule() {
+  window.angular
+    .module("ngAria", ["ng"])
+    .provider("$aria", $AriaProvider)
+    .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("ngValue", [
+      "$aria",
+      function ($aria) {
+        return $aria.$$watchExpr(
+          "ngValue",
+          "aria-checked",
+          nativeAriaNodeNames,
+          false,
+        );
+      },
+    ])
+    .directive("ngChecked", [
+      "$aria",
+      function ($aria) {
+        return $aria.$$watchExpr(
+          "ngChecked",
+          "aria-checked",
+          nativeAriaNodeNames,
+          false,
+        );
+      },
+    ])
+    .directive("ngReadonly", [
+      "$aria",
+      function ($aria) {
+        return $aria.$$watchExpr(
+          "ngReadonly",
+          "aria-readonly",
+          nativeAriaNodeNames,
+          false,
+        );
+      },
+    ])
+    .directive("ngRequired", [
+      "$aria",
+      function ($aria) {
+        return $aria.$$watchExpr(
+          "ngRequired",
+          "aria-required",
+          nativeAriaNodeNames,
+          false,
+        );
+      },
+    ])
+    .directive("ngModel", [
+      "$aria",
+      function ($aria) {
+        function shouldAttachAttr(
+          attr,
+          normalizedAttr,
+          elem,
+          allowNonAriaNodes,
+        ) {
+          return (
+            $aria.config(normalizedAttr) &&
+            !elem.attr(attr) &&
+            (allowNonAriaNodes || !isNodeOneOf(elem, nativeAriaNodeNames)) &&
+            (elem.attr("type") !== "hidden" || elem[0].nodeName !== "INPUT")
+          );
+        }
+
+        function shouldAttachRole(role, elem) {
+          // if element does not have role attribute
+          // AND element type is equal to role (if custom element has a type equaling shape) <-- remove?
+          // AND element is not in nativeAriaNodeNames
+          return (
+            !elem.attr("role") &&
+            elem.attr("type") === role &&
+            !isNodeOneOf(elem, nativeAriaNodeNames)
+          );
+        }
+
+        function getShape(attr) {
+          const { type } = attr;
+          const { role } = attr;
+
+          return (type || role) === "checkbox" || role === "menuitemcheckbox"
+            ? "checkbox"
+            : (type || role) === "radio" || role === "menuitemradio"
+              ? "radio"
+              : type === "range" || role === "progressbar" || role === "slider"
+                ? "range"
+                : "";
+        }
+
+        return {
+          restrict: "A",
+          require: "ngModel",
+          priority: 200, // Make sure watches are fired after any other directives that affect the ngModel value
+          compile(elem, attr) {
+            if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR))
+              return;
+
+            const shape = getShape(attr);
+
+            return {
+              post(scope, elem, attr, ngModel) {
+                const needsTabIndex = shouldAttachAttr(
+                  "tabindex",
+                  "tabindex",
+                  elem,
+                  false,
+                );
+
+                function ngAriaWatchModelValue() {
+                  return ngModel.$modelValue;
+                }
+
+                function getRadioReaction() {
+                  // Strict comparison would cause a BC
+                  // eslint-disable-next-line eqeqeq
+                  elem[0].setAttribute(
+                    "aria-checked",
+                    (attr.value == ngModel.$viewValue).toString(),
+                  );
+                }
+
+                function getCheckboxReaction() {
+                  elem.attr(
+                    "aria-checked",
+                    (!ngModel.$isEmpty(ngModel.$viewValue)).toString(),
+                  );
+                }
+
+                switch (shape) {
+                  case "radio":
+                  case "checkbox":
+                    if (shouldAttachRole(shape, elem)) {
+                      elem.attr("role", shape);
+                    }
+                    if (
+                      shouldAttachAttr(
+                        "aria-checked",
+                        "ariaChecked",
+                        elem,
+                        false,
+                      )
+                    ) {
+                      scope.$watch(
+                        ngAriaWatchModelValue,
+                        shape === "radio"
+                          ? getRadioReaction
+                          : getCheckboxReaction,
+                      );
+                    }
+                    if (needsTabIndex) {
+                      elem.attr("tabindex", 0);
+                    }
+                    break;
+                  case "range":
+                    if (shouldAttachRole(shape, elem)) {
+                      elem.attr("role", "slider");
+                    }
+                    if ($aria.config("ariaValue")) {
+                      const needsAriaValuemin =
+                        !elem.attr("aria-valuemin") &&
+                        (Object.prototype.hasOwnProperty.call(attr, "min") ||
+                          Object.prototype.hasOwnProperty.call(attr, "ngMin"));
+                      const needsAriaValuemax =
+                        !elem.attr("aria-valuemax") &&
+                        (Object.prototype.hasOwnProperty.call(attr, "max") ||
+                          Object.prototype.hasOwnProperty.call(attr, "ngMax"));
+                      const needsAriaValuenow = !elem.attr("aria-valuenow");
+
+                      if (needsAriaValuemin) {
+                        attr.$observe("min", (newVal) => {
+                          elem.attr("aria-valuemin", newVal);
+                        });
+                      }
+                      if (needsAriaValuemax) {
+                        attr.$observe("max", (newVal) => {
+                          elem.attr("aria-valuemax", newVal);
+                        });
+                      }
+                      if (needsAriaValuenow) {
+                        scope.$watch(ngAriaWatchModelValue, (newVal) => {
+                          elem.attr("aria-valuenow", newVal);
+                        });
+                      }
+                    }
+                    if (needsTabIndex) {
+                      elem.attr("tabindex", 0);
+                    }
+                    break;
+                }
+
+                if (
+                  !Object.prototype.hasOwnProperty.call(attr, "ngRequired") &&
+                  ngModel.$validators.required &&
+                  shouldAttachAttr("aria-required", "ariaRequired", elem, false)
+                ) {
+                  // ngModel.$error.required is undefined on custom controls
+                  attr.$observe("required", () => {
+                    elem.attr("aria-required", (!!attr.required).toString());
+                  });
+                }
+
+                if (
+                  shouldAttachAttr("aria-invalid", "ariaInvalid", elem, true)
+                ) {
+                  scope.$watch(
+                    () => ngModel.$invalid,
+                    (newVal) => {
+                      elem.attr("aria-invalid", (!!newVal).toString());
+                    },
+                  );
+                }
+              },
+            };
+          },
+        };
+      },
+    ])
+    .directive("ngDisabled", [
+      "$aria",
+      function ($aria) {
+        return $aria.$$watchExpr(
+          "ngDisabled",
+          "aria-disabled",
+          nativeAriaNodeNames,
+          false,
+        );
+      },
+    ])
+    .directive("ngMessages", () => ({
+      restrict: "A",
+      require: "?ngMessages",
+      link(_scope, elem, attr) {
+        if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR))
+          return;
+
+        if (!elem.attr("aria-live")) {
+          elem.attr("aria-live", "assertive");
+        }
+      },
+    }))
+    .directive("ngClick", [
+      "$aria",
+      "$parse",
+      function ($aria, $parse) {
+        return {
+          restrict: "A",
+          compile(elem, attr) {
+            if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR))
+              return;
+
+            const fn = $parse(attr.ngClick);
+            return function (scope, elem, attr) {
+              if (!isNodeOneOf(elem, nativeAriaNodeNames)) {
+                if ($aria.config("bindRoleForClick") && !elem.attr("role")) {
+                  elem.attr("role", "button");
+                }
+
+                if ($aria.config("tabindex") && !elem.attr("tabindex")) {
+                  elem.attr("tabindex", 0);
+                }
+
+                if (
+                  $aria.config("bindKeydown") &&
+                  !attr.ngKeydown &&
+                  !attr.ngKeypress &&
+                  !attr.ngKeyup
+                ) {
+                  elem.on("keydown", (event) => {
+                    const keyCode = event.which || event.keyCode;
+
+                    if (keyCode === 13 || keyCode === 32) {
+                      // If the event is triggered on a non-interactive element ...
+                      if (
+                        nativeAriaNodeNames.indexOf(event.target.nodeName) ===
+                          -1 &&
+                        !event.target.isContentEditable
+                      ) {
+                        // ... prevent the default browser behavior (e.g. scrolling when pressing spacebar)
+                        // See https://github.com/angular/angular.js/issues/16664
+                        event.preventDefault();
+                      }
+                      scope.$apply(callback);
+                    }
+
+                    function callback() {
+                      fn(scope, { $event: event });
+                    }
+                  });
+                }
+              }
+            };
+          },
+        };
+      },
+    ])
+    .directive("ngDblclick", [
+      "$aria",
+      function ($aria) {
+        return function (scope, elem, attr) {
+          if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR))
+            return;
+
+          if (
+            $aria.config("tabindex") &&
+            !elem.attr("tabindex") &&
+            !isNodeOneOf(elem, nativeAriaNodeNames)
+          ) {
+            elem.attr("tabindex", 0);
+          }
+        };
+      },
+    ]);
+}
+
+/**
+ * Internal Utilities
+ */
+const nativeAriaNodeNames = [
+  "BUTTON",
+  "A",
+  "INPUT",
+  "TEXTAREA",
+  "SELECT",
+  "DETAILS",
+  "SUMMARY",
+];
+
+const isNodeOneOf = function (elem, nodeTypeArray) {
+  if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
+    return true;
+  }
+};
+/**
+ * @ngdoc provider
+ * @name $ariaProvider
+ *
+ *
+ * @description
+ *
+ * Used for configuring the ARIA attributes injected and managed by ngAria.
+ *
+ * ```js
+ * angular.module('myApp', ['ngAria'], function config($ariaProvider) {
+ *   $ariaProvider.config({
+ *     ariaValue: true,
+ *     tabindex: false
+ *   });
+ * });
+ *```
+ *
+ * ## Dependencies
+ * Requires the {@link ngAria} module to be installed.
+ *
+ */
+function $AriaProvider() {
+  let config = {
+    ariaHidden: true,
+    ariaChecked: true,
+    ariaReadonly: true,
+    ariaDisabled: true,
+    ariaRequired: true,
+    ariaInvalid: true,
+    ariaValue: true,
+    tabindex: true,
+    bindKeydown: true,
+    bindRoleForClick: true,
+  };
+
+  /**
+   * @ngdoc method
+   * @name $ariaProvider#config
+   *
+   * @param {object} newConfig object to enable/disable specific ARIA attributes
+   *
+   *  - **ariaHidden** – `{boolean}` – Enables/disables aria-hidden tags
+   *  - **ariaChecked** – `{boolean}` – Enables/disables aria-checked tags
+   *  - **ariaReadonly** – `{boolean}` – Enables/disables aria-readonly tags
+   *  - **ariaDisabled** – `{boolean}` – Enables/disables aria-disabled tags
+   *  - **ariaRequired** – `{boolean}` – Enables/disables aria-required tags
+   *  - **ariaInvalid** – `{boolean}` – Enables/disables aria-invalid tags
+   *  - **ariaValue** – `{boolean}` – Enables/disables aria-valuemin, aria-valuemax and
+   *    aria-valuenow tags
+   *  - **tabindex** – `{boolean}` – Enables/disables tabindex tags
+   *  - **bindKeydown** – `{boolean}` – Enables/disables keyboard event binding on non-interactive
+   *    elements (such as `div` or `li`) using ng-click, making them more accessible to users of
+   *    assistive technologies
+   *  - **bindRoleForClick** – `{boolean}` – Adds role=button to non-interactive elements (such as
+   *    `div` or `li`) using ng-click, making them more accessible to users of assistive
+   *    technologies
+   *
+   * @description
+   * Enables/disables various ARIA attributes
+   */
+  this.config = function (newConfig) {
+    config = extend(config, newConfig);
+  };
+
+  function watchExpr(attrName, ariaAttr, nativeAriaNodeNames, negate) {
+    return function (scope, elem, attr) {
+      if (Object.prototype.hasOwnProperty.call(attr, ARIA_DISABLE_ATTR)) return;
+
+      const ariaCamelName = attr.$normalize(ariaAttr);
+      if (
+        config[ariaCamelName] &&
+        !isNodeOneOf(elem, nativeAriaNodeNames) &&
+        !attr[ariaCamelName]
+      ) {
+        scope.$watch(attr[attrName], (boolVal) => {
+          // ensure boolean value
+          boolVal = negate ? !boolVal : !!boolVal;
+          elem.attr(ariaAttr, boolVal);
+        });
+      }
+    };
+  }
+  /**
+   * @ngdoc service
+   * @name $aria
+   *
+   * @description
+   *
+   * The $aria service contains helper methods for applying common
+   * [ARIA](http://www.w3.org/TR/wai-aria/) attributes to HTML directives.
+   *
+   * ngAria injects common accessibility attributes that tell assistive technologies when HTML
+   * elements are enabled, selected, hidden, and more. To see how this is performed with ngAria,
+   * let's review a code snippet from ngAria itself:
+   *
+   *```js
+   * ngAriaModule.directive('ngDisabled', ['$aria', function($aria) {
+   *   return $aria.$$watchExpr('ngDisabled', 'aria-disabled', nativeAriaNodeNames, false);
+   * }])
+   *```
+   * Shown above, the ngAria module creates a directive with the same signature as the
+   * traditional `ng-disabled` directive. But this ngAria version is dedicated to
+   * solely managing accessibility attributes on custom elements. The internal `$aria` service is
+   * used to watch the boolean attribute `ngDisabled`. If it has not been explicitly set by the
+   * developer, `aria-disabled` is injected as an attribute with its value synchronized to the
+   * value in `ngDisabled`.
+   *
+   * Because ngAria hooks into the `ng-disabled` directive, developers do not have to do
+   * anything to enable this feature. The `aria-disabled` attribute is automatically managed
+   * simply as a silent side-effect of using `ng-disabled` with the ngAria module.
+   *
+   * The full list of directives that interface with ngAria:
+   * * **ngModel**
+   * * **ngChecked**
+   * * **ngReadonly**
+   * * **ngRequired**
+   * * **ngDisabled**
+   * * **ngValue**
+   * * **ngShow**
+   * * **ngHide**
+   * * **ngClick**
+   * * **ngDblclick**
+   * * **ngMessages**
+   *
+   * Read the {@link guide/accessibility ngAria Developer Guide} for a thorough explanation of each
+   * directive.
+   *
+   *
+   * ## Dependencies
+   * Requires the {@link ngAria} module to be installed.
+   */
+  this.$get = function () {
+    return {
+      config(key) {
+        return config[key];
+      },
+      $$watchExpr: watchExpr,
+    };
+  };
+}