Permalink
Browse files

feat(ngAria): add `button` role to `ngClick`

Closes #9254
Closes #10318
  • Loading branch information...
1 parent 0f50b01 commit bb365070a3ed7c2d26056d378ab6a8ef493b23cc Marcy Sutton committed with petebacondarwin Mar 2, 2015
Showing with 24 additions and 7 deletions.
  1. +6 −4 docs/content/guide/accessibility.ngdoc
  2. +8 −3 src/ngAria/aria.js
  3. +10 −0 test/ngAria/ariaSpec.js
@@ -213,11 +213,13 @@ The default CSS for `ngHide`, the inverse method to `ngShow`, makes ngAria redun
If `ng-click` or `ng-dblclick` is encountered, ngAria will add `tabindex="0"` if it isn't there
already.
-For `ng-click`, keypress will also be bound to `div` and `li` elements. You can turn this
-functionality on or off with the `bindKeypress` configuration option.
+To fix widespread accessibility problems with `ng-click` on div elements, ngAria will dynamically
+bind keypress by default as long as the element isn't an anchor, button, input or textarea.
+You can turn this functionality on or off with the `bindKeypress` configuration option. ngAria
+will also add the `button` role to communicate to users of assistive technologies.
-For `ng-dblclick`, you must manually add `ng-keypress` to non-interactive elements such as `div`
-or `taco-button` to enable keyboard access.
+For `ng-dblclick`, you must still manually add `ng-keypress` and role to non-interactive elements such
+as `div` or `taco-button` to enable keyboard access.
<h3>Example</h3>
```html
View
@@ -22,13 +22,13 @@
*
* | Directive | Supported Attributes |
* |---------------------------------------------|----------------------------------------------------------------------------------------|
- * | {@link ng.directive:ngModel ngModel} | aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-invalid, aria-required |
* | {@link ng.directive:ngDisabled ngDisabled} | aria-disabled |
* | {@link ng.directive:ngShow ngShow} | aria-hidden |
* | {@link ng.directive:ngHide ngHide} | aria-hidden |
- * | {@link ng.directive:ngClick ngClick} | tabindex, keypress event |
* | {@link ng.directive:ngDblclick ngDblclick} | tabindex |
* | {@link module:ngMessages ngMessages} | aria-live |
+ * | {@link ng.directive:ngModel ngModel} | aria-checked, aria-valuemin, aria-valuemax, aria-valuenow, aria-invalid, aria-required, input roles |
+ * | {@link ng.directive:ngClick ngClick} | tabindex, keypress event, button role |
*
* Find out more information about each directive by reading the
* {@link guide/accessibility ngAria Developer Guide}.
@@ -317,17 +317,22 @@ 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'];
+
function isNodeOneOf(elem, nodeTypeArray) {
if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
return true;
}
}
+ if (!elem.attr('role') && !isNodeOneOf(elem, nodeBlackList)) {
+ elem.attr('role', 'button');
+ }
if ($aria.config('tabindex') && !elem.attr('tabindex')) {
elem.attr('tabindex', 0);
}
- if ($aria.config('bindKeypress') && !attr.ngKeypress && isNodeOneOf(elem, ['DIV', 'LI'])) {
+ if ($aria.config('bindKeypress') && !attr.ngKeypress && !isNodeOneOf(elem, nodeBlackList)) {
elem.on('keypress', function(event) {
if (event.keyCode === 32 || event.keyCode === 13) {
scope.$apply(callback);
@@ -195,6 +195,16 @@ describe('$aria', function() {
describe('roles for custom inputs', function() {
beforeEach(injectScopeAndCompiler);
+ it('should add missing role="button" to custom input', function() {
+ compileElement('<div ng-click="someFunction()"></div>');
+ expect(element.attr('role')).toBe('button');
+ });
+
+ it('should not add role="button" to anchor', function() {
+ compileElement('<a ng-click="someFunction()"></a>');
+ expect(element.attr('role')).not.toBe('button');
+ });
+
it('should add missing role="checkbox" to custom input', function() {
compileElement('<div type="checkbox" ng-model="val"></div>');
expect(element.attr('role')).toBe('checkbox');

0 comments on commit bb36507

Please sign in to comment.