USWDS - Forms: Remove high-contrast disabled border from %block-input-styles

[mahoneycm]

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:

• Text input →
• Combobox →
• Input mask →

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-styles placeholder. This prevents the disabled border by default for text input elements.

Testing and review

1. Visit any text input form element
2. Turn on forced-colors mode via the render tab within devTools (or whatever your preferred method is)
3. Confirm the input border matches text color
4. Activate the elements disabled state
5. Confirm that the element's border color changes to the disabled color.

Testing checklist

• Confirm text input elements do not have disabled border by default
• Confirm that disabled border is correctly applied to disabled input elements

[amyleadem]

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-border mixin is only used in Sass for disabled states

Tested with Chrome forced-colors emulation

Before (Non-disabled state):

After (Non-disabled state):

[mejiaj]

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.

[thisisdano]

Nice scoped fix