feat(ngAria): add support for ngReadonly

handle aria-readonly based on ng-readonly
feat   angular#14077

Author: m-amr

src/ngAria/aria.js

@@ -16,7 +16,7 @@
  *
  * For ngAria to do its magic, simply include the module `ngAria` as a dependency. The following
  * directives are supported:
- * `ngModel`, `ngChecked`, `ngRequired`, `ngValue`, `ngDisabled`, `ngShow`, `ngHide`, `ngClick`,
+ * `ngModel`, `ngChecked`, `ngReadonly`, `ngRequired`, `ngValue`, `ngDisabled`, `ngShow`, `ngHide`, `ngClick`,
  * `ngDblClick`, and `ngMessages`.
  *
  * Below is a more detailed breakdown of the attributes handled by ngAria:
@@ -25,8 +25,9 @@
  * |---------------------------------------------|----------------------------------------------------------------------------------------|
  * | {@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: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                                                                            |
@@ -91,6 +92,7 @@ function $AriaProvider() {
   var config = {
     ariaHidden: true,
     ariaChecked: true,
+    ariaReadonly: true,
     ariaDisabled: true,
     ariaRequired: true,
     ariaInvalid: true,
@@ -108,6 +110,7 @@ function $AriaProvider() {
    *
    *  - **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
@@ -209,6 +212,9 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
 .directive('ngChecked', ['$aria', function($aria) {
   return $aria.$$watchExpr('ngChecked', 'aria-checked', nodeBlackList, false);
 }])
+.directive('ngReadonly', ['$aria', function($aria) {
+  return $aria.$$watchExpr('ngReadonly', 'aria-readonly', nodeBlackList, false);
+}])
 .directive('ngRequired', ['$aria', function($aria) {
   return $aria.$$watchExpr('ngRequired', 'aria-required', nodeBlackList, false);
 }])

test/ngAria/ariaSpec.js

@@ -396,6 +396,52 @@ describe('$aria', function() {
     });
   });
 
+  describe('aria-readonly', function() {
+    beforeEach(injectScopeAndCompiler);
+
+    they('should not attach itself to native $prop controls', {
+      input: '<input ng-readonly="val">',
+      textarea: '<textarea ng-readonly="val"></textarea>',
+      select: '<select ng-readonly="val"></select>',
+      button: '<button ng-readonly="val"></button>'
+    }, function(tmpl) {
+      var element = $compile(tmpl)(scope);
+      scope.$apply('val = true');
+
+      expect(element.attr('readonly')).toBeDefined();
+      expect(element.attr('aria-readonly')).toBeUndefined();
+    });
+
+    it('should attach itself to custom controls', function() {
+      compileElement('<div ng-readonly="val"></div>');
+      expect(element.attr('aria-readonly')).toBe('false');
+
+      scope.$apply('val = true');
+      expect(element.attr('aria-readonly')).toBe('true');
+
+    });
+
+    it('should not attach itself if an aria-readonly attribute is already present', function() {
+      compileElement('<div ng-readonly="val" aria-readonly="userSetValue"></div>');
+
+      expect(element.attr('aria-readonly')).toBe('userSetValue');
+    });
+
+
+    it('should always set aria-readonly to a boolean value', function() {
+      compileElement('<div ng-readonly="val"></div>');
+
+      scope.$apply('val = "test angular"');
+      expect(element.attr('aria-readonly')).toBe('true');
+
+      scope.$apply('val = null');
+      expect(element.attr('aria-readonly')).toBe('false');
+
+      scope.$apply('val = {}');
+      expect(element.attr('aria-readonly')).toBe('true');
+    });
+  });
+
   describe('aria-required', function() {
     beforeEach(injectScopeAndCompiler);