Skip to content

Commit f29ee5c

Browse files
michael-n-coopermcking65zcorpan
committed
Generated by TRAVIS-CI 941af00
Combobox examples with listbox popup: Add expanded and controls to popup control button and make visible in high contrast (pull #1336) Fixes issues #1333 and #1331: * added new name, aria-expanded, and aria-controls to popup control button. * Added regression test for new aria properties on popup control button. * Added documentation for attributes on popup control button. * updated css to support Windows high contrast mode. Co-authored-by: Matt King <[email protected]> Co-authored-by: Simon Pieters <[email protected]>
1 parent aa8a642 commit f29ee5c

5 files changed

+208
-20
lines changed

Diff for: ‎examples/combobox/combobox-autocomplete-both.html

+64-4
Original file line numberDiff line numberDiff line change
@@ -51,16 +51,17 @@ <h2 id="ex_label">Example</h2>
5151
<div class="combobox combobox-list">
5252
<div class="group">
5353
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
54-
aria-expanded="false" aria-controls="lb1">
55-
<button type="button" id="cb1-button" aria-label="Open" tabindex="-1">
54+
aria-expanded="false" aria-controls="cb1-listbox">
55+
<button type="button" id="cb1-button" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox" tabindex="-1">
5656
<span class="arrow">
5757
<svg width="18" height="16" aria-hidden="true" focusable="false">
58-
<polygon points="3,5 15,5 9,13"></polygon>
58+
<polygon class="outline" points="1,4 17,4 9,15"></polygon>
59+
<polygon class="arrow" points="3,5 15,5 9,13"></polygon>
5960
</svg>
6061
</span>
6162
</button>
6263
</div>
63-
<ul id="lb1" role="listbox" aria-label="States">
64+
<ul id="cb1-listbox" role="listbox" aria-label="States">
6465
<li id="lb1-al" role="option">Alabama</li>
6566
<li id="lb1-ak" role="option">Alaska</li>
6667
<li id="lb1-as" role="option">American Samoa</li>
@@ -276,6 +277,11 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
276277
</tr>
277278
</tbody>
278279
</table>
280+
<h3 id="kbd_label_button">Button</h3>
281+
<p>
282+
The button has been removed from the tab sequence of the page, but is still important to assistive technologies for mobile devices that use touch events to open the list of options.
283+
</p>
284+
279285
</section>
280286

281287
<section>
@@ -426,6 +432,60 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
426432
</tr>
427433
</tbody>
428434
</table>
435+
436+
<h3 id="rps_label_button">Button</h3>
437+
<table aria-labelledby="rps_label_button rps_label" class="data attributes">
438+
<thead>
439+
<tr>
440+
<th scope="col">Role</th>
441+
<th scope="col">Attribute</th>
442+
<th scope="col">Element</th>
443+
<th scope="col">Usage</th>
444+
</tr>
445+
</thead>
446+
<tbody>
447+
<tr data-test-id="button-tabindex">
448+
<td></td>
449+
<th scope="row">
450+
<code>tabindex="-1"</code>
451+
</th>
452+
<td><code>button</code></td>
453+
<td>Removes the button from the tab sequence of the page because its function is redundant with the keyboard operation of the combobox.</td>
454+
</tr>
455+
<tr data-test-id="button-aria-label">
456+
<td></td>
457+
<th scope="row">
458+
<code>aria-label="States"</code>
459+
</th>
460+
<td><code>button</code></td>
461+
<td>Provides a label for the <code>button</code>.</td>
462+
</tr>
463+
<tr data-test-id="button-aria-controls">
464+
<td></td>
465+
<th scope="row">
466+
<code>aria-controls="#IDREF"</code>
467+
</th>
468+
<td><code>button</code></td>
469+
<td>Identifies the element that serves as the popup.</td>
470+
</tr>
471+
<tr data-test-id="button-aria-expanded">
472+
<td></td>
473+
<th scope="row">
474+
<code>aria-expanded="false"</code>
475+
</th>
476+
<td><code>button</code></td>
477+
<td>Indicates that the popup element <strong>is not</strong> displayed.</td>
478+
</tr>
479+
<tr data-test-id="button-aria-expanded">
480+
<td></td>
481+
<th scope="row">
482+
<code>aria-expanded="true"</code>
483+
</th>
484+
<td><code>button</code></td>
485+
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
486+
</tr>
487+
</tbody>
488+
</table>
429489
</section>
430490

431491
<section>

Diff for: ‎examples/combobox/combobox-autocomplete-list.html

+61-2
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,11 @@ <h2 id="ex_label">Example</h2>
5353
<div class="group">
5454
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="list"
5555
aria-expanded="false" aria-controls="cb1-listbox">
56-
<button id="cb1-button" tabindex="-1" aria-label="Open">
56+
<button id="cb1-button" tabindex="-1" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox">
5757
<span class="arrow">
5858
<svg width="18" height="16" aria-hidden="true" focusable="false">
59-
<polygon points="3,5 15,5 9,13"></polygon>
59+
<polygon class="outline" points="1,4 17,4 9,15"></polygon>
60+
<polygon class="arrow" points="3,5 15,5 9,13"></polygon>
6061
</svg>
6162
</span>
6263
</button>
@@ -272,6 +273,10 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
272273
</tr>
273274
</tbody>
274275
</table>
276+
<h3 id="kbd_label_button">Button</h3>
277+
<p>
278+
The button has been removed from the tab sequence of the page, but is still important to assistive technologies for mobile devices that use touch events to open the list of options.
279+
</p>
275280
</section>
276281

277282
<section>
@@ -422,6 +427,60 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
422427
</tr>
423428
</tbody>
424429
</table>
430+
431+
<h3 id="rps_label_button">Button</h3>
432+
<table aria-labelledby="rps_label_button rps_label" class="data attributes">
433+
<thead>
434+
<tr>
435+
<th scope="col">Role</th>
436+
<th scope="col">Attribute</th>
437+
<th scope="col">Element</th>
438+
<th scope="col">Usage</th>
439+
</tr>
440+
</thead>
441+
<tbody>
442+
<tr data-test-id="button-tabindex">
443+
<td></td>
444+
<th scope="row">
445+
<code>tabindex="-1"</code>
446+
</th>
447+
<td><code>button</code></td>
448+
<td>Removes the button from the tab sequence of the page because its function is redundant with the keyboard operation of the combobox.</td>
449+
</tr>
450+
<tr data-test-id="button-aria-label">
451+
<td></td>
452+
<th scope="row">
453+
<code>aria-label="States"</code>
454+
</th>
455+
<td><code>button</code></td>
456+
<td>Provides a label for the <code>button</code>.</td>
457+
</tr>
458+
<tr data-test-id="button-aria-controls">
459+
<td></td>
460+
<th scope="row">
461+
<code>aria-controls="#IDREF"</code>
462+
</th>
463+
<td><code>button</code></td>
464+
<td>Identifies the element that serves as the popup.</td>
465+
</tr>
466+
<tr data-test-id="button-aria-expanded">
467+
<td></td>
468+
<th scope="row">
469+
<code>aria-expanded="false"</code>
470+
</th>
471+
<td><code>button</code></td>
472+
<td>Indicates that the popup element <strong>is not</strong> displayed.</td>
473+
</tr>
474+
<tr data-test-id="button-aria-expanded">
475+
<td></td>
476+
<th scope="row">
477+
<code>aria-expanded="true"</code>
478+
</th>
479+
<td><code>button</code></td>
480+
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
481+
</tr>
482+
</tbody>
483+
</table>
425484
</section>
426485

427486
<section>

Diff for: ‎examples/combobox/combobox-autocomplete-none.html

+60-2
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,11 @@ <h2 id="ex_label">Example</h2>
5353
aria-autocomplete="none"
5454
aria-expanded="false"
5555
aria-controls="cb1-listbox">
56-
<button type="button" id="cb1-button" tabindex="-1" aria-label="Open">
56+
<button type="button" id="cb1-button" tabindex="-1" aria-label="Previous Searches" aria-expanded="false" aria-controls="cb1-listbox" >
5757
<span class="arrow">
5858
<svg width="18" height="16" aria-hidden="true" focusable="false">
59-
<polygon points="3,5 15,5 9,13"></polygon>
59+
<polygon class="outline" points="1,4 17,4 9,15"></polygon>
60+
<polygon class="arrow" points="3,5 15,5 9,13"></polygon>
6061
</svg>
6162
</span>
6263
</button>
@@ -221,6 +222,10 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
221222
</tr>
222223
</tbody>
223224
</table>
225+
<h3 id="kbd_label_button">Button</h3>
226+
<p>
227+
The button has been removed from the tab sequence of the page, but is still important to assistive technologies for mobile devices that use touch events to open the list of options.
228+
</p>
224229
</section>
225230

226231
<section>
@@ -371,6 +376,59 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
371376
</tr>
372377
</tbody>
373378
</table>
379+
<h3 id="rps_label_button">Button</h3>
380+
<table aria-labelledby="rps_label_button rps_label" class="data attributes">
381+
<thead>
382+
<tr>
383+
<th scope="col">Role</th>
384+
<th scope="col">Attribute</th>
385+
<th scope="col">Element</th>
386+
<th scope="col">Usage</th>
387+
</tr>
388+
</thead>
389+
<tbody>
390+
<tr data-test-id="button-tabindex">
391+
<td></td>
392+
<th scope="row">
393+
<code>tabindex="-1"</code>
394+
</th>
395+
<td><code>button</code></td>
396+
<td>Removes the button from the tab sequence of the page, since it's keyboard function is redundant with the keyboard operation of the textbox to open the listbox.</td>
397+
</tr>
398+
<tr data-test-id="button-aria-label">
399+
<td></td>
400+
<th scope="row">
401+
<code>aria-label="Previous Searches"</code>
402+
</th>
403+
<td><code>button</code></td>
404+
<td>Provides a label for the <code>button</code>.</td>
405+
</tr>
406+
<tr data-test-id="button-aria-controls">
407+
<td></td>
408+
<th scope="row">
409+
<code>aria-controls="#IDREF"</code>
410+
</th>
411+
<td><code>button</code></td>
412+
<td>Identifies the element that serves as the popup.</td>
413+
</tr>
414+
<tr data-test-id="button-aria-expanded">
415+
<td></td>
416+
<th scope="row">
417+
<code>aria-expanded="false"</code>
418+
</th>
419+
<td><code>button</code></td>
420+
<td>Indicates that the popup element <strong>is not</strong> displayed.</td>
421+
</tr>
422+
<tr data-test-id="button-aria-expanded">
423+
<td></td>
424+
<th scope="row">
425+
<code>aria-expanded="true"</code>
426+
</th>
427+
<td><code>button</code></td>
428+
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
429+
</tr>
430+
</tbody>
431+
</table>
374432
</section>
375433

376434
<section>

Diff for: ‎examples/combobox/css/combobox-autocomplete.css

+21-10
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
outline: none;
3434
}
3535

