Mirror disabled state through aria-disabled on selection (#5579)
This is needed to screen readers know that the Select2 is disabled when focus is put on the selection container. Because we were mirroring the disabled state to the search input on a multiple select in the past, this is really only needed for single select elements which would not otherwise has the disabled property. This was identified in a previous accessibility audit as being something which Select2 did not properly report because we were not setting the attributes properly. Fixes #4575
This commit is contained in:
parent
eeefa1e449
commit
89576153a0
3
src/js/select2/selection/base.js
vendored
3
src/js/select2/selection/base.js
vendored
@ -29,6 +29,7 @@ define([
|
||||
|
||||
$selection.attr('title', this.$element.attr('title'));
|
||||
$selection.attr('tabindex', this._tabindex);
|
||||
$selection.attr('aria-disabled', 'false');
|
||||
|
||||
this.$selection = $selection;
|
||||
|
||||
@ -88,10 +89,12 @@ define([
|
||||
|
||||
container.on('enable', function () {
|
||||
self.$selection.attr('tabindex', self._tabindex);
|
||||
self.$selection.attr('aria-disabled', 'false');
|
||||
});
|
||||
|
||||
container.on('disable', function () {
|
||||
self.$selection.attr('tabindex', '-1');
|
||||
self.$selection.attr('aria-disabled', 'true');
|
||||
});
|
||||
};
|
||||
|
||||
|
@ -131,6 +131,38 @@ test('a custom tabindex is copied', function (assert) {
|
||||
);
|
||||
});
|
||||
|
||||
test('aria-disabled should reflected disabled state', function (assert) {
|
||||
var $select = $('#qunit-fixture .single');
|
||||
|
||||
var selection = new BaseSelection($select, options);
|
||||
var $selection = selection.render();
|
||||
|
||||
var container = new MockContainer();
|
||||
selection.bind(container, $('<span></span>'));
|
||||
|
||||
assert.equal(
|
||||
$selection.attr('aria-disabled'),
|
||||
'false',
|
||||
'The tab index should match the original tab index'
|
||||
);
|
||||
|
||||
container.trigger('disable');
|
||||
|
||||
assert.equal(
|
||||
$selection.attr('aria-disabled'),
|
||||
'true',
|
||||
'The selection should be dropped out of the tab order when disabled'
|
||||
);
|
||||
|
||||
container.trigger('enable');
|
||||
|
||||
assert.equal(
|
||||
$selection.attr('aria-disabled'),
|
||||
'false',
|
||||
'The tab index should be restored when re-enabled'
|
||||
);
|
||||
});
|
||||
|
||||
module('Accessibility - Single');
|
||||
|
||||
test('aria-labelledby should match the rendered container', function (assert) {
|
||||
|
Loading…
Reference in New Issue
Block a user