');
scope.$apply('val = true');
expect(element.attr('aria-checked')).toBe('true');
scope.$apply('val = false');
expect(element.attr('aria-checked')).toBe('false');
});
it('should not handle native checkbox with ngChecked', function() {
var element = $compile('
')(scope);
scope.$apply('val = true');
expect(element.attr('aria-checked')).toBeUndefined();
scope.$apply('val = false');
expect(element.attr('aria-checked')).toBeUndefined();
});
it('should handle custom checkbox with ngChecked', function() {
var element = $compile('
')(scope);
scope.$apply('val = true');
expect(element.eq(0).attr('aria-checked')).toBe('true');
scope.$apply('val = false');
expect(element.eq(0).attr('aria-checked')).toBe('false');
});
it('should not attach to native input type="radio"', function() {
var element = $compile('
' +
'
')(scope);
scope.$apply("val='one'");
expect(element.eq(0).attr('aria-checked')).toBeUndefined();
expect(element.eq(1).attr('aria-checked')).toBeUndefined();
scope.$apply("val='two'");
expect(element.eq(0).attr('aria-checked')).toBeUndefined();
expect(element.eq(1).attr('aria-checked')).toBeUndefined();
});
it('should attach to custom radio controls', function() {
var element = $compile('
' +
'
')(scope);
scope.$apply("val='one'");
expect(element.eq(0).attr('aria-checked')).toBe('true');
expect(element.eq(1).attr('aria-checked')).toBe('false');
scope.$apply("val='two'");
expect(element.eq(0).attr('aria-checked')).toBe('false');
expect(element.eq(1).attr('aria-checked')).toBe('true');
});
it('should handle custom radios with integer model values', function() {
var element = $compile('
' +
'
')(scope);
scope.$apply("val=0");
expect(element.eq(0).attr('aria-checked')).toBe('true');
expect(element.eq(1).attr('aria-checked')).toBe('false');
scope.$apply("val=1");
expect(element.eq(0).attr('aria-checked')).toBe('false');
expect(element.eq(1).attr('aria-checked')).toBe('true');
});
it('should handle radios with boolean model values using ngValue', function() {
var element = $compile('
' +
'
')(scope);
scope.$apply(function() {
scope.valExp = true;
scope.valExp2 = false;
scope.val = true;
});
expect(element.eq(0).attr('aria-checked')).toBe('true');
expect(element.eq(1).attr('aria-checked')).toBe('false');
scope.$apply('val = false');
expect(element.eq(0).attr('aria-checked')).toBe('false');
expect(element.eq(1).attr('aria-checked')).toBe('true');
});
it('should attach itself to role="menuitemradio"', function() {
scope.val = 'one';
compileElement('
');
expect(element.attr('aria-checked')).toBe('true');
scope.$apply("val = 'two'");
expect(element.attr('aria-checked')).toBe('false');
});
it('should attach itself to role="menuitemcheckbox"', function() {
scope.val = true;
compileElement('
');
expect(element.attr('aria-checked')).toBe('true');
scope.$apply('val = false');
expect(element.attr('aria-checked')).toBe('false');
});
it('should not attach itself if an aria-checked value is already present', function() {
var element = [
$compile("
")(scope),
$compile("
")(scope),
$compile("
")(scope),
$compile("
")(scope)
];
scope.$apply("val1=true;val2='one';val3='1'");
expectAriaAttrOnEachElement(element, 'aria-checked', 'userSetValue');
});
});
describe('roles for custom inputs', function() {
beforeEach(injectScopeAndCompiler);
it('should add missing role="button" to custom input', function() {
compileElement('
');
expect(element.attr('role')).toBe('button');
});
it('should not add role="button" to anchor', function() {
compileElement('
');
expect(element.attr('role')).not.toBe('button');
});
it('should add missing role="checkbox" to custom input', function() {
compileElement('
');
expect(element.attr('role')).toBe('checkbox');
});
it('should not add a role to a native checkbox', function() {
compileElement('
');
expect(element.attr('role')).toBeUndefined();
});
it('should add missing role="radio" to custom input', function() {
compileElement('
');
expect(element.attr('role')).toBe('radio');
});
it('should not add a role to a native radio button', function() {
compileElement('
');
expect(element.attr('role')).toBeUndefined();
});
it('should add missing role="slider" to custom input', function() {
compileElement('
');
expect(element.attr('role')).toBe('slider');
});
it('should not add a role to a native range input', function() {
compileElement('
');
expect(element.attr('role')).toBeUndefined();
});
});
describe('aria-checked when disabled', function() {
beforeEach(configAriaProvider({
ariaChecked: false
}));
beforeEach(injectScopeAndCompiler);
it('should not attach aria-checked', function() {
compileElement("
");
expect(element.attr('aria-checked')).toBeUndefined();
compileElement("
");
expect(element.attr('aria-checked')).toBeUndefined();
compileElement("
");
expect(element.attr('aria-checked')).toBeUndefined();
compileElement("
");
expect(element.attr('aria-checked')).toBeUndefined();
});
});
describe('aria-disabled', function() {
beforeEach(injectScopeAndCompiler);
they('should not attach itself to native $prop controls', {
input: '
',
textarea: '
',
select: '
',
button: '
'
}, function(tmpl) {
var element = $compile(tmpl)(scope);
scope.$apply('val = true');
expect(element.attr('disabled')).toBeDefined();
expect(element.attr('aria-disabled')).toBeUndefined();
});
it('should attach itself to custom controls', function() {
compileElement('
');
expect(element.attr('aria-disabled')).toBe('false');
scope.$apply('val = true');
expect(element.attr('aria-disabled')).toBe('true');
});
it('should not attach itself if an aria-disabled attribute is already present', function() {
compileElement('
');
expect(element.attr('aria-disabled')).toBe('userSetValue');
});
it('should always set aria-disabled to a boolean value', function() {
compileElement('
');
scope.$apply('val = "test angular"');
expect(element.attr('aria-disabled')).toBe('true');
scope.$apply('val = null');
expect(element.attr('aria-disabled')).toBe('false');
scope.$apply('val = {}');
expect(element.attr('aria-disabled')).toBe('true');
});
});
describe('aria-disabled when disabled', function() {
beforeEach(configAriaProvider({
ariaDisabled: false
}));
beforeEach(injectScopeAndCompiler);
it('should not attach aria-disabled', function() {
compileElement('
');
scope.$apply('val = true');
expect(element.attr('aria-disabled')).toBeUndefined();
});
});
describe('aria-invalid', function() {
beforeEach(injectScopeAndCompiler);
it('should attach aria-invalid to input', function() {
compileElement('
');
scope.$apply("txtInput='LTten'");
expect(element.attr('aria-invalid')).toBe('true');
scope.$apply("txtInput='morethantencharacters'");
expect(element.attr('aria-invalid')).toBe('false');
});
it('should attach aria-invalid to custom controls', function() {
compileElement('
');
scope.$apply("txtInput='LTten'");
expect(element.attr('aria-invalid')).toBe('true');
scope.$apply("txtInput='morethantencharacters'");
expect(element.attr('aria-invalid')).toBe('false');
});
it('should not attach itself if aria-invalid is already present', function() {
compileElement('
');
scope.$apply("txtInput='LTten'");
expect(element.attr('aria-invalid')).toBe('userSetValue');
});
});
describe('aria-invalid when disabled', function() {
beforeEach(configAriaProvider({
ariaInvalid: false
}));
beforeEach(injectScopeAndCompiler);
it('should not attach aria-invalid if the option is disabled', function() {
scope.$apply("txtInput='LTten'");
compileElement('
');
expect(element.attr('aria-invalid')).toBeUndefined();
});
});
describe('aria-readonly', function() {
beforeEach(injectScopeAndCompiler);
they('should not attach itself to native $prop controls', {
input: '
',
textarea: '
',
select: '
',
button: '
'
}, function(tmpl) {
var element = $compile(tmpl)(scope);
scope.$apply('val = true');
expect(element.attr('readonly')).toBeDefined();
expect(element.attr('aria-readonly')).toBeUndefined();
});
it('should attach itself to custom controls', function() {
compileElement('
');
expect(element.attr('aria-readonly')).toBe('false');
scope.$apply('val = true');
expect(element.attr('aria-readonly')).toBe('true');
});
it('should not attach itself if an aria-readonly attribute is already present', function() {
compileElement('
');
expect(element.attr('aria-readonly')).toBe('userSetValue');
});
it('should always set aria-readonly to a boolean value', function() {
compileElement('
');
scope.$apply('val = "test angular"');
expect(element.attr('aria-readonly')).toBe('true');
scope.$apply('val = null');
expect(element.attr('aria-readonly')).toBe('false');
scope.$apply('val = {}');
expect(element.attr('aria-readonly')).toBe('true');
});
});
describe('aria-readonly when disabled', function() {
beforeEach(configAriaProvider({
ariaReadonly: false
}));
beforeEach(injectScopeAndCompiler);
it('should not add the aria-readonly attribute', function() {
compileElement("
");
expect(element.attr('aria-readonly')).toBeUndefined();
compileElement("
");
expect(element.attr('aria-readonly')).toBeUndefined();
});
});
describe('aria-required', function() {
beforeEach(injectScopeAndCompiler);
it('should not attach to input', function() {
compileElement('
');
expect(element.attr('aria-required')).toBeUndefined();
});
it('should attach to custom controls with ngModel and required', function() {
compileElement('
');
expect(element.attr('aria-required')).toBe('true');
});
it('should set aria-required to false when ng-required is false', function() {
compileElement("
");
expect(element.attr('aria-required')).toBe('false');
});
it('should attach to custom controls with ngRequired', function() {
compileElement('
');
expect(element.attr('aria-required')).toBe('true');
});
it('should not attach itself if aria-required is already present', function() {
compileElement("
");
expect(element.attr('aria-required')).toBe('userSetValue');
});
});
describe('aria-required when disabled', function() {
beforeEach(configAriaProvider({
ariaRequired: false
}));
beforeEach(injectScopeAndCompiler);
it('should not add the aria-required attribute', function() {
compileElement("
");
expect(element.attr('aria-required')).toBeUndefined();
compileElement("
");
expect(element.attr('aria-required')).toBeUndefined();
});
});
describe('aria-value', function() {
beforeEach(injectScopeAndCompiler);
it('should attach to input type="range"', function() {
var element = [
$compile('
')(scope),
$compile('
')(scope),
$compile('
')(scope)
];
scope.$apply('val = 50');
expectAriaAttrOnEachElement(element, 'aria-valuenow', "50");
expectAriaAttrOnEachElement(element, 'aria-valuemin', "0");
expectAriaAttrOnEachElement(element, 'aria-valuemax', "100");
scope.$apply('val = 90');
expectAriaAttrOnEachElement(element, 'aria-valuenow', "90");
});
it('should not attach if aria-value* is already present', function() {
var element = [
$compile('
')(scope),
$compile('
')(scope),
$compile('
')(scope)
];
scope.$apply('val = 50');
expectAriaAttrOnEachElement(element, 'aria-valuenow', 'userSetValue1');
expectAriaAttrOnEachElement(element, 'aria-valuemin', 'userSetValue2');
expectAriaAttrOnEachElement(element, 'aria-valuemax', 'userSetValue3');
});
it('should update `aria-valuemin/max` when `min/max` changes dynamically', function() {
scope.$apply('min = 25; max = 75');
compileElement('
');
expect(element.attr('aria-valuemin')).toBe('25');
expect(element.attr('aria-valuemax')).toBe('75');
scope.$apply('min = 0');
expect(element.attr('aria-valuemin')).toBe('0');
scope.$apply('max = 100');
expect(element.attr('aria-valuemax')).toBe('100');
});
it('should update `aria-valuemin/max` when `ng-min/ng-max` changes dynamically', function() {
scope.$apply('min = 25; max = 75');
compileElement('
');
expect(element.attr('aria-valuemin')).toBe('25');
expect(element.attr('aria-valuemax')).toBe('75');
scope.$apply('min = 0');
expect(element.attr('aria-valuemin')).toBe('0');
scope.$apply('max = 100');
expect(element.attr('aria-valuemax')).toBe('100');
});
});
describe('announcing ngMessages', function() {
beforeEach(injectScopeAndCompiler);
it('should attach aria-live', function() {
var element = [
$compile('
')(scope)
];
expectAriaAttrOnEachElement(element, 'aria-live', "assertive");
});
});
describe('aria-value when disabled', function() {
beforeEach(configAriaProvider({
ariaValue: false
}));
beforeEach(injectScopeAndCompiler);
it('should not attach itself', function() {
scope.$apply('val = 50');
compileElement('
');
expect(element.attr('aria-valuenow')).toBeUndefined();
expect(element.attr('aria-valuemin')).toBeUndefined();
expect(element.attr('aria-valuemax')).toBeUndefined();
compileElement('
');
expect(element.attr('aria-valuenow')).toBeUndefined();
expect(element.attr('aria-valuemin')).toBeUndefined();
expect(element.attr('aria-valuemax')).toBeUndefined();
});
});
describe('tabindex', function() {
beforeEach(injectScopeAndCompiler);
they('should not attach to native control $prop', {
'button': "
",
'a': "
",
'input[text]': "",
'input[radio]': "",
'input[checkbox]': "",
'textarea': "",
'select': "",
'details': " "
}, function(html) {
compileElement(html);
expect(element.attr('tabindex')).toBeUndefined();
});
it('should not attach to random ng-model elements', function() {
compileElement('');
expect(element.attr('tabindex')).toBeUndefined();
});
it('should attach tabindex to custom inputs', function() {
compileElement('');
expect(element.attr('tabindex')).toBe('0');
compileElement('');
expect(element.attr('tabindex')).toBe('0');
});
it('should attach to ng-click and ng-dblclick', function() {
compileElement('');
expect(element.attr('tabindex')).toBe('0');
compileElement('');
expect(element.attr('tabindex')).toBe('0');
});
it('should not attach tabindex if it is already on an element', function() {
compileElement('');
expect(element.attr('tabindex')).toBe('userSetValue');
compileElement('');
expect(element.attr('tabindex')).toBe('userSetValue');
compileElement('');
expect(element.attr('tabindex')).toBe('userSetValue');
compileElement('');
expect(element.attr('tabindex')).toBe('userSetValue');
});
});
describe('accessible actions', function() {
beforeEach(injectScopeAndCompiler);
var clickFn;
it('should trigger a click from the keyboard', function() {
scope.someAction = function() {};
var elements = $compile('')(scope);
scope.$digest();
clickFn = spyOn(scope, 'someAction');
var divElement = elements.find('div');
var liElement = elements.find('li');
divElement.triggerHandler({type: 'keypress', keyCode: 32});
liElement.triggerHandler({type: 'keypress', keyCode: 32});
expect(clickFn).toHaveBeenCalledWith('div');
expect(clickFn).toHaveBeenCalledWith('li');
});
it('should trigger a click in browsers that provide event.which instead of event.keyCode', function() {
scope.someAction = function() {};
var elements = $compile('')(scope);
scope.$digest();
clickFn = spyOn(scope, 'someAction');
var divElement = elements.find('div');
var liElement = elements.find('li');
divElement.triggerHandler({type: 'keypress', which: 32});
liElement.triggerHandler({type: 'keypress', which: 32});
expect(clickFn).toHaveBeenCalledWith('div');
expect(clickFn).toHaveBeenCalledWith('li');
});
it('should not override existing ng-keypress', function() {
scope.someOtherAction = function() {};
var keypressFn = spyOn(scope, 'someOtherAction');
scope.someAction = function() {};
clickFn = spyOn(scope, 'someAction');
compileElement('');
element.triggerHandler({type: 'keypress', keyCode: 32});
expect(clickFn).not.toHaveBeenCalled();
expect(keypressFn).toHaveBeenCalled();
});
it('should update bindings when keypress handled', function() {
compileElement('{{text}}
');
expect(element.text()).toBe('');
spyOn(scope.$root, '$digest').and.callThrough();
element.triggerHandler({ type: 'keypress', keyCode: 13 });
expect(element.text()).toBe('clicked!');
expect(scope.$root.$digest).toHaveBeenCalledOnce();
});
it('should pass $event to ng-click handler as local', function() {
compileElement('{{event.type}}' +
'{{event.keyCode}}
');
expect(element.text()).toBe('');
element.triggerHandler({ type: 'keypress', keyCode: 13 });
expect(element.text()).toBe('keypress13');
});
it('should not bind keypress to elements not in the default config', function() {
compileElement('');
expect(element.text()).toBe('');
element.triggerHandler({ type: 'keypress', keyCode: 13 });
expect(element.text()).toBe('');
});
});
describe('actions when bindRoleForClick is set to false', function() {
beforeEach(configAriaProvider({
bindRoleForClick: false
}));
beforeEach(injectScopeAndCompiler);
it('should not add a button role', function() {
compileElement('');
expect(element.attr('role')).toBeUndefined();
});
});
describe('actions when bindKeypress is set to false', function() {
beforeEach(configAriaProvider({
bindKeypress: false
}));
beforeEach(injectScopeAndCompiler);
it('should not a trigger click', function() {
scope.someAction = function() {};
var clickFn = spyOn(scope, 'someAction');
element = $compile('')(scope);
element.triggerHandler({type: 'keypress', keyCode: 32});
expect(clickFn).not.toHaveBeenCalled();
});
});
describe('tabindex when disabled', function() {
beforeEach(configAriaProvider({
tabindex: false
}));
beforeEach(injectScopeAndCompiler);
it('should not add a tabindex attribute', function() {
compileElement('');
expect(element.attr('tabindex')).toBeUndefined();
compileElement('');
expect(element.attr('tabindex')).toBeUndefined();
compileElement('');
expect(element.attr('tabindex')).toBeUndefined();
compileElement('');
expect(element.attr('tabindex')).toBeUndefined();
});
});
});
function expectAriaAttrOnEachElement(elem, ariaAttr, expected) {
angular.forEach(elem, function(val) {
expect(angular.element(val).attr(ariaAttr)).toBe(expected);
});
}
function configAriaProvider(config) {
return function() {
angular.module('ariaTest', ['ngAria']).config(function($ariaProvider) {
$ariaProvider.config(config);
});
module('ariaTest');
};
}