Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combobox examples with listbox popup: Add properties and states to listbox control button #1336

Merged
merged 10 commits into from
Mar 9, 2020
Merged

Combobox examples with listbox popup: Add properties and states to listbox control button #1336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
75777c9
added aria properties and correct label to button that opens anc clos…
jongund Feb 16, 2020
a40c168
updated regression test for new aria properties on button
jongund Feb 16, 2020
c862f31
updated combobox examples based Matt's feedback
jongund Feb 17, 2020
a4d4ce0
updated documentation for button
jongund Feb 17, 2020
c0dfc7f
fixed unclosed section bug
jongund Feb 17, 2020
431de15
updated css for high contrast support
jongund Feb 17, 2020
89a7833
updated css
jongund Feb 17, 2020
8b213b5
Minor editorial revision to tabindex documentation for the button
mcking65 Feb 28, 2020
1bc542e
Apply suggestions from code review
zcorpan Mar 3, 2020
78d88a6
Merge branch 'master' into issue1333-add-aria-to-button
mcking65 Mar 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 64 additions & 4 deletions examples/combobox/combobox-autocomplete-both.html
View file
Open in desktop
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">
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<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
Open in desktop
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">
mcking65 marked this conversation as resolved.
Show resolved Hide resolved
<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
Open in desktop
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">
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<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
Open in desktop
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
Open in desktop
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