feat(a11y): add high-contrast theme alongside light/dark#284
Merged
JacobCoffee merged 3 commits intomainfrom Apr 28, 2026
Merged
feat(a11y): add high-contrast theme alongside light/dark#284JacobCoffee merged 3 commits intomainfrom
JacobCoffee merged 3 commits intomainfrom
Conversation
Replaces the dark-mode toggle in the side menu with a 3-way segmented picker (Light / Dark / High Contrast) and adds an HC palette targeting WCAG 2.2 AAA — pure #000/#fff with a yellow primary, bold borders, and a 3px focus ring on interactive elements. Storage migrates the legacy darkTheme boolean to the new theme key on first read. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… contrast Iterative pass after the initial HC theme work: * Replace neon HC palette with Apple-system colors (#ffd60a yellow, #5ac8fa cyan, #c084ff purple). Inline contrast ratios documented at every color rule; both HC variants beat WCAG AAA for body text. * Split HC into `high-contrast-light` (cream + deep purple #4a0072) and `high-contrast-dark` (deep ink + warm yellow). Storage migrates the legacy single `'high-contrast'` value forward. * Swap the side-menu theme picker from a 3-button segment to an ion-select with action-sheet interface so all four full-text labels fit without truncation. * Drop the `[color]="session.color"` row tinting and the per-track `border-left` side-stripe from the schedule list; the track-badge text already names the track. Closes WCAG 1.4.1 (use of color), the impeccable side-stripe ban, and a sub-3:1 border-color issue in HC light. * Repaint the seven track-badge fills that failed WCAG AA: tutorial, lightning-talks, and charla darkened for white text; security, ai, poster, and sponsor flipped to dark text on their original bg. * Add a global `prefers-reduced-motion: reduce` block in global.scss to ramp every animation and transition to ~0ms; closes the two infinite pin-pulse animations on the maps. * Add a skip-to-content link as the first focusable child of ion-app; ion-router-outlet picks up tabindex=-1 so focus actually transfers. * Fix OS-coupled image inversion in social-media.page.scss to follow the in-app dark themes instead of `prefers-color-scheme`. * Replace hardcoded HC surface colors in page overrides with var(--ion-card-background) so the rules collapse to one rule per surface that themes correctly per variant. * Add a single global rule that forces white on every menu/back button in a toolbar, except those that explicitly opt into Ionic's color system via [color="..."]. Fixes near-black hamburger/back icons on the ~20 pages with branded purple gradient headers in light theme. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces the dark-mode toggle in the side menu with a 3-way segmented
picker (Light / Dark / High Contrast) and adds an HC palette targeting
WCAG 2.2 AAA — pure #000/#fff with a yellow primary, bold borders, and
a 3px focus ring on interactive elements. Storage migrates the legacy
darkTheme boolean to the new theme key on first read.
Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com