Add tests for accessible search results

Author: binary-koan

tests/a11y/search-tests.js

@@ -0,0 +1,51 @@
+module('Accessibility - Search');
+
+var MultipleSelection = require('select2/selection/multiple');
+var InlineSearch = require('select2/selection/search');
+
+var $ = require('jquery');
+
+var Utils = require('select2/utils');
+var Options = require('select2/options');
+var options = new Options({});
+
+test('aria-autocomplete 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();
+
+  // Update the selection so the search is rendered
+  selection.update([]);
+
+  assert.equal(
+    $selection.find('input').attr('aria-autocomplete'),
+    'list',
+    'The search box is marked as autocomplete'
+  );
+});
+
+test('aria-activedescendant should be removed when closed', 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([]);
+
+  var $search = $selection.find('input');
+  $search.attr('aria-activedescendant', 'something');
+
+  container.trigger('close');
+
+  assert.ok(
+    !$search.attr('aria-activedescendant'),
+    'There is no active descendant when the dropdown is closed'
+  );
+});

tests/a11y/selection-tests.js

@@ -64,31 +64,6 @@ test('static aria attributes are present', function (assert) {
     'true',
     'The dropdown is considered a popup of the container'
   );
-
-  assert.equal(
-    $selection.attr('aria-autocomplete'),
-    'list',
-    'The results in the dropdown are the autocomplete list'
-  );
-});
-
-test('aria-activedescendant should be removed when closed', 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>'));
-
-  $selection.attr('aria-activedescendant', 'something');
-
-  container.trigger('close');
-
-  assert.ok(
-    !$selection.attr('aria-activedescendant'),
-    'There is no active descendant when the dropdown is closed'
-  );
 });
 
 test('the container should be in the tab order', function (assert) {

tests/unit.html

@@ -55,6 +55,7 @@
     <script src="helpers.js" type="text/javascript"></script>
 
     <script src="a11y/selection-tests.js" type="text/javascript"></script>
+    <script src="a11y/search-tests.js" type="text/javascript"></script>
 
     <script src="data/array-tests.js" type="text/javascript"></script>
     <script src="data/base-tests.js" type="text/javascript"></script>