Combo box updated color for a11y
colinreedmiller opened this issue · 11 comments
Change the border on the pill to meet 3.1 contrast.
Light theme: #737373
Dark theme: #8F9BA3
@Shijir does your color token work resolve this issue?
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.
@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 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.
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:
With Core tokens shim:
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
Done.
I had it assigned in the internal a11y tracking.
These tokens will make the combobox pill meet contrast: The containing background (combobox's input background):
--cds-alias-object-container-background-tintand keep the pill's border color:--cds-alias-object-border-color
@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.
Correct Core token for border is --cds-alias-object-interaction-border-color
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.