Skip to content

Commit 5a7788c

Browse files
mauromascarenhasmauromascarenhas
committed
test(select): select accessibility
- Add "id" to select elements + "for" references in labels; - Added accessibility tests to spec.
1 parent 54f9861 commit 5a7788c

File tree

2 files changed

+53
-24
lines changed

2 files changed

+53
-24
lines changed

‎test/html/select.html

+22-22
Original file line numberDiff line numberDiff line change
@@ -30,33 +30,33 @@
3030

3131
<div class="row">
3232
<div class="input-field col s12 m6">
33-
<select>
33+
<select id="select-test-1">
3434
<option value="" disabled selected>Choose your option</option>
3535
<option value="1">Option 1</option>
3636
<option value="2">Option 2</option>
3737
<option value="3">Option 3</option>
3838
</select>
39-
<label>Single-Select</label>
39+
<label for="select-test-1">Single-Select</label>
4040
<div>
4141
<button class="btn1">Get Single-Select Values</button>
4242
</div>
4343
</div>
4444
<div class="input-field col s12 m6">
45-
<select multiple>
45+
<select id="select-test-2" multiple>
4646
<option value="" disabled>Choose your option</option>
4747
<option value="1">Option 1</option>
4848
<option value="2">Option 2</option>
4949
<option value="3">Option 3</option>
5050
</select>
51-
<label>Multi-Select</label>
51+
<label for="select-test-2">Multi-Select</label>
5252
<div>
5353
<button class="btn2">Get Multi-Select Values</button>
5454
</div>
5555
</div>
5656
</div>
5757

5858
<div class="input-field col s12">
59-
<select>
59+
<select id="select-test-3">
6060
<optgroup label="team 1">
6161
<option value="1">Option 1</option>
6262
<option value="2">Option 2</option>
@@ -66,44 +66,44 @@
6666
<option value="4">Option 4</option>
6767
</optgroup>
6868
</select>
69-
<label>Single-Select with Optgroups</label>
69+
<label for="select-test-3">Single-Select with Optgroups</label>
7070
</div>
7171

7272
<div class="row">
7373
<h5>Selects with Images</h5>
7474
<div class="input-field col s12 m6">
75-
<select class="icons">
75+
<select id="select-test-4" class="icons">
7676
<option value="" disabled selected>Choose your option</option>
7777
<option value="" data-icon="../../docs/images/placeholder/250x250_a.png">example 1</option>
7878
<option value="" data-icon="../../docs/images/placeholder/250x250_b.png">example 2</option>
7979
<option value="" data-icon="../../docs/images/placeholder/250x250_c.png">example 3</option>
8080
</select>
81-
<label>Single-Select with Images (right)</label>
81+
<label for="select-test-4">Single-Select with Images (right)</label>
8282
</div>
8383
<div class="input-field col s12 m6">
84-
<select class="icons">
84+
<select id="select-test-5" class="icons">
8585
<option value="" disabled selected>Choose your option</option>
8686
<option value="" data-icon="../../docs/images/placeholder/250x250_a.png" class="left">example 1</option>
8787
<option value="" data-icon="../../docs/images/placeholder/250x250_b.png" class="left">example 2</option>
8888
<option value="" data-icon="../../docs/images/placeholder/250x250_c.png" class="left">example 3</option>
8989
</select>
90-
<label>Single-Select with Images (left)</label>
90+
<label for="select-test-5">Single-Select with Images (left)</label>
9191
</div>
9292
</div>
9393

9494
<div class="row">
9595
<h5>Select with selected Options</h5>
9696
<div class="input-field col s12 m6">
97-
<select>
97+
<select id="select-test-6">
9898
<option value="" disabled>Choose your option</option>
9999
<option value="1">Option 1</option>
100100
<option value="2" selected>Option 2</option>
101101
<option value="3">Option 3</option>
102102
</select>
103-
<label>Single-Select with Value set</label>
103+
<label for="select-test-6">Single-Select with Value set</label>
104104
</div>
105105
<div class="input-field col s12 m6">
106-
<select multiple class="icons">
106+
<select id="select-test-7" multiple class="icons">
107107
<option value="" disabled selected>Choose your option</option>
108108
<option value="1" selected data-icon="../../docs/images/placeholder/250x250_a.png">example 1</option>
109109
<option value="2" selected data-icon="../../docs/images/placeholder/250x250_b.png">example 2</option>
@@ -112,35 +112,35 @@ <h5>Select with selected Options</h5>
112112
<option value="5" data-icon="../../docs/images/placeholder/250x250_e.png">example 4</option>
113113
<option value="6">example 5</option>
114114
</select>
115-
<label>Multi-Select with Images (right) and Pre-Selections</label>
115+
<label for="select-test-7">Multi-Select with Images (right) and Pre-Selections</label>
116116
</div>
117117
</div>
118118

119119
<div class="row">
120120
<h5>Dynamically generated Select-Options <button class="btn3">Create + Init Select</button></h5>
121121
<div class="input-field col s12 m6">
122-
<select class="dynamic-select-single"></select>
123-
<label>Dynamic Single-Select</label>
122+
<select id="select-test-8" class="dynamic-select-single"></select>
123+
<label for="select-test-8">Dynamic Single-Select</label>
124124
</div>
125125
<div class="input-field col s12 m6">
126-
<select class="dynamic-select-multi" multiple></select>
127-
<label>Dynamic Multi-Select</label>
126+
<select id="select-test-9" class="dynamic-select-multi" multiple></select>
127+
<label for="select-test-9">Dynamic Multi-Select</label>
128128
</div>
129129
</div>
130130

