Skip to content

feat: add high-contrast mode overrides for NotificationsPanel (Closes #812) - #860

Open
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/notificationspanel-high-contrast-812
Open

feat: add high-contrast mode overrides for NotificationsPanel (Closes #812)#860
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/notificationspanel-high-contrast-812

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds high-contrast mode (prefers-contrast: more) overrides for the NotificationsPanel component (Closes #812).

When a user's OS is set to "more contrast", translucent borders, subtle background tints, and low-contrast text become hard to read. This PR ensures every interactive and informational element in the notifications panel has a distinct visual boundary.

Changes

src/styles/contrast.css (new)

Defines @media (prefers-contrast: more) overrides scoped to the .notifications-panel container:

  • Explicit solid borders replace the default translucent border/60 borders on the list container and rows.
  • Full-contrast text — force the design-token foreground value (no opacity reduction) on body copy and buttons.
  • Stronger unread-row tint — unread notifications (aria-current) get a more pronounced accent background so they're distinguishable without relying on hue.
  • Opaque sticky toolbar — the bottom action bar becomes fully opaque so content doesn't bleed through and reduce text contrast.
  • Full-contrast card background — the empty-state card gets a solid card background.

src/pages/NotificationsPanel.tsx

  • Added a notifications-panel wrapper class to the page container so the high-contrast overrides are scoped and don't affect other components.
  • Imported ../styles/contrast.css.

src/pages/__tests__/NotificationsPanel.test.tsx

Added a high-contrast mode test group:

  • Asserts the .notifications-panel wrapper class is applied.
  • Asserts the component imports ../styles/contrast.css.
  • Asserts the list container retains the border-border token the contrast overrides depend on.

WCAG 2.1 AA compliance

  • Non-text contrast (SC 1.4.11): explicit solid borders meet the 1.5:1 minimum.
  • Text contrast (SC 1.4.3): full foreground token on body copy meets the 4.5:1 ratio.
  • Unread state is conveyed by both background tint and the aria-current attribute (not hue alone).

Verification

  • tsc --noEmit reports no errors in the touched files.
  • The existing test suite contains a pre-existing React 19 / Jest compatibility failure (React.act is not a function) unrelated to this change; next build fails on a pre-existing missing font path in app/api/og/route.tsx, also unrelated.

@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 NotificationsPanel [b#078]

1 participant