36-
.combobox button.open svg {
36+
.combobox button[aria-expanded="true"] svg {
3737
transform: rotate(180deg) translate(0, -1px);
3838
}
3939

@@ -44,16 +44,27 @@
4444

4545
.combobox .group.focus input,
4646
.combobox .group.focus button {
47-
background-color: #DEF;
47+
background-color: #def;
4848
}
4949

50-
.combobox polygon {
50+
.combobox button polygon.outline {
51+
stroke: transparent;
52+
fill: transparent;
53+
}
54+
55+
.combobox button[aria-expanded="true"] polygon.outline,
56+
.combobox .group.focus polygon.outline {
57+
stroke: white;
58+
fill: white;
59+
}
60+
61+
.combobox polygon.arrow {
5162
fill: gray;
5263
stroke: gray;
5364
}
5465

55-
.combobox button.open polygon,
56-
.combobox .group.focus polygon {
66+
.combobox button[aria-expanded="true"] polygon.arrow,
67+
.combobox .group.focus polygon.arrow {
5768
fill: black;
5869
stroke: black;
5970
}
@@ -88,22 +99,22 @@ ul[role="listbox"] li[role="option"] {
8899
/* focus and hover styling */
89100

90101
[role="listbox"].focus [role="option"][aria-selected="true"] {
91-
background-color: #DEF;
102+
background-color: #def;
92103
padding-top: 0;
93104
padding-bottom: 0;
94-
border-top: 0.2em solid #8CCBF2;
95-
border-bottom: 0.2em solid #8CCBF2;
105+
border-top: 0.2em solid #8ccbf2;
106+
border-bottom: 0.2em solid #8ccbf2;
96107
}
97108

98109
@media (forced-colors: active), (-ms-high-contrast: active) {
99110
[role="listbox"].focus [role="option"][aria-selected="true"] {
100111
-ms-high-contrast-adjust: none; /* disable the backgrounds that Edge puts behind text */
101112
background-color: highlight;
102113
color: highlighttext;
103-
border-color: currentcolor;
114+
border-color: currentColor;
104115
}
105116
}
106117

107118
[role="listbox"] li[role="option"]:hover {
108-
background-color: #DEF;
119+
background-color: #def;
109120
}

Diff for: ‎examples/combobox/js/combobox-autocomplete.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ ComboboxAutocomplete.prototype.hasOptions = function () {
248248
ComboboxAutocomplete.prototype.open = function () {
249249
this.listboxNode.style.display = 'block';
250250
this.comboboxNode.setAttribute('aria-expanded', 'true');
251-
this.buttonNode.classList.add('open');
251+
this.buttonNode.setAttribute('aria-expanded', 'true');
252252
};
253253

254254
ComboboxAutocomplete.prototype.close = function (force) {
@@ -260,7 +260,7 @@ ComboboxAutocomplete.prototype.close = function (force) {
260260
this.setCurrentOptionStyle(false);
261261
this.listboxNode.style.display = 'none';
262262
this.comboboxNode.setAttribute('aria-expanded', 'false');
263-
this.buttonNode.classList.remove('open');
263+
this.buttonNode.setAttribute('aria-expanded', 'false');
264264
this.setActiveDescendant(false);
265265
}
266266
};

0 commit comments

Comments
 (0)