131131
<div class="row">
132132
<div class="col s12 m6">
133-
<label>Browser Single-Select</label>
134-
<select class="browser-default">
133+
<label for="select-test-10">Browser Single-Select</label>
134+
<select id="select-test-10" class="browser-default">
135135
<option value="" disabled selected>Choose your option</option>
136136
<option value="1">Option 1</option>
137137
<option value="2">Option 2</option>
138138
<option value="3">Option 3</option>
139139
</select>
140140
</div>
141141
<div class="col s12 m6">
142-
<label>Browser Multi-Select</label>
143-
<select class="browser-default" multiple style="height:150px;">
142+
<label for="select-test-11">Browser Multi-Select</label>
143+
<select id="select-test-11" class="browser-default" multiple style="height:150px;">
144144
<option value="" disabled selected>Choose your option</option>
145145
<option value="1">Option 1</option>
146146
<option value="2">Option 2</option>

‎tests/spec/select/selectSpec.js

+31-2
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ describe("Select Plugin", function () {
3737
setTimeout(function() {
3838
expect(normalDropdown).toBeHidden('Should be hidden after choosing item.');
3939
expect(normalInput.value).toEqual(firstOption.innerText, 'Value should equal chosen option.');
40+
expect(firstOption.getAttribute('aria-selected')).toBe('true', 'Item be selected to assistive technologies.');
4041
done();
4142
}, 400);
4243
}, 400);
@@ -48,6 +49,7 @@ describe("Select Plugin", function () {
4849

4950
let firstOption = browserSelect.querySelector('option[selected]');
5051
expect(normalInput.value).toEqual(firstOption.innerText, 'Value should be equal to preselected option.');
52+
expect(firstOption.getAttribute("aria-selected"), "First item should be selected to assistive technologies.")
5153
});
5254

5355
it("should not initialize if browser default", function () {
@@ -85,6 +87,10 @@ describe("Select Plugin", function () {
8587
selectInstance = M.FormSelect.getInstance(browserSelect);
8688
});
8789

90+
it("Dropdown should allow multiple selections to assistive technologies", function(){
91+
expect(selectInstance.dropdownOptions.getAttribute("aria-multiselectable")).toBe("true");
92+
});
93+
8894
it("should open dropdown and select multiple options", function(done) {
8995
multipleInput = selectInstance.wrapper.querySelector('input.select-dropdown');
9096
multipleDropdown = selectInstance.wrapper.querySelector('ul.select-dropdown');
@@ -106,12 +112,19 @@ describe("Select Plugin", function () {
106112
firstOption = multipleDropdown.querySelector('li:not(.disabled)');
107113
let secondOption = multipleDropdown.querySelectorAll('li:not(.disabled)')[1];
108114
let thirdOption = multipleDropdown.querySelectorAll('li:not(.disabled)')[2];
109-
let selectedVals =
110-
Array.prototype.slice.call(browserSelect.querySelectorAll('option:checked'), 0).map(function(v) {
115+
let selectedVals = Array.prototype.slice.call(browserSelect.querySelectorAll('option:checked'), 0).map(function(v) {
111116
return v.value;
112117
});
118+
let selectedAria = Array.prototype.slice.call(multipleDropdown.querySelectorAll('li.selected'), 0).map(function(v) {
119+
return v.getAttribute("aria-selected");
120+
});
121+
let unselectedAria = Array.prototype.slice.call(multipleDropdown.querySelectorAll('li:not(.selected)'), 0).map(function(v) {
122+
return v.getAttribute("aria-selected");
123+
});
113124
expect(multipleDropdown).toBeHidden('Should be hidden after choosing item.');
114125
expect(selectedVals).toEqual(['1', '2', '3'], 'Actual select should have correct selected values.');
126+
expect(selectedAria).toEqual(['true', 'true', 'true'], 'Selected values should be checked to assistive technologies.');
127+
expect(unselectedAria).toEqual(['false'], 'Unselected values should be checked to assistive technologies.');
115128
expect(multipleInput.value).toEqual(firstOption.innerText + ', ' + secondOption.innerText + ', ' + thirdOption.innerText, 'Value should equal chosen multiple options.');
116129
done();
117130
}, 400);
@@ -167,6 +180,22 @@ describe("Select Plugin", function () {
167180
selectInstance = M.FormSelect.getInstance(browserSelect);
168181
});
169182

183+
it("Option groups should behave as such for assistive technologies", function(){
184+
optInput = selectInstance.wrapper.querySelector('input.select-dropdown');
185+
optDropdown = selectInstance.wrapper.querySelector('ul.select-dropdown');
186+
187+
let optgroups = optDropdown.querySelectorAll('li.optgroup');
188+
let browerSelectOptgroups = browserSelect.querySelectorAll('optgroup');
189+
190+
for (let i = 0; i < browerSelectOptgroups.length; i++) {
191+
expect(optgroups[i].getAttribute("role")).toBe("group", "Should behave as group.");
192+
}
193+
for (let i = 0; i < browerSelectOptgroups.length; i++) {
194+
expect(browerSelectOptgroups[i].children.length).toBe(optgroups[i].getAttribute("aria-owns").split(" ").length,
195+
"Browser option groups and custom groups must have the same ammount of children for assistive technologies");
196+
}
197+
});
198+
170199
it("should open dropdown and select options", function(done) {
171200
optInput = selectInstance.wrapper.querySelector('input.select-dropdown');
172201
optDropdown = selectInstance.wrapper.querySelector('ul.select-dropdown');

0 commit comments

Comments
 (0)