feat(ngAria): add roles to custom inputs

This change adds the missing roles: `slider`, `radio`, `checkbox`

Closes #10012
Closes #10318

Author: Marcy Sutton

src/ngAria/aria.js

@@ -193,6 +193,10 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
     return $aria.config(normalizedAttr) && !elem.attr(attr);
   }
 
+  function shouldAttachRole(role, elem) {
+    return !elem.attr('role') && (elem.attr('type') === role) && (elem[0].nodeName !== 'INPUT');
+  }
+
   function getShape(attr, elem) {
     var type = attr.type,
         role = attr.role;
@@ -237,12 +241,18 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
       switch (shape) {
         case 'radio':
         case 'checkbox':
+          if (shouldAttachRole(shape, elem)) {
+            elem.attr('role', shape);
+          }
           if (shouldAttachAttr('aria-checked', 'ariaChecked', elem)) {
             scope.$watch(ngAriaWatchModelValue, shape === 'radio' ?
                 getRadioReaction() : ngAriaCheckboxReaction);
           }
           break;
         case 'range':
+          if (shouldAttachRole(shape, elem)) {
+            elem.attr('role', 'slider');
+          }
           if ($aria.config('ariaValue')) {
             if (attr.min && !elem.attr('aria-valuemin')) {
               elem.attr('aria-valuemin', attr.min);

test/ngAria/ariaSpec.js

@@ -5,6 +5,10 @@ describe('$aria', function() {
 
   beforeEach(module('ngAria'));
 
+  afterEach(function(){
+    dealoc(element);
+  });
+
   function injectScopeAndCompiler() {
     return inject(function(_$compile_, _$rootScope_) {
       $compile = _$compile_;
@@ -188,6 +192,41 @@ describe('$aria', function() {
     });
   });
 
+  describe('roles for custom inputs', function() {
+    beforeEach(injectScopeAndCompiler);
+
+    it('should add missing role="checkbox" to custom input', function() {
+      scope.$apply('val = true');
+      compileInput('<div type="checkbox" ng-model="val"></div>');
+      expect(element.attr('role')).toBe('checkbox');
+    });
+    it('should not add a role to a native checkbox', function() {
+      scope.$apply('val = true');
+      compileInput('<input type="checkbox" ng-model="val"></div>');
+      expect(element.attr('role')).toBe(undefined);
+    });
+    it('should add missing role="radio" to custom input', function() {
+      scope.$apply('val = true');
+      compileInput('<div type="radio" ng-model="val"></div>');
+      expect(element.attr('role')).toBe('radio');
+    });
+    it('should not add a role to a native radio button', function() {
+      scope.$apply('val = true');
+      compileInput('<input type="radio" ng-model="val"></div>');
+      expect(element.attr('role')).toBe(undefined);
+    });
+    it('should add missing role="slider" to custom input', function() {
+      scope.$apply('val = true');
+      compileInput('<div type="range" ng-model="val"></div>');
+      expect(element.attr('role')).toBe('slider');
+    });
+    it('should not add a role to a native range input', function() {
+      scope.$apply('val = true');
+      compileInput('<input type="range" ng-model="val"></div>');
+      expect(element.attr('role')).toBe(undefined);
+    });
+  });
+
   describe('aria-checked when disabled', function() {
     beforeEach(configAriaProvider({
       ariaChecked: false