USWDS - Forms: Remove high-contrast disabled border from %block-input-styles #5397
Conversation
There was a problem hiding this comment.
Thanks for this quick fix, @mahoneycm.
- Confirmed that non-disabled form input components do not show disabled colors in forced colors mode
Note
The input mask component currently shows disabled styles but this (and other issues with input mask in forced colors mode) will be addressed in PR #5378
- Confirmed that disabled form input components do show disabled colors
- Confirmed that the
u-disabled-high-contrast-bordermixin is only used in Sass for disabled states
Tested with Chrome forced-colors emulation
Before (Non-disabled state):
After (Non-disabled state):
There was a problem hiding this comment.
I was able to confirm these styles are only showing for disabled inputs in HCM. Below is a screenshot of the visual difference of an active (not disabled) input vs disabled.
Active (top) vs Disabled (bottom)
Warning
While testing I discovered a duplicate media query related to this work. Created issue USWDS - Bug: Duplicate forced colors media query · Issue #5403 · uswds/uswds for that.
Summary
Fixed a bug that caused standard text input variants to show disabled styles in forced colors mode. Now the disabled border color only shows when the element is disabled.
Breaking change
This is not a breaking change.
Related issue
Closes #5396
Related pull requests
Changelog →
Preview link
Preview link:
Problem statement
Text input form elements in high contrast mode display the disabled border by default.
Solution
Removed the disabled high contrast border mixin from the
%block-input-stylesplaceholder. This prevents the disabled border by default for text input elements.Testing and review
Testing checklist