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: In high contrast mode the drop down arrow disappears when the field is selected #1331

Closed
mcking65 opened this issue Feb 14, 2020 · 3 comments · Fixed by #1336
Closed

Combobox Examples: In high contrast mode the drop down arrow disappears when the field is selected #1331

mcking65 opened this issue Feb 14, 2020 · 3 comments · 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

Per feedback in pull request 1276 from @ZoeBijl about the combobox examples:

In high contrast mode the drop down arrow disappears when the field is selected:

Selected combobox with missing arrow

The select state within the dropdown is clear though:

State combobox with three suggestions showing. There's a clear contrast difference between the selected item and the others.

Recommendations from Zoe:

  1. Add a border-radius: .125em; to the input.
  2. Fix the disappearing drop down arrow.
@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 14, 2020
@mcking65 mcking65 added this to the 1.2 Release 1 milestone Feb 14, 2020
@jongund jongund mentioned this issue Feb 17, 2020
Merged
6 tasks
@zcorpan
Copy link
Member

zcorpan commented Mar 3, 2020

The border-radius would be to make it look a bit nicer, but unrelated to high contrast, right?

@zcorpan
Copy link
Member

zcorpan commented Mar 3, 2020

With the change in #1336 it looks like this in Edge with high contrast on:

Same as before, except the dropdown triangle is now visible.

@smhigley
Copy link
Contributor

smhigley commented Mar 3, 2020

It also works in Chrome & Firefox in high contrast mode in #1336

screenshot of dropdown with visible icon in high contrast mode

@mcking65 mcking65 linked a pull request Mar 8, 2020 that will close this issue
Combobox examples with listbox popup: Add properties and states to listbox control button #1336
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 <a11yThinker@gmail.com>
Co-authored-by: Simon Pieters <zcorpan@gmail.com>
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 <a11yThinker@gmail.com>
Co-authored-by: Simon Pieters <zcorpan@gmail.com>
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 <a11yThinker@gmail.com>
Co-authored-by: Simon Pieters <zcorpan@gmail.com>
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 <a11yThinker@gmail.com>
Co-authored-by: Simon Pieters <zcorpan@gmail.com>
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
3 participants
@zcorpan @smhigley @mcking65