search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 763 forks source link

Combo box updated color for a11y #6577

Closed colinreedmiller closed 2 years ago

colinreedmiller commented 2 years ago

Change the border on the pill to meet 3.1 contrast.

Light theme: #737373 Dark theme: #8F9BA3

gnomeontherun commented 2 years ago

@Shijir does your color token work resolve this issue?

colinreedmiller commented 2 years ago

it certainly would be better if this was a core token rather than a hex value - I specified NG hex because it is a common color used in many places in NG - if we prefer a core token I can specify that instead.

gnomeontherun commented 2 years ago

@colinreedmiller for awareness, we have added a way to enable people to use the Core tokens with Clarity Angular, which should resolve most, if not all, contrast issues.

colinreedmiller commented 2 years ago

@colinreedmiller for awareness, we have added a way to enable people to use the Core tokens with Clarity Angular, which should resolve most, if not all, contrast issues.

This is great and ideal provided NG contrast issues get fixed this way by products.

Shijir commented 2 years ago

I just checked the border's color contrast with the new shim installed. With the shim, the contrast improves but still fails to meet the 3:1 ratios.

The shim sets the pill's border color to --cds-alias-object-border-color which is #cbd4d8. And the containing background (combobox's input background) is --cds-alias-object-container-background-shade which is #e3eaed

Without Core tokens shim:

Screen Shot 2022-01-18 at 4 37 22 PM

With Core tokens shim:

Screen Shot 2022-01-18 at 4 36 23 PM
colinreedmiller commented 2 years ago

These tokens will make the combobox pill meet contrast: The containing background (combobox's input background): --cds-alias-object-container-background-tint and keep the pill's border color: --cds-alias-object-border-color

Screen Shot 2022-01-18 at 5 47 24 PM
Jinnie commented 2 years ago

Done.

Jinnie commented 2 years ago

I had it assigned in the internal a11y tracking.

Shijir commented 2 years ago

These tokens will make the combobox pill meet contrast: The containing background (combobox's input background): --cds-alias-object-container-background-tint and keep the pill's border color: --cds-alias-object-border-color Screen Shot 2022-01-18 at 5 47 24 PM

@colinreedmiller When I apply the token values you've suggested above, the pill border contrast looks a bit different than what's shown in your screenshot. In your screenshot, the pill border color looks a bit darker so I wonder whether that is --cds-alias-object-border-color or not.

Screen Shot 2022-01-31 at 10 05 24 AM
colinreedmiller commented 2 years ago

Correct Core token for border is --cds-alias-object-interaction-border-color

github-actions[bot] commented 2 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.