1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
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({});
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'
);
});
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'
);
});
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'
);
});
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'
);
});
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'
);
});
module('Accessibility - Single');
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'
);
});
module('Accessibility - Multiple');
|
