USWDS - Date Picker: Add high contrast focus styling to calendar button #5701
Conversation
| &:not([disabled]) { | ||
| &:focus, | ||
| &:hover { | ||
| background-color: Highlight; | ||
| } |
There was a problem hiding this comment.
Note
In the future, we should consider high contrast styles in the partial, instead of per section. That way all buttons can benefit.
There was a problem hiding this comment.
@mahoneycm
I opened the component in forced color mode via the Chrome web inspector rendering panel. The icon now successfully changes color on focus.
I am not sure if this is a blocker, but I expected the icon to also receive a focus outline like it does in the standard viewing mode. Is there a reason it was not included here?
Of course I'll defer to @amycole501 on the WCAG standards for this.
|
@amyleadem Yes I included the reason it does not receive the focus outline in the problem statement! Essentially the focus outline is covered due to the icon being placed as a mask. The mask covers the standard focus styles believe it or not. For additional context, we're using an icon mask here so the icon color is updated and maintains contrast in light/dark modes. |
|
Important This issue is listed as a "known issue" in USWDS-Site: Add known issues to component pages. We should remove this item from the date picker page as part of our release documentation updates. |
There was a problem hiding this comment.
Thanks for the explanation, @mahoneycm! Looks good to me.
Note
@alex-hull referenced WCAG Technique C15 to confirm that a color change is enough to meet standards
Summary
Adds focus styles to calendar button in high contrast mode. Now, the calendar icon changes to the
highlighthigh contrast token.Breaking change
This is not a breaking change.
Related issue
Closes #5535
Related pull requests
Changelog →
Preview link
Date Picker →
Problem statement
In high contrast mode, the date picker calendar button does not have a visible focus indicator when focused. It is still functional via keyboard but lacks context that it is focused.
Indicator is missing focus because the button is empty and relies on mask technique to set icon.
High contrast icons throughout the design system are mostly set as a mask using the
add-color-icon()mixin. We use this method to color the icon using high contrast tokens and ensure visibility throughout high contrast light/dark themes.Because the mask covers the entire element, the focus indicator is covered by the mask as well.
Solution
Change the icon color to
highlighton focus.Possible downfalls
The default light-theme colors aren’t great and still make it hard to see that the color is focused. We could try another high contrast token but it feels beneficial to use
highlight. Some users customize their high contrast theme and it’s important they recognize the color.Alternatively, we could investigate other ways to place the icon and ensure visibility in high-contrast.
Major changes
Calendar icon changes color on focus in high contrast modes.
Testing and review