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

@@ -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('');

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');
     });

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, $('<span></span>'));
 
   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'
   );
 });

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'
   );
 });