diff --git a/src/ngAria/aria.js b/src/ngAria/aria.js
index c1038f2f26c7..e8c3bcbff6b2 100644
--- a/src/ngAria/aria.js
+++ b/src/ngAria/aria.js
@@ -52,6 +52,16 @@
var ngAriaModule = angular.module('ngAria', ['ng']).
provider('$aria', $AriaProvider);
+/**
+* Internal Utilities
+*/
+var nodeBlackList = ['BUTTON', 'A', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS', 'SUMMARY'];
+
+var isNodeOneOf = function (elem, nodeTypeArray) {
+ if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
+ return true;
+ }
+}
/**
* @ngdoc provider
* @name $ariaProvider
@@ -113,10 +123,10 @@ function $AriaProvider() {
config = angular.extend(config, newConfig);
};
- function watchExpr(attrName, ariaAttr, negate) {
+ function watchExpr(attrName, ariaAttr, nodeBlackList, negate) {
return function(scope, elem, attr) {
var ariaCamelName = attr.$normalize(ariaAttr);
- if (config[ariaCamelName] && !attr[ariaCamelName]) {
+ if (config[ariaCamelName] && !isNodeOneOf(elem, nodeBlackList) && !attr[ariaCamelName]) {
scope.$watch(attr[attrName], function(boolVal) {
// ensure boolean value
boolVal = negate ? !boolVal : !!boolVal;
@@ -125,7 +135,6 @@ function $AriaProvider() {
}
};
}
-
/**
* @ngdoc service
* @name $aria
@@ -184,10 +193,10 @@ function $AriaProvider() {
ngAriaModule.directive('ngShow', ['$aria', function($aria) {
- return $aria.$$watchExpr('ngShow', 'aria-hidden', true);
+ return $aria.$$watchExpr('ngShow', 'aria-hidden', [], true);
}])
.directive('ngHide', ['$aria', function($aria) {
- return $aria.$$watchExpr('ngHide', 'aria-hidden', false);
+ return $aria.$$watchExpr('ngHide', 'aria-hidden', [], false);
}])
.directive('ngModel', ['$aria', function($aria) {
@@ -261,6 +270,9 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
scope.$watch(ngAriaWatchModelValue, shape === 'radio' ?
getRadioReaction() : ngAriaCheckboxReaction);
}
+ if (needsTabIndex) {
+ elem.attr('tabindex', 0);
+ }
break;
case 'range':
if (shouldAttachRole(shape, elem)) {
@@ -289,6 +301,9 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
});
}
}
+ if (needsTabIndex) {
+ elem.attr('tabindex', 0);
+ }
break;
case 'multiline':
if (shouldAttachAttr('aria-multiline', 'ariaMultiline', elem)) {
@@ -297,10 +312,6 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
break;
}
- if (needsTabIndex) {
- elem.attr('tabindex', 0);
- }
-
if (ngModel.$validators.required && shouldAttachAttr('aria-required', 'ariaRequired', elem)) {
scope.$watch(function ngAriaRequiredWatch() {
return ngModel.$error.required;
@@ -322,7 +333,7 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
};
}])
.directive('ngDisabled', ['$aria', function($aria) {
- return $aria.$$watchExpr('ngDisabled', 'aria-disabled');
+ return $aria.$$watchExpr('ngDisabled', 'aria-disabled', []);
}])
.directive('ngMessages', function() {
return {
@@ -342,35 +353,28 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
var fn = $parse(attr.ngClick, /* interceptorFn */ null, /* expensiveChecks */ true);
return function(scope, elem, attr) {
- var nodeBlackList = ['BUTTON', 'A', 'INPUT', 'TEXTAREA'];
+ if (!isNodeOneOf(elem, nodeBlackList)) {
- function isNodeOneOf(elem, nodeTypeArray) {
- if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
- return true;
+ if ($aria.config('bindRoleForClick') && !elem.attr('role')) {
+ elem.attr('role', 'button');
}
- }
- if ($aria.config('bindRoleForClick')
- && !elem.attr('role')
- && !isNodeOneOf(elem, nodeBlackList)) {
- elem.attr('role', 'button');
- }
-
- if ($aria.config('tabindex') && !elem.attr('tabindex')) {
- elem.attr('tabindex', 0);
- }
+ if ($aria.config('tabindex') && !elem.attr('tabindex')) {
+ elem.attr('tabindex', 0);
+ }
- if ($aria.config('bindKeypress') && !attr.ngKeypress && !isNodeOneOf(elem, nodeBlackList)) {
- elem.on('keypress', function(event) {
- var keyCode = event.which || event.keyCode;
- if (keyCode === 32 || keyCode === 13) {
- scope.$apply(callback);
- }
+ if ($aria.config('bindKeypress') && !attr.ngKeypress) {
+ elem.on('keypress', function(event) {
+ var keyCode = event.which || event.keyCode;
+ if (keyCode === 32 || keyCode === 13) {
+ scope.$apply(callback);
+ }
- function callback() {
- fn(scope, { $event: event });
- }
- });
+ function callback() {
+ fn(scope, { $event: event });
+ }
+ });
+ }
}
};
}
@@ -378,7 +382,7 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
}])
.directive('ngDblclick', ['$aria', function($aria) {
return function(scope, elem, attr) {
- if ($aria.config('tabindex') && !elem.attr('tabindex')) {
+ if ($aria.config('tabindex') && !elem.attr('tabindex') && !isNodeOneOf(elem, nodeBlackList)) {
elem.attr('tabindex', 0);
}
};
diff --git a/test/ngAria/ariaSpec.js b/test/ngAria/ariaSpec.js
index 864f856ed271..911e6aab73d5 100644
--- a/test/ngAria/ariaSpec.js
+++ b/test/ngAria/ariaSpec.js
@@ -616,10 +616,35 @@ describe('$aria', function() {
describe('tabindex', function() {
beforeEach(injectScopeAndCompiler);
- it('should attach tabindex to role="checkbox", ng-click, and ng-dblclick', function() {
+ it('should not attach to native controls', function() {
+ var element = [
+ $compile("")(scope),
+ $compile("")(scope),
+ $compile("")(scope),
+ $compile("")(scope),
+ $compile("")(scope),
+ $compile(" ")(scope)
+ ];
+ expectAriaAttrOnEachElement(element, 'tabindex', undefined);
+ });
+
+ it('should not attach to random ng-model elements', function() {
+ compileElement('');
+ expect(element.attr('tabindex')).toBeUndefined();
+ });
+
+ it('should attach tabindex to custom inputs', function() {
+ compileElement('');
+ expect(element.attr('tabindex')).toBe('0');
+
compileElement('');
expect(element.attr('tabindex')).toBe('0');
+ compileElement('');
+ expect(element.attr('tabindex')).toBe('0');
+ });
+
+ it('should attach to ng-click and ng-dblclick', function() {
compileElement('');
expect(element.attr('tabindex')).toBe('0');
@@ -640,26 +665,6 @@ describe('$aria', function() {
compileElement('');
expect(element.attr('tabindex')).toBe('userSetValue');
});
-
- it('should set proper tabindex values for radiogroup', function() {
- compileElement('');
-
- var one = element.contents().eq(0);
- var two = element.contents().eq(1);
-
- scope.$apply("val = 'one'");
- expect(one.attr('tabindex')).toBe('0');
- expect(two.attr('tabindex')).toBe('-1');
-
- scope.$apply("val = 'two'");
- expect(one.attr('tabindex')).toBe('-1');
- expect(two.attr('tabindex')).toBe('0');
-
- dealoc(element);
- });
});
describe('accessible actions', function() {