[a11y] difficult to differentiate between focused and invalid states

[CITguy]

Describe the Bug

Form inputs are inconsistently styled and have accessibility issues with differentiating between valid/invalid states.

Steps to Reproduce

Steps to reproduce the behavior:

1. Install "Toggle Grayscale" Chrome extension (install link at CITguy/toggle-grayscale)
2. Navigate to https://helixdesignsystem.github.io/helix-ui/components/text-input/
3. Click "Required" checkbox under Control Options
4. Click within Text Input in the example
5. note the appearance of the input
6. Click away from Text Input (leaving input blank/invalid)
7. note the appearance of the input
8. toggle the Toggle Grayscale extension ON (converting page to grayscale)
9. repeat steps 2-7

Expected behavior

1. Focus shadow should be consistent between Focus (valid) and Focus (invalid)
2. Focus (invalid) should be distinguishable when compared to Focus (valid) when Toggle Grayscale is turned ON

Screenshots

Mode	Focused (valid)	Focused (invalid)
Color
Grayscale

• "valid" + focus does not have shadow, while "invalid" + focus does have shadow
• "valid" vs "invalid" underline color cannot be easily differentiated by users with color vision deficiencies

Environment

Please complete the following information:

• Device: any
• OS: any
• Browser:
  • Chrome (because its the only browser that the Toggle Grayscale extension works on), but the design is equally broken in all browsers

Additional Context

WCAG § 1.4.1 Use of Color - Level A

[100stacks]

hey @CITguy thanks for the feedback. The new specifications are still in flux, so this may change.