select2/tests/a11y/selection-tests.js

QUnit.module('Accessibility - All');

var BaseSelection = require('select2/selection/base');
var SingleSelection = require('select2/selection/single');
var MultipleSelection = require('select2/selection/multiple');

var $ = require('jquery');

var Options = require('select2/options');
var options = new Options({});

QUnit.test('title is carried over from original element', function (assert) {
  var $select = $('#qunit-fixture .single');

  var selection = new BaseSelection($select, options);
  var $selection = selection.render();

  assert.equal(
    $selection.attr('title'),
    $select.attr('title'),
    'The title should have been copied over from the original element'
  );
});

QUnit.test(
  'aria-expanded reflects the state of the container',
  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>'));

    assert.equal(
      $selection.attr('aria-expanded'),
      'false',
      'The container should not be expanded when it is closed'
    );

    container.trigger('open');

    assert.equal(
      $selection.attr('aria-expanded'),
      'true',
      'The container should be expanded when it is opened'
    );
  }
);

QUnit.test('static aria attributes are present', function (assert) {
  var $select = $('#qunit-fixture .single');

  var selection = new BaseSelection($select, options);
  var $selection = selection.render();

  assert.equal(
    $selection.attr('role'),
    'combobox',
    'The container should identify as a combobox'
  );

  assert.equal(
    $selection.attr('aria-haspopup'),
    'true',
    'The dropdown is considered a popup of the container'
  );
});

QUnit.test('the container should be in the tab order', 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>'));

  assert.equal(
    $selection.attr('tabindex'),
    '0',
    'The tab index should allow it to fit in the natural tab order'
  );

  container.trigger('disable');

  assert.equal(
    $selection.attr('tabindex'),
    '-1',
    'The selection should be dropped out of the tab order when disabled'
  );

  container.trigger('enable');

  assert.equal(
    $selection.attr('tabindex'),
    '0',
    'The tab index should be restored when re-enabled'
  );
});

QUnit.test('a custom tabindex is copied', function (assert) {
  var $select = $('#qunit-fixture .single');
  $select.attr('tabindex', '999');

  var selection = new BaseSelection($select, options);
  var $selection = selection.render();

  var container = new MockContainer();
  selection.bind(container, $('<span></span>'));

  assert.equal(
    $selection.attr('tabindex'),
    '999',
    'The tab index should match the original tab index'
  );

  container.trigger('disable');

  assert.equal(
    $selection.attr('tabindex'),
    '-1',
    'The selection should be dropped out of the tab order when disabled'
  );

  container.trigger('enable');

  assert.equal(
    $selection.attr('tabindex'),
    '999',
    'The tab index should be restored when re-enabled'
  );
});

QUnit.test('aria-disabled should reflected disabled state', 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>'));

  assert.equal(
    $selection.attr('aria-disabled'),
    'false',
    'The tab index should match the original tab index'
  );

  container.trigger('disable');

  assert.equal(
    $selection.attr('aria-disabled'),
    'true',
    'The selection should be dropped out of the tab order when disabled'
  );

  container.trigger('enable');

  assert.equal(
    $selection.attr('aria-disabled'),
    'false',
    'The tab index should be restored when re-enabled'
  );
});

QUnit.module('Accessibility - Single');

QUnit.test(
  'aria-labelledby should match the rendered container',
  function (assert) {
    var $select = $('#qunit-fixture .single');

    var selection = new SingleSelection($select, options);
    var $selection = selection.render();

    var container = new MockContainer();
    selection.bind(container, $('<span></span>'));

    var $rendered = $selection.find('.select2-selection__rendered');

    assert.equal(
      $selection.attr('aria-labelledby'),
      $rendered.attr('id'),
      'The rendered selection should label the container'
    );
  }
);

QUnit.module('Accessibility - Multiple');