selection-tests.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. module('Accessibility - All');
  2. var BaseSelection = require('select2/selection/base');
  3. var SingleSelection = require('select2/selection/single');
  4. var MultipleSelection = require('select2/selection/multiple');
  5. var $ = require('jquery');
  6. var Options = require('select2/options');
  7. var options = new Options({});
  8. test('title is carried over from original element', function (assert) {
  9. var $select = $('#qunit-fixture .single');
  10. var selection = new BaseSelection($select, options);
  11. var $selection = selection.render();
  12. assert.equal(
  13. $selection.attr('title'),
  14. $select.attr('title'),
  15. 'The title should have been copied over from the original element'
  16. );
  17. });
  18. test('aria-expanded reflects the state of the container', function (assert) {
  19. var $select = $('#qunit-fixture .single');
  20. var selection = new BaseSelection($select, options);
  21. var $selection = selection.render();
  22. var container = new MockContainer();
  23. selection.bind(container, $('<span></span>'));
  24. assert.equal(
  25. $selection.attr('aria-expanded'),
  26. 'false',
  27. 'The container should not be expanded when it is closed'
  28. );
  29. container.trigger('open');
  30. assert.equal(
  31. $selection.attr('aria-expanded'),
  32. 'true',
  33. 'The container should be expanded when it is opened'
  34. );
  35. });
  36. test('static aria attributes are present', function (assert) {
  37. var $select = $('#qunit-fixture .single');
  38. var selection = new BaseSelection($select, options);
  39. var $selection = selection.render();
  40. assert.equal(
  41. $selection.attr('role'),
  42. 'combobox',
  43. 'The container should identify as a combobox'
  44. );
  45. assert.equal(
  46. $selection.attr('aria-haspopup'),
  47. 'true',
  48. 'The dropdown is considered a popup of the container'
  49. );
  50. assert.equal(
  51. $selection.attr('aria-autocomplete'),
  52. 'list',
  53. 'The results in the dropdown are the autocomplete list'
  54. );
  55. });
  56. test('aria-activedescendant should be removed when closed', function (assert) {
  57. var $select = $('#qunit-fixture .single');
  58. var selection = new BaseSelection($select, options);
  59. var $selection = selection.render();
  60. var container = new MockContainer();
  61. selection.bind(container, $('<span></span>'));
  62. $selection.attr('aria-activedescendant', 'something');
  63. container.trigger('close');
  64. assert.ok(
  65. !$selection.attr('aria-activedescendant'),
  66. 'There is no active descendant when the dropdown is closed'
  67. );
  68. });
  69. test('the container should be in the tab order', function (assert) {
  70. var $select = $('#qunit-fixture .single');
  71. var selection = new BaseSelection($select, options);
  72. var $selection = selection.render();
  73. var container = new MockContainer();
  74. selection.bind(container, $('<span></span>'));
  75. assert.equal(
  76. $selection.attr('tabindex'),
  77. '0',
  78. 'The tab index should allow it to fit in the natural tab order'
  79. );
  80. container.trigger('disable');
  81. assert.equal(
  82. $selection.attr('tabindex'),
  83. '-1',
  84. 'The selection should be dropped out of the tab order when disabled'
  85. );
  86. container.trigger('enable');
  87. assert.equal(
  88. $selection.attr('tabindex'),
  89. '0',
  90. 'The tab index should be restored when re-enabled'
  91. );
  92. });
  93. test('a custom tabindex is copied', function (assert) {
  94. var $select = $('#qunit-fixture .single');
  95. $select.attr('tabindex', '999');
  96. var selection = new BaseSelection($select, options);
  97. var $selection = selection.render();
  98. var container = new MockContainer();
  99. selection.bind(container, $('<span></span>'));
  100. assert.equal(
  101. $selection.attr('tabindex'),
  102. '999',
  103. 'The tab index should match the original tab index'
  104. );
  105. container.trigger('disable');
  106. assert.equal(
  107. $selection.attr('tabindex'),
  108. '-1',
  109. 'The selection should be dropped out of the tab order when disabled'
  110. );
  111. container.trigger('enable');
  112. assert.equal(
  113. $selection.attr('tabindex'),
  114. '999',
  115. 'The tab index should be restored when re-enabled'
  116. );
  117. });
  118. module('Accessibility - Single');
  119. test('aria-labelledby should match the rendered container', function (assert) {
  120. var $select = $('#qunit-fixture .single');
  121. var selection = new SingleSelection($select, options);
  122. var $selection = selection.render();
  123. var container = new MockContainer();
  124. selection.bind(container, $('<span></span>'));
  125. var $rendered = $selection.find('.select2-selection__rendered');
  126. assert.equal(
  127. $selection.attr('aria-labelledby'),
  128. $rendered.attr('id'),
  129. 'The rendered selection should label the container'
  130. );
  131. });
  132. module('Accessibility - Multiple');