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 1 commit
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
23 changes: 22 additions & 1 deletion examples/combobox/combobox-autocomplete-both.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ <h2 id="ex_label">Example</h2>
<div class="group">
<input id="cb1-input" class="cb_edit" type="text" role="combobox" aria-autocomplete="both"
aria-expanded="false" aria-controls="cb1-listbox">
<button type="button" id="cb1-button" aria-label="State" aria-expanded="false" aria-controls="cb1-listbox" tabindex="-1">
<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>
Expand Down Expand Up @@ -276,6 +276,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 focusable by assistive technologies. The button is especially important for supporting assistive tehcnologies for mobile devices that use touch events to open the list of options.
</p>

</section>

<section>
Expand Down Expand Up @@ -438,6 +443,22 @@ <h3 id="rps_label_button">Button</h3>
</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="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">
Expand Down
22 changes: 21 additions & 1 deletion examples/combobox/combobox-autocomplete-list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <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="State" aria-expanded="false" aria-controls="cb1-listbox">
<button id="cb1-button" tabindex="-1" aria-label="States" aria-expanded="false" aria-controls="cb1-listbox">
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon points="3,5 15,5 9,13"></polygon>
Expand Down Expand Up @@ -272,6 +272,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 focusable by assistive technologies. The button is especially important for supporting assistive tehcnologies for mobile devices that use touch events to open the list of options.
</p>
</section>

<section>
Expand Down Expand Up @@ -434,6 +438,22 @@ <h3 id="rps_label_button">Button</h3>
</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="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">
Expand Down
22 changes: 21 additions & 1 deletion examples/combobox/combobox-autocomplete-none.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <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="State" aria-expanded="false" aria-controls="cb1-listbox" >
<button type="button" id="cb1-button" tabindex="-1" aria-label="Previous Searches" aria-expanded="false" aria-controls="cb1-listbox" >
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<span class="arrow">
<svg width="18" height="16" aria-hidden="true" focusable="false">
<polygon points="3,5 15,5 9,13"></polygon>
Expand Down Expand Up @@ -221,6 +221,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 focusable by assistive technologies. The button is especially important for supporting assistive tehcnologies for mobile devices that use touch events to open the list of options.
</p>
</section>

<section>
Expand Down Expand Up @@ -382,6 +386,22 @@ <h3 id="rps_label_button">Button</h3>
</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">
Expand Down
18 changes: 18 additions & 0 deletions test/tests/combobox_autocomplete-both.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,24 @@ ariaTest('"aria-selected" attribute on options element', exampleFile, 'option-ar
await assertAttributeValues(t, ex.optionsSelector + ':nth-of-type(1)', 'aria-selected', 'true');
});

ariaTest('Button should have tabindex="-1"', exampleFile, 'button-tabindex', async (t) => {
t.plan(1);

const button = await t.context.session.findElement(By.css(ex.buttonSelector))

t.is(
await button.getAttribute('tabindex'),
'-1',
'tabindex should be set to "-1" on button'
);
});

ariaTest('"aria-label" attribute on button element', exampleFile, 'button-aria-label', async (t) => {
t.plan(1);
await assertAriaLabelExists(t, ex.buttonSelector);
});


ariaTest('"aria-controls" attribute on button element', exampleFile, 'button-aria-controls', async (t) => {
t.plan(2);

Expand Down
17 changes: 17 additions & 0 deletions test/tests/combobox_autocomplete-list.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,23 @@ ariaTest('"aria-selected" attribute on options element', exampleFile, 'option-ar
await assertAttributeValues(t, ex.optionsSelector + ':nth-of-type(1)', 'aria-selected', 'true');
});

ariaTest('Button should have tabindex="-1"', exampleFile, 'button-tabindex', async (t) => {
t.plan(1);

const button = await t.context.session.findElement(By.css(ex.buttonSelector))

t.is(
await button.getAttribute('tabindex'),
'-1',
'tabindex should be set to "-1" on button'
);
});

ariaTest('"aria-label" attribute on button element', exampleFile, 'button-aria-label', async (t) => {
t.plan(1);
await assertAriaLabelExists(t, ex.buttonSelector);
});

ariaTest('"aria-controls" attribute on button element', exampleFile, 'button-aria-controls', async (t) => {
t.plan(2);

Expand Down
17 changes: 17 additions & 0 deletions test/tests/combobox_autocomplete-none.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,23 @@ ariaTest('"aria-selected" attribute on options element', exampleFile, 'option-ar
await assertAttributeValues(t, ex.optionsSelector + ':nth-of-type(1)', 'aria-selected', 'true');
});

ariaTest('Button should have tabindex="-1"', exampleFile, 'button-tabindex', async (t) => {
t.plan(1);

const button = await t.context.session.findElement(By.css(ex.buttonSelector))

t.is(
await button.getAttribute('tabindex'),
'-1',
'tabindex should be set to "-1" on button'
);
});

ariaTest('"aria-label" attribute on button element', exampleFile, 'button-aria-label', async (t) => {
t.plan(1);
await assertAriaLabelExists(t, ex.buttonSelector);
});

ariaTest('"aria-controls" attribute on button element', exampleFile, 'button-aria-controls', async (t) => {
t.plan(2);

Expand Down