Skip to content

Commit

Permalink
Combobox examples with listbox popup: Add expanded and controls to po…
Browse files Browse the repository at this point in the history 
…pup control button and make visible in high contrast (pull w3c#1336)

Fixes issues w3c#1333 and w3c#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]>
  • Loading branch information
@jongund @mcking65 @zcorpan
3 people authored Mar 9, 2020
1 parent 1e1c955 commit 941af00
Show file tree
Hide file tree
Showing 8 changed files with 473 additions and 21 deletions.
68 changes: 64 additions & 4 deletions examples/combobox/combobox-autocomplete-both.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,16 +51,17 @@ <h2 id="ex_label">Example</h2>
<div class="combobox combobox-list">
<div class="group">
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
aria-expanded="false" aria-controls="lb1">
<button type="button" id="cb1-button" aria-label="Open" tabindex="-1">
aria-expanded="false" aria-controls="cb1-listbox">
<button type="button" id="cb1-button" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox" tabindex="-1">
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon points="3,5 15,5 9,13"></polygon>
<polygon class="outline" points="1,4 17,4 9,15"></polygon>
<polygon class="arrow" points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
</div>
<ul id="lb1" role="listbox" aria-label="States">
<ul id="cb1-listbox" role="listbox" aria-label="States">
<li id="lb1-al" role="option">Alabama</li>
<li id="lb1-ak" role="option">Alaska</li>
<li id="lb1-as" role="option">American Samoa</li>
Expand Down Expand Up @@ -276,6 +277,11 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
</tr>
</tbody>
</table>
<h3 id="kbd_label_button">Button</h3>
<p>
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.
</p>

</section>

<section>
Expand Down Expand Up @@ -426,6 +432,60 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
</tr>
</tbody>
</table>

<h3 id="rps_label_button">Button</h3>
<table aria-labelledby="rps_label_button rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr data-test-id="button-tabindex">
<td></td>
<th scope="row">
<code>tabindex="-1"</code>
</th>
<td><code>button</code></td>
<td>Removes the button from the tab sequence of the page because its function is redundant with the keyboard operation of the combobox.</td>
</tr>
<tr data-test-id="button-aria-label">
<td></td>
<th scope="row">
<code>aria-label="States"</code>
</th>
<td><code>button</code></td>
<td>Provides a label for the <code>button</code>.</td>
</tr>
<tr data-test-id="button-aria-controls">
<td></td>
<th scope="row">
<code>aria-controls="#IDREF"</code>
</th>
<td><code>button</code></td>
<td>Identifies the element that serves as the popup.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="false"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is not</strong> displayed.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="true"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
</tr>
</tbody>
</table>
</section>

<section>
Expand Down
63 changes: 61 additions & 2 deletions examples/combobox/combobox-autocomplete-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,11 @@ <h2 id="ex_label">Example</h2>
<div class="group">
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="list"
aria-expanded="false" aria-controls="cb1-listbox">
<button id="cb1-button" tabindex="-1" aria-label="Open">
<button id="cb1-button" tabindex="-1" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox">
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon points="3,5 15,5 9,13"></polygon>
<polygon class="outline" points="1,4 17,4 9,15"></polygon>
<polygon class="arrow" points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
Expand Down Expand Up @@ -272,6 +273,10 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
</tr>
</tbody>
</table>
<h3 id="kbd_label_button">Button</h3>
<p>
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.
</p>
</section>

<section>
Expand Down Expand Up @@ -422,6 +427,60 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
</tr>
</tbody>
</table>

<h3 id="rps_label_button">Button</h3>
<table aria-labelledby="rps_label_button rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr data-test-id="button-tabindex">
<td></td>
<th scope="row">
<code>tabindex="-1"</code>
</th>
<td><code>button</code></td>
<td>Removes the button from the tab sequence of the page because its function is redundant with the keyboard operation of the combobox.</td>
</tr>
<tr data-test-id="button-aria-label">
<td></td>
<th scope="row">
<code>aria-label="States"</code>
</th>
<td><code>button</code></td>
<td>Provides a label for the <code>button</code>.</td>
</tr>
<tr data-test-id="button-aria-controls">
<td></td>
<th scope="row">
<code>aria-controls="#IDREF"</code>
</th>
<td><code>button</code></td>
<td>Identifies the element that serves as the popup.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="false"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is not</strong> displayed.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="true"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
</tr>
</tbody>
</table>
</section>

<section>
Expand Down
62 changes: 60 additions & 2 deletions examples/combobox/combobox-autocomplete-none.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,11 @@ <h2 id="ex_label">Example</h2>
aria-autocomplete="none"
aria-expanded="false"
aria-controls="cb1-listbox">
<button type="button" id="cb1-button" tabindex="-1" aria-label="Open">
<button type="button" id="cb1-button" tabindex="-1" aria-label="Previous Searches" aria-expanded="false" aria-controls="cb1-listbox" >
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon points="3,5 15,5 9,13"></polygon>
<polygon class="outline" points="1,4 17,4 9,15"></polygon>
<polygon class="arrow" points="3,5 15,5 9,13"></polygon>
</svg>
</span>
</button>
Expand Down Expand Up @@ -221,6 +222,10 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
</tr>
</tbody>
</table>
<h3 id="kbd_label_button">Button</h3>
<p>
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.
</p>
</section>

<section>
Expand Down Expand Up @@ -371,6 +376,59 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
</tr>
</tbody>
</table>
<h3 id="rps_label_button">Button</h3>
<table aria-labelledby="rps_label_button rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr data-test-id="button-tabindex">
<td></td>
<th scope="row">
<code>tabindex="-1"</code>
</th>
<td><code>button</code></td>
<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>
</tr>
<tr data-test-id="button-aria-label">
<td></td>
<th scope="row">
<code>aria-label="Previous Searches"</code>
</th>
<td><code>button</code></td>
<td>Provides a label for the <code>button</code>.</td>
</tr>
<tr data-test-id="button-aria-controls">
<td></td>
<th scope="row">
<code>aria-controls="#IDREF"</code>
</th>
<td><code>button</code></td>
<td>Identifies the element that serves as the popup.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="false"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is not</strong> displayed.</td>
</tr>
<tr data-test-id="button-aria-expanded">
<td></td>
<th scope="row">
<code>aria-expanded="true"</code>
</th>
<td><code>button</code></td>
<td>Indicates that the popup element <strong>is</strong> displayed.</td>
</tr>
</tbody>
</table>
</section>

<section>
Expand Down
31 changes: 21 additions & 10 deletions examples/combobox/css/combobox-autocomplete.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
outline: none;
}

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

