selection-tests.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  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. });
  51. test('the container should be in the tab order', function (assert) {
  52. var $select = $('#qunit-fixture .single');
  53. var selection = new BaseSelection($select, options);
  54. var $selection = selection.render();
  55. var container = new MockContainer();
  56. selection.bind(container, $('<span></span>'));
  57. assert.equal(
  58. $selection.attr('tabindex'),
  59. '0',
  60. 'The tab index should allow it to fit in the natural tab order'
  61. );
  62. container.trigger('disable');
  63. assert.equal(
  64. $selection.attr('tabindex'),
  65. '-1',
  66. 'The selection should be dropped out of the tab order when disabled'
  67. );
  68. container.trigger('enable');
  69. assert.equal(
  70. $selection.attr('tabindex'),
  71. '0',
  72. 'The tab index should be restored when re-enabled'
  73. );
  74. });
  75. test('a custom tabindex is copied', function (assert) {
  76. var $select = $('#qunit-fixture .single');
  77. $select.attr('tabindex', '999');
  78. var selection = new BaseSelection($select, options);
  79. var $selection = selection.render();
  80. var container = new MockContainer();
  81. selection.bind(container, $('<span></span>'));
  82. assert.equal(
  83. $selection.attr('tabindex'),
  84. '999',
  85. 'The tab index should match the original tab index'
  86. );
  87. container.trigger('disable');
  88. assert.equal(
  89. $selection.attr('tabindex'),
  90. '-1',
  91. 'The selection should be dropped out of the tab order when disabled'
  92. );
  93. container.trigger('enable');
  94. assert.equal(
  95. $selection.attr('tabindex'),
  96. '999',
  97. 'The tab index should be restored when re-enabled'
  98. );
  99. });
  100. module('Accessibility - Single');
  101. test('aria-labelledby should match the rendered container', function (assert) {
  102. var $select = $('#qunit-fixture .single');
  103. var selection = new SingleSelection($select, options);
  104. var $selection = selection.render();
  105. var container = new MockContainer();
  106. selection.bind(container, $('<span></span>'));
  107. var $rendered = $selection.find('.select2-selection__rendered');
  108. assert.equal(
  109. $selection.attr('aria-labelledby'),
  110. $rendered.attr('id'),
  111. 'The rendered selection should label the container'
  112. );
  113. });
  114. module('Accessibility - Multiple');