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

Jump to bottom

Combobox examples: Mark up open button so it reflects combobox state #1333

Closed
mcking65 opened this issue Feb 16, 2020 · 1 comment · Fixed by #1336
Closed

Combobox examples: Mark up open button so it reflects combobox state #1333

mcking65 opened this issue Feb 16, 2020 · 1 comment · Fixed by #1336
Labels
bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern
Milestone
1.2 Release 1

Comments

@mcking65
Copy link
Contributor

When using a touch based screen reader or using the reading cursor of a desktop screen reader, the open button of the combobox examples does not communicate the state of the combobox. Also the accessible "name of "Open" is insufficient.

Make the following changes so the open button is accessible:

  1. Change the name to match the name of the element that the button controls. For example, in the comboboxes for choosing a "State", the name of the button should be "States".
  2. Add aria-expanded to the button and set it to "true" when the combobox is expanded and "false when it is collapsed.
  3. Add aria-controls to the button referencing the element that it controls.
@mcking65 mcking65 added bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern labels Feb 16, 2020
@mcking65 mcking65 added this to the 1.2 Release 1 milestone Feb 16, 2020
@mcking65 mcking65 mentioned this issue Feb 16, 2020
Merged
6 tasks
@jongund
Copy link
Contributor

jongund commented Feb 16, 2020 •
edited
Loading

@mcking65

I added aria-controls and aria-expanded to the button, including updating the documentation and regression tests in pull request 1336 for the both, list and none autocomplete examples.

@jongund jongund mentioned this issue Feb 17, 2020
Merged
6 tasks
mcking65 added a commit that referenced this issue Mar 9, 2020
@jongund @mcking65 @zcorpan
Combobox examples with listbox popup: Add expanded and controls to po…
941af00 
…pup 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]>
michael-n-cooper pushed a commit that referenced this issue Mar 9, 2020
@mcking65 @zcorpan
Generated by TRAVIS-CI 941af00
f29ee5c 
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]>
nschonni pushed a commit to nschonni/aria-practices that referenced this issue Mar 17, 2020
@mcking65 @zcorpan
Generated by TRAVIS-CI 941af00
a7b107d 
Combobox examples with listbox popup: Add expanded and controls to popup 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]>
carmacleod pushed a commit to carmacleod/aria-practices that referenced this issue Mar 31, 2020
@jongund @mcking65
@zcorpan @carmacleod
Combobox examples with listbox popup: Add expanded and controls to po…
6190a90 
…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]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Code defects; not for inaccurate prose Example Page Related to a page containing an example implementation of a pattern
Projects
None yet
Milestone
1.2 Release 1
2 participants
@jongund @mcking65