[Bug][a11y]: Picker button is not using high contrast colors when focused or disabled

[dineshy87]

trafficstars

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

Picker Button

Expected behavior

Picker button must use high contrast system colors when using forced-colors:active

Actual behavior

Looks like it is still picking colors from non high contrast mode

[najikahalsema]

We should check to see if this is still true post-Core Tokens Migration.

[blaabaer]

It appears that on the SWC dev site that the Picker visuals match the ActionButton.

forced-colors: active gives interactive action button elements a contrasting outline, which appears in both Picker and ActionButton.

Testing via:

• "Increase contrast" turned on in Mac system accessbility settings
• Using Safari

Screenshots (invalid; incorrectly using forced colors: active)

[Westbrook]

Thanks for starting to dig into this @blaabaer!

Be sure that you looking at Picker Button which is a different pattern than what you've taking screenshots of so far. This element is leveraged within the Combobox element, as well.

[blaabaer]

Combobox and PickerButton components are also significatly different (high contrast on the left, normal on the right)

Screenshots (invalid; incorrectly using forced colors: active)

[Westbrook]

Can't be sure, but your left vs right comparison looks like "Spectrum" vs "Express" at the theme level. Be sure you're using forced color emulation which can be managed like this in Chromium.

[blaabaer]

You're right, and that was my mistake. For some reason, when I flipped "High Contrast" in system settings, my browser content actually barely changed. "Forced Color Emulation" like you described changes the visuals significantly:

Action Button Forced-Color ON vs OFF, Spectrum and Express theme

Picker Button Forced-Color ON vs OFF, Spectrum and Express theme

(focused on first dropdown button)

(focused on first dropdown button)

Combobox Forced-Color ON vs OFF, Spectrum and Express theme

The ticket description specifically points out focused and disabled. Focused states for all these components in Forced-Color now have a black outline that is unique to forced-color and different from the regular colors, so I think that's no longer an issue.

The Disabled/Invalid states in Forced-Color appear identical to normal buttons. I'm not sure whether that is considered standard, or a problem. I also noticed that the description for the "Invalid" Picker Button case describes a red border that doesn't actually exist.