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

Select-only Combobox Example: Add Accessibility Features section #1432

Merged
merged 3 commits into from
Jul 14, 2020
Merged

Select-only Combobox Example: Add Accessibility Features section #1432

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69c7588
Add Accessibilty Features section to Select-only combobox example
carmacleod Jul 1, 2020
ed2a9e1
Merge Alternative wording (#1439)
mcking65 Jul 8, 2020
2a19cdb
Merge branch 'master' into pr1396-accessibility-features
mcking65 Jul 14, 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
17 changes: 17 additions & 0 deletions examples/combobox/combobox-select-only.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,23 @@ <h2 id="ex_label">Example</h2>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>

<section>
<h2>Accessibility Features</h2>
<p>While the functionality and user experience of this example are nearly equivalent to an HTML <code>select</code> element with the attribute <code>size="1"</code>, the following differences in behavior are implemented to improve both accessibility and general usability.</p>
<ol>
<li>
If the combobox is collapsed and the user types printable characters, the listbox is displayed and receives accessibility focus via <code>aria-activedescendant</code>.
This enables users to perceive the presence of the options, and enables assistive technology users to comprehend the size of the list of options.
</li>
<li>
Navigating the list of options does not set the value of the input.
This gives screen reader users, who need to navigate among the options to perceive them, the ability to explore options without losing the current value of the input.
The value is set when users press <kbd>Space</kbd>, <kbd>Enter</kbd>, or <kbd>Tab</kbd>, or when focus moves out of the combobox.
The current value is retained if the listbox is closed with <kbd>Escape</kbd> or if the user collapses the list by clicking the input.
</li>
</ol>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<p>
Expand Down