From 40fcf3416bdfaf854d758160f7b21b9a7bec7303 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Sun, 21 Jul 2019 20:01:33 -0400 Subject: [PATCH] Set aria-controls instead of aria-owns on search boxes In ARIA 1.1, there was a switch to use `aria-controls` on the search box to point to the results list instead of using `aria-owns`. This is required because the `combobox`, in our case the selection container, should have the `aria-owns` attribute pointing to the results list. And because only one elment can own another element, we must fall back to `aria-controls` to represent that relationship. The tests have also been adjusted to reflect this new discovery. --- src/js/select2/dropdown/search.js | 4 ++-- src/js/select2/selection/search.js | 4 ++-- tests/dropdown/search-a11y-tests.js | 14 +++++++------- tests/selection/search-a11y-tests.js | 14 +++++++------- 4 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/js/select2/dropdown/search.js b/src/js/select2/dropdown/search.js index 1c619717d8..2700e06d9c 100644 --- a/src/js/select2/dropdown/search.js +++ b/src/js/select2/dropdown/search.js @@ -50,7 +50,7 @@ define([ container.on('open', function () { self.$search.attr('tabindex', 0); - self.$search.attr('aria-owns', resultsId); + self.$search.attr('aria-controls', resultsId); self.$search.trigger('focus'); @@ -61,7 +61,7 @@ define([ container.on('close', function () { self.$search.attr('tabindex', -1); - self.$search.removeAttr('aria-owns'); + self.$search.removeAttr('aria-controls'); self.$search.removeAttr('aria-activedescendant'); self.$search.val(''); diff --git a/src/js/select2/selection/search.js b/src/js/select2/selection/search.js index 99351648ed..dd889d2e5e 100644 --- a/src/js/select2/selection/search.js +++ b/src/js/select2/selection/search.js @@ -34,13 +34,13 @@ define([ decorated.call(this, container, $container); container.on('open', function () { - self.$search.attr('aria-owns', resultsId); + self.$search.attr('aria-controls', resultsId); self.$search.trigger('focus'); }); container.on('close', function () { self.$search.val(''); - self.$search.removeAttr('aria-owns'); + self.$search.removeAttr('aria-controls'); self.$search.removeAttr('aria-activedescendant'); self.$search.trigger('focus'); }); diff --git a/tests/dropdown/search-a11y-tests.js b/tests/dropdown/search-a11y-tests.js index 91f6fae03a..0876de9fff 100644 --- a/tests/dropdown/search-a11y-tests.js +++ b/tests/dropdown/search-a11y-tests.js @@ -128,7 +128,7 @@ test('aria-activedescendant should be removed when closed', function (assert) { ); }); -test('aria-owns should not be set initiailly', function (assert) { +test('aria-controls should not be set initiailly', function (assert) { var $select = $('#qunit-fixture .single'); var dropdown = new DropdownSearch($select, options); @@ -140,12 +140,12 @@ test('aria-owns should not be set initiailly', function (assert) { var $search = $dropdown.find('input'); assert.ok( - !$search.attr('aria-owns'), + !$search.attr('aria-controls'), 'The search box should not point to the results when it is first rendered' ); }); -test('aria-owns should be set when opened', function (assert) { +test('aria-controls should be set when opened', function (assert) { var $select = $('#qunit-fixture .single'); var dropdown = new DropdownSearch($select, options); @@ -159,12 +159,12 @@ test('aria-owns should be set when opened', function (assert) { container.trigger('open'); assert.ok( - $search.attr('aria-owns'), + $search.attr('aria-controls'), 'The search should point to the results when it is opened' ); }); -test('aria-owns should be removed when closed', function (assert) { +test('aria-controls should be removed when closed', function (assert) { var $select = $('#qunit-fixture .single'); var dropdown = new DropdownSearch($select, options); @@ -174,12 +174,12 @@ test('aria-owns should be removed when closed', function (assert) { dropdown.bind(container, $('')); var $search = $dropdown.find('input'); - $search.attr('aria-owns', 'something'); + $search.attr('aria-controls', 'something'); container.trigger('close'); assert.ok( - !$search.attr('aria-owns'), + !$search.attr('aria-controls'), 'There are no results for the search box to point to when it is closed' ); }); diff --git a/tests/selection/search-a11y-tests.js b/tests/selection/search-a11y-tests.js index 569ff31b5e..b2628df565 100644 --- a/tests/selection/search-a11y-tests.js +++ b/tests/selection/search-a11y-tests.js @@ -148,7 +148,7 @@ test('aria-activedescendant should be removed when closed', function (assert) { ); }); -test('aria-owns should not be set initiailly', function (assert) { +test('aria-controls should not be set initiailly', function (assert) { var $select = $('#qunit-fixture .multiple'); var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch); @@ -164,12 +164,12 @@ test('aria-owns should not be set initiailly', function (assert) { var $search = $selection.find('input'); assert.ok( - !$search.attr('aria-owns'), + !$search.attr('aria-controls'), 'The search box should not point to the results when it is first rendered' ); }); -test('aria-owns should be set when opened', function (assert) { +test('aria-controls should be set when opened', function (assert) { var $select = $('#qunit-fixture .multiple'); var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch); @@ -187,12 +187,12 @@ test('aria-owns should be set when opened', function (assert) { container.trigger('open'); assert.ok( - $search.attr('aria-owns'), + $search.attr('aria-controls'), 'The search should point to the results when it is opened' ); }); -test('aria-owns should be removed when closed', function (assert) { +test('aria-controls should be removed when closed', function (assert) { var $select = $('#qunit-fixture .multiple'); var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch); @@ -206,12 +206,12 @@ test('aria-owns should be removed when closed', function (assert) { selection.update([]); var $search = $selection.find('input'); - $search.attr('aria-owns', 'something'); + $search.attr('aria-controls', 'something'); container.trigger('close'); assert.ok( - !$search.attr('aria-owns'), + !$search.attr('aria-controls'), 'There are no results for the search box to point to when it is closed' ); });