No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

search-a11y-tests.js 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. module('Dropdown - Search - Accessibility');
  2. var Utils = require('select2/utils');
  3. var Dropdown = require('select2/dropdown');
  4. var DropdownSearch = Utils.Decorate(
  5. Dropdown,
  6. require('select2/dropdown/search')
  7. );
  8. var $ = require('jquery');
  9. var Options = require('select2/options');
  10. var options = new Options({});
  11. test('role attribute is set to searchbox', function (assert) {
  12. var $select = $('#qunit-fixture .single');
  13. var dropdown = new DropdownSearch($select, options);
  14. var $dropdown = dropdown.render();
  15. var container = new MockContainer();
  16. dropdown.bind(container, $('<span></span>'));
  17. assert.equal(
  18. $dropdown.find('input').attr('role'),
  19. 'searchbox',
  20. 'The search box is marked as a search box'
  21. );
  22. });
  23. test('aria-autocomplete attribute is present', function (assert) {
  24. var $select = $('#qunit-fixture .single');
  25. var dropdown = new DropdownSearch($select, options);
  26. var $dropdown = dropdown.render();
  27. var container = new MockContainer();
  28. dropdown.bind(container, $('<span></span>'));
  29. assert.equal(
  30. $dropdown.find('input').attr('aria-autocomplete'),
  31. 'list',
  32. 'The search box is marked as autocomplete'
  33. );
  34. });
  35. test('aria-activedescendant should not be set initiailly', function (assert) {
  36. var $select = $('#qunit-fixture .single');
  37. var dropdown = new DropdownSearch($select, options);
  38. var $dropdown = dropdown.render();
  39. var container = new MockContainer();
  40. dropdown.bind(container, $('<span></span>'));
  41. var $search = $dropdown.find('input');
  42. assert.ok(
  43. !$search.attr('aria-activedescendant'),
  44. 'The search box should not point to anything when it is first rendered'
  45. );
  46. });
  47. test('aria-activedescendant should be set after highlight', function (assert) {
  48. var $select = $('#qunit-fixture .single');
  49. var dropdown = new DropdownSearch($select, options);
  50. var $dropdown = dropdown.render();
  51. var container = new MockContainer();
  52. dropdown.bind(container, $('<span></span>'));
  53. container.trigger('results:focus', {
  54. data: {
  55. _resultId: 'test'
  56. }
  57. });
  58. var $search = $dropdown.find('input');
  59. assert.equal(
  60. $search.attr('aria-activedescendant'),
  61. 'test',
  62. 'The search is pointing to the focused result'
  63. );
  64. });
  65. test('activedescendant should remove if there is no ID', function (assert) {
  66. var $select = $('#qunit-fixture .single');
  67. var dropdown = new DropdownSearch($select, options);
  68. var $dropdown = dropdown.render();
  69. var container = new MockContainer();
  70. dropdown.bind(container, $('<span></span>'));
  71. var $search = $dropdown.find('input');
  72. $search.attr('aria-activedescendant', 'test');
  73. container.trigger('results:focus', {
  74. data: {}
  75. });
  76. assert.ok(
  77. !$search.attr('aria-activedescendant'),
  78. 'There is no result for the search to be pointing to'
  79. );
  80. });
  81. test('aria-activedescendant should be removed when closed', function (assert) {
  82. var $select = $('#qunit-fixture .single');
  83. var dropdown = new DropdownSearch($select, options);
  84. var $dropdown = dropdown.render();
  85. var container = new MockContainer();
  86. dropdown.bind(container, $('<span></span>'));
  87. var $search = $dropdown.find('input');
  88. $search.attr('aria-activedescendant', 'something');
  89. container.trigger('close');
  90. assert.ok(
  91. !$search.attr('aria-activedescendant'),
  92. 'There is no active descendant when the dropdown is closed'
  93. );
  94. });
  95. test('aria-controls should not be set initiailly', function (assert) {
  96. var $select = $('#qunit-fixture .single');
  97. var dropdown = new DropdownSearch($select, options);
  98. var $dropdown = dropdown.render();
  99. var container = new MockContainer();
  100. dropdown.bind(container, $('<span></span>'));
  101. var $search = $dropdown.find('input');
  102. assert.ok(
  103. !$search.attr('aria-controls'),
  104. 'The search box should not point to the results when it is first rendered'
  105. );
  106. });
  107. test('aria-controls should be set when opened', function (assert) {
  108. var $select = $('#qunit-fixture .single');
  109. var dropdown = new DropdownSearch($select, options);
  110. var $dropdown = dropdown.render();
  111. var container = new MockContainer();
  112. dropdown.bind(container, $('<span></span>'));
  113. var $search = $dropdown.find('input');
  114. container.trigger('open');
  115. assert.ok(
  116. $search.attr('aria-controls'),
  117. 'The search should point to the results when it is opened'
  118. );
  119. });
  120. test('aria-controls should be removed when closed', function (assert) {
  121. var $select = $('#qunit-fixture .single');
  122. var dropdown = new DropdownSearch($select, options);
  123. var $dropdown = dropdown.render();
  124. var container = new MockContainer();
  125. dropdown.bind(container, $('<span></span>'));
  126. var $search = $dropdown.find('input');
  127. $search.attr('aria-controls', 'something');
  128. container.trigger('close');
  129. assert.ok(
  130. !$search.attr('aria-controls'),
  131. 'There are no results for the search box to point to when it is closed'
  132. );
  133. });