diff --git a/src/js/select2/selection/base.js b/src/js/select2/selection/base.js index d79c960b..b83c2688 100644 --- a/src/js/select2/selection/base.js +++ b/src/js/select2/selection/base.js @@ -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'); }); }; diff --git a/tests/a11y/selection-tests.js b/tests/a11y/selection-tests.js index e2c14602..b2f1b2e4 100644 --- a/tests/a11y/selection-tests.js +++ b/tests/a11y/selection-tests.js @@ -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, $('')); + + 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) {