123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- module('Dropdown - Search - Accessibility');
-
- var Utils = require('select2/utils');
-
- var Dropdown = require('select2/dropdown');
- var DropdownSearch = Utils.Decorate(
- Dropdown,
- require('select2/dropdown/search')
- );
-
- var $ = require('jquery');
-
- var Options = require('select2/options');
- var options = new Options({});
-
- test('role attribute is set to searchbox', function (assert) {
- var $select = $('#qunit-fixture .single');
-
- var dropdown = new DropdownSearch($select, options);
- var $dropdown = dropdown.render();
-
- var container = new MockContainer();
- dropdown.bind(container, $('<span></span>'));
-
- assert.equal(
- $dropdown.find('input').attr('role'),
- 'searchbox',
- 'The search box is marked as a search box'
- );
- });
-
- test('aria-autocomplete attribute is present', function (assert) {
- var $select = $('#qunit-fixture .single');
-
- var dropdown = new DropdownSearch($select, options);
- var $dropdown = dropdown.render();
-
- var container = new MockContainer();
- dropdown.bind(container, $('<span></span>'));
-
- assert.equal(
- $dropdown.find('input').attr('aria-autocomplete'),
- 'list',
- 'The search box is marked as autocomplete'
- );
- });
-
- test('aria-activedescendant should not be set initiailly', function (assert) {
- var $select = $('#qunit-fixture .single');
-
- var dropdown = new DropdownSearch($select, options);
- var $dropdown = dropdown.render();
-
- var container = new MockContainer();
- dropdown.bind(container, $('<span></span>'));
-
- var $search = $dropdown.find('input');
-
- assert.ok(
- !$search.attr('aria-activedescendant'),
- 'The search box should not point to anything when it is first rendered'
- );
- });
-
- test('aria-activedescendant should be set after highlight', function (assert) {
- var $select = $('#qunit-fixture .single');
-
- var dropdown = new DropdownSearch($select, options);
- var $dropdown = dropdown.render();
-
- var container = new MockContainer();
- dropdown.bind(container, $('<span></span>'));
-
- container.trigger('results:focus', {
- data: {
- _resultId: 'test'
- }
- });
-
- var $search = $dropdown.find('input');
-
- assert.equal(
- $search.attr('aria-activedescendant'),
- 'test',
- 'The search is pointing to the focused result'
- );
- });
-
- test('activedescendant should remove if there is no ID', function (assert) {
- var $select = $('#qunit-fixture .single');
-
- var dropdown = new DropdownSearch($select, options);
- var $dropdown = dropdown.render();
-
- var container = new MockContainer();
- dropdown.bind(container, $('<span></span>'));
-
- var $search = $dropdown.find('input');
- $search.attr('aria-activedescendant', 'test');
-
- container.trigger('results:focus', {
- data: {}
- });
-
- assert.ok(
- !$search.attr('aria-activedescendant'),
- 'There is no result for the search to be pointing to'
- );
- });
-
- test('aria-activedescendant should be removed when closed', function (assert) {
- var $select = $('#qunit-fixture .single');
-
- var dropdown = new DropdownSearch($select, options);
- var $dropdown = dropdown.render();
-
- var container = new MockContainer();
- dropdown.bind(container, $('<span></span>'));
-
- var $search = $dropdown.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'
- );
- });
-
- test('aria-controls should not be set initiailly', function (assert) {
- var $select = $('#qunit-fixture .single');
-
- var dropdown = new DropdownSearch($select, options);
- var $dropdown = dropdown.render();
-
- var container = new MockContainer();
- dropdown.bind(container, $('<span></span>'));
-
- var $search = $dropdown.find('input');
-
- assert.ok(
- !$search.attr('aria-controls'),
- 'The search box should not point to the results when it is first rendered'
- );
- });
-
- test('aria-controls should be set when opened', function (assert) {
- var $select = $('#qunit-fixture .single');
-
- var dropdown = new DropdownSearch($select, options);
- var $dropdown = dropdown.render();
-
- var container = new MockContainer();
- dropdown.bind(container, $('<span></span>'));
-
- var $search = $dropdown.find('input');
-
- container.trigger('open');
-
- assert.ok(
- $search.attr('aria-controls'),
- 'The search should point to the results when it is opened'
- );
- });
-
- test('aria-controls should be removed when closed', function (assert) {
- var $select = $('#qunit-fixture .single');
-
- var dropdown = new DropdownSearch($select, options);
- var $dropdown = dropdown.render();
-
- var container = new MockContainer();
- dropdown.bind(container, $('<span></span>'));
-
- var $search = $dropdown.find('input');
- $search.attr('aria-controls', 'something');
-
- container.trigger('close');
-
- assert.ok(
- !$search.attr('aria-controls'),
- 'There are no results for the search box to point to when it is closed'
- );
- });
|