Add aria-label 'Search' to search input when dropdown opens. (#5824)

* Add aria-label 'Search' to search input when dropdown opens.

* Fixex per review comments. Added test cases.

src/js/select2/dropdown/search.js

@@ -5,6 +5,7 @@ define([
 
   Search.prototype.render = function (decorated) {
     var $rendered = decorated.call(this);
+    var searchLabel = this.options.get('translations').get('search');
 
     var $search = $(
       '<span class="select2-search select2-search--dropdown">' +
@@ -18,6 +19,7 @@ define([
     this.$search = $search.find('input');
 
     this.$search.prop('autocomplete', this.options.get('autocomplete'));
+    this.$search.attr('aria-label', searchLabel());
 
     $rendered.prepend($search);
 

src/js/select2/i18n/en.js

@@ -45,6 +45,9 @@ define(function () {
     },
     removeItem: function () {
       return 'Remove item';
+    },
+    search: function() {
+      return 'Search';
     }
   };
 });

src/js/select2/selection/search.js

@@ -8,6 +8,7 @@ define([
   }
 
   Search.prototype.render = function (decorated) {
+    var searchLabel = this.options.get('translations').get('search');
     var $search = $(
       '<span class="select2-search select2-search--inline">' +
         '<input class="select2-search__field" type="search" tabindex="-1"' +
@@ -20,6 +21,7 @@ define([
     this.$search = $search.find('input');
 
     this.$search.prop('autocomplete', this.options.get('autocomplete'));
+    this.$search.attr('aria-label', searchLabel());
 
     var $rendered = decorated.call(this);
 

tests/dropdown/search-a11y-tests.js

@@ -183,3 +183,19 @@ test('aria-controls should be removed when closed', function (assert) {
     'There are no results for the search box to point to when it is closed'
   );
 });
+
+test('aria-label attribute is present', function (assert) {
+  var $select = $('#qunit-fixture .single');
+
+  var dropdown = new DropdownSearch($select, options);
+  var $dropdown = dropdown.render();
+
+  var container = new MockContainer();
+  dropdown.bind(container, $('<span></span>'));
+
+  assert.equal(
+    $dropdown.find('input').attr('aria-label'),
+    'Search',
+    'The search box has a label'
+  );
+});

tests/options/translation-tests.js

@@ -53,7 +53,8 @@ test(
         'noResults',
         'searching',
         'removeAllItems',
-        'removeItem'
+        'removeItem',
+        'search'
       ]
     );
   }

tests/selection/search-a11y-tests.js

@@ -215,3 +215,23 @@ test('aria-controls should be removed when closed', function (assert) {
     'There are no results for the search box to point to when it is closed'
   );
 });
+
+test('aria-label attribute is present', function (assert) {
+  var $select = $('#qunit-fixture .multiple');
+
+  var CustomSelection = Utils.Decorate(MultipleSelection, InlineSearch);
+  var selection = new CustomSelection($select, options);
+  var $selection = selection.render();
+
+  var container = new MockContainer();
+  selection.bind(container, $('<span></span>'));
+
+  // Update the selection so the search is rendered
+  selection.update([]);
+
+  assert.equal(
+    $selection.find('input').attr('aria-label'),
+    'Search',
+    'The search box has a label'
+  );
+});