Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 6d5ef34

Browse files
authored
fix(ngAria): do not set aria attributes on input[type="hidden"]
This fixes a error found by @edclements using the Google Accessibility Developer Tools audit. Input fields of type hidden shouldn't have aria attributes. https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties-1 Closes #15113 Closes #16367 BREAKING CHANGE: ngAria no longer sets aria-* attributes on input[type="hidden"] with ngModel. This can affect apps that test for the presence of aria attributes on hidden inputs. To migrate, remove these assertions. In actual apps, this should not have a user-facing effect, as the previous behavior was incorrect, and the new behavior is correct for accessibility.
1 parent 00815db commit 6d5ef34

File tree

2 files changed

+19
-1
lines changed

2 files changed

+19
-1
lines changed

src/ngAria/aria.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,10 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
224224
.directive('ngModel', ['$aria', function($aria) {
225225

226226
function shouldAttachAttr(attr, normalizedAttr, elem, allowBlacklistEls) {
227-
return $aria.config(normalizedAttr) && !elem.attr(attr) && (allowBlacklistEls || !isNodeOneOf(elem, nodeBlackList));
227+
return $aria.config(normalizedAttr) &&
228+
!elem.attr(attr) &&
229+
(allowBlacklistEls || !isNodeOneOf(elem, nodeBlackList)) &&
230+
(elem.attr('type') !== 'hidden' || elem[0].nodeName !== 'INPUT');
228231
}
229232

230233
function shouldAttachRole(role, elem) {

test/ngAria/ariaSpec.js

+15
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,21 @@ describe('$aria', function() {
420420
scope.$apply('txtInput=\'LTten\'');
421421
expect(element.attr('aria-invalid')).toBe('userSetValue');
422422
});
423+
424+
it('should not attach if input is type="hidden"', function() {
425+
compileElement('<input type="hidden" ng-model="txtInput">');
426+
expect(element.attr('aria-invalid')).toBeUndefined();
427+
});
428+
429+
430+
it('should attach aria-invalid to custom control that is type="hidden"', function() {
431+
compileElement('<div ng-model="txtInput" type="hidden" role="textbox" ng-minlength="10"></div>');
432+
scope.$apply('txtInput=\'LTten\'');
433+
expect(element.attr('aria-invalid')).toBe('true');
434+
435+
scope.$apply('txtInput=\'morethantencharacters\'');
436+
expect(element.attr('aria-invalid')).toBe('false');
437+
});
423438
});
424439

425440
describe('aria-invalid when disabled', function() {

0 commit comments

Comments
 (0)