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

Commit 9978de1

Browse files
m-amrNarretz
authored andcommitted
fix(ngAria): don't add roles to native control elements
prevent ngAria from attaching roles to textarea, button, select, summary, details, a, and input Closes #14076 Closes #14145 BREAKING CHANGE: ngAria will no longer add the "role" attribute to native control elements (textarea, button, select, summary, details, a, and input). Previously, "role" was not added to input, but all others in the list. This should not affect accessibility, because native inputs are accessible by default, but it might affect applications that relied on the "role" attribute being present (e.g. for styling or as directive attributes).
1 parent d449ec8 commit 9978de1

File tree

2 files changed

+15
-2
lines changed

2 files changed

+15
-2
lines changed

src/ngAria/aria.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,8 +228,8 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
228228
function shouldAttachRole(role, elem) {
229229
// if element does not have role attribute
230230
// AND element type is equal to role (if custom element has a type equaling shape) <-- remove?
231-
// AND element is not INPUT
232-
return !elem.attr('role') && (elem.attr('type') === role) && (elem[0].nodeName !== 'INPUT');
231+
// AND element is not in nodeBlackList
232+
return !elem.attr('role') && (elem.attr('type') === role) && !isNodeOneOf(elem, nodeBlackList);
233233
}
234234

235235
function getShape(attr, elem) {

test/ngAria/ariaSpec.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,19 @@ describe('$aria', function() {
272272
compileElement('<input type="range" ng-model="val"/>');
273273
expect(element.attr('role')).toBeUndefined();
274274
});
275+
276+
they('should not add role to native $prop controls', {
277+
input: '<input type="text" ng-model="val">',
278+
select: '<select type="checkbox" ng-model="val"></select>',
279+
textarea: '<textarea type="checkbox" ng-model="val"></textarea>',
280+
button: '<button ng-click="doClick()"></button>',
281+
summary: '<summary ng-click="doClick()"></summary>',
282+
details: '<details ng-click="doClick()"></details>',
283+
a: '<a ng-click="doClick()"></a>'
284+
}, function(tmpl) {
285+
var element = $compile(tmpl)(scope);
286+
expect(element.attr('role')).toBeUndefined();
287+
});
275288
});
276289

277290
describe('aria-checked when disabled', function() {

0 commit comments

Comments
 (0)