github-samples / github-samples/caldova-careers
Add a high-contrast mode toggle
Open
Nobody has claimed this yet.
workshop:accessibility
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Some candidates find the default dark slate theme difficult to read because of insufficient contrast between text and background. Add a high-contrast mode that users can toggle on and off, and remember their choice across visits.
Acceptance criteria
- A visible, keyboard-accessible control lets users toggle high-contrast mode on and off.
- High-contrast mode meets WCAG 2.1 AA contrast ratios for text and interactive elements.
- The user's preference persists across page reloads and navigation.
- The toggle has a clear accessible name and stable
data-testidattributes. - Playwright tests verify the toggle switches modes and that the preference persists.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the existing theme styles and the page entry point, then find the Playwright test setup. Add a keyboard-accessible toggle with stable data-testid attributes, WCAG 2.1 AA contrast, and persisted preference behavior; done means the Playwright tests verify switching modes and persistence across reloads and navigation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- playwright, typescript
- Domain
- accessibility, frontend, testing
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 74/100