Skip to content

feat: add high-contrast mode overrides for AmountInput (Closes #752) - #863

Open
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/amount-input-contrast-752
Open

feat: add high-contrast mode overrides for AmountInput (Closes #752)#863
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/amount-input-contrast-752

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds high-contrast mode (prefers-contrast: more) overrides for the AmountInput component (Closes #752). When a user's OS is set to "more contrast", the input field and status chips get explicit solid borders and full-contrast text colours.

Changes

src/pages/AmountInput.tsx

  • Added amount-input wrapper class to the root container for scoped high-contrast CSS targeting.
  • Added import of ../styles/contrast.css.

src/styles/contrast.css (new)

  • Added a new @media (prefers-contrast: more) section scoped to .amount-input:
    • Forces solid black border and white background on the input field.
    • Ensures placeholder text is fully opaque.
    • Strengthens status chip borders to 1.5px solid black.
    • Promotes muted text to high-contrast equivalents.
    • Forces all card/background/muted utilities to solid white.

src/pages/__tests__/AmountInput.contrast.test.tsx (new)

  • Verifies the amount-input wrapper class is applied.
  • Verifies the component imports ../styles/contrast.css.
  • Verifies status badges (success/warning/error) are rendered with the rounded-sm class that the contrast overrides depend on.
  • Verifies the input field is rendered as a focusable native element.

Verification

  • All 6 tests pass for the new contrast test suite.

@vercel

vercel Bot commented Aug 8, 2026

Copy link
Copy Markdown

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add high-contrast mode overrides for AmountInput [b#018]

1 participant