Skip to content

Commit 93009b9

Browse files
marcysuttonmarcysutton
committed
fix(ngAria): apply to custom inputs only
Closes angular#11500
1 parent 8914f8e commit 93009b9

File tree

2 files changed

+124
-154
lines changed

2 files changed

+124
-154
lines changed

‎src/ngAria/aria.js

+41-37
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,10 @@ function $AriaProvider() {
110110
config = angular.extend(config, newConfig);
111111
};
112112

113-
function watchExpr(attrName, ariaAttr, negate) {
113+
function watchExpr(attrName, ariaAttr, nodeBlackList, negate) {
114114
return function(scope, elem, attr) {
115115
var ariaCamelName = attr.$normalize(ariaAttr);
116-
if (config[ariaCamelName] && !attr[ariaCamelName]) {
116+
if (config[ariaCamelName] && !isNodeOneOf(elem, nodeBlackList) && !attr[ariaCamelName]) {
117117
scope.$watch(attr[attrName], function(boolVal) {
118118
if (negate) {
119119
boolVal = !boolVal;
@@ -124,6 +124,12 @@ function $AriaProvider() {
124124
};
125125
}
126126

127+
function isNodeOneOf(elem, nodeTypeArray) {
128+
if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
129+
return true;
130+
}
131+
}
132+
127133
/**
128134
* @ngdoc service
129135
* @name $aria
@@ -175,22 +181,24 @@ function $AriaProvider() {
175181
config: function(key) {
176182
return config[key];
177183
},
178-
$$watchExpr: watchExpr
184+
$$watchExpr: watchExpr,
185+
nodeBlackList: ['BUTTON', 'A', 'INPUT', 'TEXTAREA', 'SELECT'],
186+
isNodeOneOf: isNodeOneOf
179187
};
180188
};
181189
}
182190

183191

184192
ngAriaModule.directive('ngShow', ['$aria', function($aria) {
185-
return $aria.$$watchExpr('ngShow', 'aria-hidden', true);
193+
return $aria.$$watchExpr('ngShow', 'aria-hidden', [], true);
186194
}])
187195
.directive('ngHide', ['$aria', function($aria) {
188-
return $aria.$$watchExpr('ngHide', 'aria-hidden', false);
196+
return $aria.$$watchExpr('ngHide', 'aria-hidden', [], false);
189197
}])
190198
.directive('ngModel', ['$aria', function($aria) {
191199

192-
function shouldAttachAttr(attr, normalizedAttr, elem) {
193-
return $aria.config(normalizedAttr) && !elem.attr(attr);
200+
function shouldAttachAttr(attr, normalizedAttr, elem, nodeBlacklist) {
201+
return !$aria.isNodeOneOf(elem, (nodeBlacklist || [])) && $aria.config(normalizedAttr) && !elem.attr(attr);
194202
}
195203

196204
function shouldAttachRole(role, elem) {
@@ -216,15 +224,15 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
216224

217225
return {
218226
pre: function(scope, elem, attr, ngModel) {
219-
if (shape === 'checkbox' && attr.type !== 'checkbox') {
227+
if (shape === 'checkbox') {
220228
//Use the input[checkbox] $isEmpty implementation for elements with checkbox roles
221229
ngModel.$isEmpty = function(value) {
222230
return value === false;
223231
};
224232
}
225233
},
226234
post: function(scope, elem, attr, ngModel) {
227-
var needsTabIndex = shouldAttachAttr('tabindex', 'tabindex', elem);
235+
var needsTabIndex = shouldAttachAttr('tabindex', 'tabindex', elem, $aria.nodeBlackList);
228236

229237
function ngAriaWatchModelValue() {
230238
return ngModel.$modelValue;
@@ -255,7 +263,7 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
255263
if (shouldAttachRole(shape, elem)) {
256264
elem.attr('role', shape);
257265
}
258-
if (shouldAttachAttr('aria-checked', 'ariaChecked', elem)) {
266+
if (shouldAttachAttr('aria-checked', 'ariaChecked', elem, ['INPUT'])) {
259267
scope.$watch(ngAriaWatchModelValue, shape === 'radio' ?
260268
getRadioReaction() : ngAriaCheckboxReaction);
261269
}
@@ -264,7 +272,7 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
264272
if (shouldAttachRole(shape, elem)) {
265273
elem.attr('role', 'slider');
266274
}
267-
if ($aria.config('ariaValue')) {
275+
if (!$aria.isNodeOneOf(elem, ['INPUT']) && $aria.config('ariaValue')) {
268276
if (attr.min && !elem.attr('aria-valuemin')) {
269277
elem.attr('aria-valuemin', attr.min);
270278
}
@@ -289,7 +297,7 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
289297
elem.attr('tabindex', 0);
290298
}
291299

292-
if (ngModel.$validators.required && shouldAttachAttr('aria-required', 'ariaRequired', elem)) {
300+
if (ngModel.$validators.required && shouldAttachAttr('aria-required', 'ariaRequired', elem, $aria.nodeBlackList)) {
293301
scope.$watch(function ngAriaRequiredWatch() {
294302
return ngModel.$error.required;
295303
}, function ngAriaRequiredReaction(newVal) {
@@ -310,7 +318,7 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
310318
};
311319
}])
312320
.directive('ngDisabled', ['$aria', function($aria) {
313-
return $aria.$$watchExpr('ngDisabled', 'aria-disabled');
321+
return $aria.$$watchExpr('ngDisabled', 'aria-disabled', $aria.nodeBlackList);
314322
}])
315323
.directive('ngMessages', function() {
316324
return {
@@ -329,33 +337,29 @@ ngAriaModule.directive('ngShow', ['$aria', function($aria) {
329337
compile: function(elem, attr) {
330338
var fn = $parse(attr.ngClick, /* interceptorFn */ null, /* expensiveChecks */ true);
331339
return function(scope, elem, attr) {
332-
333-
var nodeBlackList = ['BUTTON', 'A', 'INPUT', 'TEXTAREA'];
334-
335-
function isNodeOneOf(elem, nodeTypeArray) {
336-
if (nodeTypeArray.indexOf(elem[0].nodeName) !== -1) {
337-
return true;
340+
341+
if (!$aria.isNodeOneOf(elem, $aria.nodeBlackList)) {
342+
343+
if (!elem.attr('role')) {
344+
elem.attr('role', 'button');
345+
}
346+
347+
if ($aria.config('tabindex') && !elem.attr('tabindex')) {
348+
elem.attr('tabindex', 0);
338349
}
339-
}
340-
if (!elem.attr('role') && !isNodeOneOf(elem, nodeBlackList)) {
341-
elem.attr('role', 'button');
342-
}
343-
344-
if ($aria.config('tabindex') && !elem.attr('tabindex')) {
345-
elem.attr('tabindex', 0);
346-
}
347350

348-
if ($aria.config('bindKeypress') && !attr.ngKeypress && !isNodeOneOf(elem, nodeBlackList)) {
349-
elem.on('keypress', function(event) {
350-
var keyCode = event.which || event.keyCode;
351-
if (keyCode === 32 || keyCode === 13) {
352-
scope.$apply(callback);
353-
}
351+
if ($aria.config('bindKeypress') && !attr.ngKeypress) {
352+
elem.on('keypress', function(event) {
353+
var keyCode = event.which || event.keyCode;
354+
if (keyCode === 32 || keyCode === 13) {
355+
scope.$apply(callback);
356+
}
354357

355-
function callback() {
356-
fn(scope, { $event: event });
357-
}
358-
});
358+
function callback() {
359+
fn(scope, { $event: event });
360+
}
361+
});
362+
}
359363
}
360364
};
361365
}

0 commit comments

Comments
 (0)