Permalink
Browse files

feat(ngAria): add roles to custom inputs

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

Closes #10012
Closes #10318
  • Loading branch information...
1 parent 410f7c6 commit 29cdaee2b6e853bc3f8882a00661698d146ecd18 Marcy Sutton committed with petebacondarwin Dec 4, 2014
Showing with 49 additions and 0 deletions.
  1. +10 −0 src/ngAria/aria.js
  2. +39 −0 test/ngAria/ariaSpec.js
View
@@ -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);
@@ -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

0 comments on commit 29cdaee

Please sign in to comment.