diff --git a/docs/content/guide/accessibility.ngdoc b/docs/content/guide/accessibility.ngdoc index c4c99042f9d0..0865c6e0cfdc 100644 --- a/docs/content/guide/accessibility.ngdoc +++ b/docs/content/guide/accessibility.ngdoc @@ -37,6 +37,7 @@ Currently, ngAria interfaces with the following directives: * {@link guide/accessibility#nghide ngHide} * {@link guide/accessibility#ngclick ngClick} * {@link guide/accessibility#ngdblclick ngDblClick} + * {@link guide/accessibility#ngmessages ngMessages}

ngModel

@@ -209,10 +210,14 @@ The default CSS for `ngHide`, the inverse method to `ngShow`, makes ngAria redun `display: none`. See explanation for {@link guide/accessibility#ngshow ngShow} when overriding the default CSS.

ngClick and ngDblclick

-If `ng-click` or `ng-dblclick` is encountered, ngAria will add `tabindex` if it isn't there already. -Even with this, you must currently still add `ng-keypress` to non-interactive elements such as `div` -or `taco-button` to enable keyboard access. Conversation is currently ongoing about whether ngAria -should also bind `ng-keypress`. +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. + +For `ng-dblclick`, you must manually add `ng-keypress` to non-interactive elements such as `div` +or `taco-button` to enable keyboard access.

Example

```html @@ -223,7 +228,6 @@ Becomes: ```html
``` -*Note: ngAria still requires `ng-keypress` to be added manually to non-native controls like divs.*

ngMessages

diff --git a/src/ngAria/aria.js b/src/ngAria/aria.js index 787533c13a68..10db87ac354f 100644 --- a/src/ngAria/aria.js +++ b/src/ngAria/aria.js @@ -100,7 +100,8 @@ function $AriaProvider() { * - **ariaMultiline** – `{boolean}` – Enables/disables aria-multiline tags * - **ariaValue** – `{boolean}` – Enables/disables aria-valuemin, aria-valuemax and aria-valuenow tags * - **tabindex** – `{boolean}` – Enables/disables tabindex tags - * - **bindKeypress** – `{boolean}` – Enables/disables keypress event binding on ng-click + * - **bindKeypress** – `{boolean}` – Enables/disables keypress event binding on `<div>` and + * `<li>` elements with ng-click * * @description * Enables/disables various ARIA attributes @@ -303,11 +304,18 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) { compile: function(elem, attr) { var fn = $parse(attr.ngClick, /* interceptorFn */ null, /* expensiveChecks */ true); return function(scope, elem, attr) { + + function isNodeOneOf(elem, nodeTypeArray) { + if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) { + return true; + } + } + if ($aria.config('tabindex') && !elem.attr('tabindex')) { elem.attr('tabindex', 0); } - if ($aria.config('bindKeypress') && !attr.ngKeypress) { + if ($aria.config('bindKeypress') && !attr.ngKeypress && isNodeOneOf(elem, ['DIV', 'LI'])) { elem.on('keypress', function(event) { if (event.keyCode === 32 || event.keyCode === 13) { scope.$apply(callback); diff --git a/test/ngAria/ariaSpec.js b/test/ngAria/ariaSpec.js index 4d14525cade3..016fd2020fc9 100644 --- a/test/ngAria/ariaSpec.js +++ b/test/ngAria/ariaSpec.js @@ -1,6 +1,6 @@ 'use strict'; -describe('$aria', function() { +ddescribe('$aria', function() { var scope, $compile, element; beforeEach(module('ngAria')); @@ -488,12 +488,24 @@ describe('$aria', function() { it('should a trigger click from the keyboard', function() { scope.someAction = function() {}; - compileInput('
'); + + var elements = $compile('
' + + '
' + + '' + + '
')(scope); + + scope.$digest(); + clickFn = spyOn(scope, 'someAction'); - element.triggerHandler({type: 'keypress', keyCode: 32}); + var divElement = elements.find('div'); + var liElement = elements.find('li'); + + divElement.triggerHandler({type: 'keypress', keyCode: 32}); + liElement.triggerHandler({type: 'keypress', keyCode: 32}); - expect(clickFn).toHaveBeenCalled(); + expect(clickFn).toHaveBeenCalledWith('div'); + expect(clickFn).toHaveBeenCalledWith('li'); }); it('should not override existing ng-keypress', function() { @@ -526,6 +538,13 @@ describe('$aria', function() { element.triggerHandler({ type: 'keypress', keyCode: 13 }); expect(element.text()).toBe('keypress13'); }); + + it('should not bind keypress to elements not in the default config', function() { + compileInput(''); + expect(element.text()).toBe(''); + element.triggerHandler({ type: 'keypress', keyCode: 13 }); + expect(element.text()).toBe(''); + }); }); describe('actions when bindKeypress set to false', function() { @@ -534,11 +553,11 @@ describe('$aria', function() { })); beforeEach(injectScopeAndCompiler); - it('should not a trigger click from the keyboard', function() { + it('should not a trigger click', function() { scope.someAction = function() {}; var clickFn = spyOn(scope, 'someAction'); - element = $compile('
>
')(scope); + element = $compile('
')(scope); element.triggerHandler({type: 'keypress', keyCode: 32});