USWDS - Disabled styles: Improve consistency in high contrast mode

[amyleadem]

Summary

Improved consistency of disabled styles in forced colors mode.

Breaking change

This is not a breaking change.

Related issue

Closes #5198

Related pull requests

Changelog: uswds/uswds-site#2102

Preview link

Preview link: Disabled form elements

Problem statement

PR #5063 introduces consistent disabled styles across all components. Viewing these components in high contrast mode exposes further inconsistency across components as well as missing icons & hover states.

Solution

This PR adds styles for disabled styles in forced-color mode.

Before:

After:

Testing and review

Turning on forced-colors mode in Chrome

1. Visit Disabled form elements page
2. Open devTools
3. Press the three dot menu button in the top right corner of the devTools panel
4. Hover more tools and open rendering panel
5. Scroll down to Emulate CSS media feature forced-colors
6. Select forced-colors: active
7. Inspect Accordion component
8. In the rendering panel, find the prefers-color-scheme emulation and test high contrast in light and dark themes

Tests

• Confirm that all form elements show a consistent and predictable disabled (and aria-disabled) style in forced color mode
  • Confirm that there is no change in the hover state
• Confirm no visual regressions in disabled form elements in standard mode
• Confirm code style

[amycole501]

In my light theme, the forced colors do look different from the default state, but when I turn them on they're oddly difficult to see. Maybe because of my color palette?

[amyleadem]

FYI - handing the reins back to @mahoneycm, who originated this work. Please direct any questions or comments to him.

[mahoneycm]

Looking great! Disabled styles are consistent and adopt the system color for high-contrast disabled elements across all form elements! Thank you for your additions @amyleadem

I met with @amycole501 to discuss the high-contrast light mode screenshot she shared. It does indeed look like there was a shift in Chrome's high-contrast light theme colors. Before this change, disabled elements had a purple color instead of the maroon we are seeing in the screenshot.

Since we are dealing with system tokens, this color change is out of our control. We don't want to use a token that is not associated with the defined disabled palette so as to not confuse users who are expecting the pre-defined colors or who have made a custom high contrast and defined their disabled token color manually.

All we should be doing is setting it to the disabled system token (GrayText) and let the user's system do the rest.

[mahoneycm]

@mejiaj Ready for review!

[mejiaj]

@amyleadem @mahoneycm added some comments to re-use more of the existing mixins to keep this work more manageable.

[mahoneycm]

@mejiaj Thanks for catching those redundancies! Looking cleaner now 👍

Issues addressed