Expand All @@ -44,16 +44,27 @@

.combobox .group.focus input,
.combobox .group.focus button {
background-color: #DEF;
background-color: #def;
}

.combobox polygon {
.combobox button polygon.outline {
stroke: transparent;
fill: transparent;
}

.combobox button[aria-expanded="true"] polygon.outline,
.combobox .group.focus polygon.outline {
stroke: white;
fill: white;
}

.combobox polygon.arrow {
fill: gray;
stroke: gray;
}

.combobox button.open polygon,
.combobox .group.focus polygon {
.combobox button[aria-expanded="true"] polygon.arrow,
.combobox .group.focus polygon.arrow {
fill: black;
stroke: black;
}
Expand Down Expand Up @@ -88,22 +99,22 @@ ul[role="listbox"] li[role="option"] {
/* focus and hover styling */

[role="listbox"].focus [role="option"][aria-selected="true"] {
background-color: #DEF;
background-color: #def;
padding-top: 0;
padding-bottom: 0;
border-top: 0.2em solid #8CCBF2;
border-bottom: 0.2em solid #8CCBF2;
border-top: 0.2em solid #8ccbf2;
border-bottom: 0.2em solid #8ccbf2;
}

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

[role="listbox"] li[role="option"]:hover {
background-color: #DEF;
background-color: #def;
}
4 changes: 2 additions & 2 deletions examples/combobox/js/combobox-autocomplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ ComboboxAutocomplete.prototype.hasOptions = function () {
ComboboxAutocomplete.prototype.open = function () {
this.listboxNode.style.display = 'block';
this.comboboxNode.setAttribute('aria-expanded', 'true');
this.buttonNode.classList.add('open');
this.buttonNode.setAttribute('aria-expanded', 'true');
};

ComboboxAutocomplete.prototype.close = function (force) {
Expand All @@ -260,7 +260,7 @@ ComboboxAutocomplete.prototype.close = function (force) {
this.setCurrentOptionStyle(false);
this.listboxNode.style.display = 'none';
this.comboboxNode.setAttribute('aria-expanded', 'false');
this.buttonNode.classList.remove('open');
this.buttonNode.setAttribute('aria-expanded', 'false');
this.setActiveDescendant(false);
}
};
Expand Down
Loading

0 comments on commit 941af00

Please sign in to comment.