https://github.com/recklyss/keyboard-challenge
A repository for the accessibility challenge
https://github.com/recklyss/keyboard-challenge
Last synced: about 1 month ago
JSON representation
A repository for the accessibility challenge
- Host: GitHub
- URL: https://github.com/recklyss/keyboard-challenge
- Owner: recklyss
- Created: 2025-05-14T09:08:00.000Z (about 1 year ago)
- Default Branch: develop
- Last Pushed: 2025-06-02T02:54:40.000Z (about 1 year ago)
- Last Synced: 2026-05-23T01:34:39.981Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://keyboard-challenge-nine.vercel.app
- Size: 67.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Keyboard-Only Challenge
A single-page React app designed to test and demonstrate accessible, keyboard-only navigation and form completion. Built with React, TypeScript, and Vite.
## Project Overview
This project is an accessibility challenge where users must complete a multi-field form using only the keyboard. The app demonstrates best practices for keyboard navigation, focus management, accessible form validation, and color contrast, using the Thoughtworks color palette.
## Accessibility Goals
- **All interactions are possible with keyboard only** (Tab, Shift+Tab, Enter, Space, Arrow keys)
- **Accessible modal dialog** with focus trap and ARIA roles
- **Native HTML form elements** for best accessibility
- **Visible focus indicators** for all interactive elements
- **Color contrast** meets WCAG 2 AA standards
- **ARIA live regions** for error and status messages
## Main Features
- **Single, multi-field form** inside a modal dialog
- **Fields:** Name, Email, Age, Country, State, City (all with validation)
- **Native `` dropdowns** for country, state, city
- **Custom slider widget** for satisfaction (0-100), keyboard accessible
- **Confetti animation** on successful submission
- **Responsive, modern UI** using the Thoughtworks color palette
## Keyboard Navigation
- **Tab / Shift+Tab:** Move between fields and buttons
- **Enter / Space:** Activate buttons, open modal, submit form
- **Arrow keys:** Adjust slider value
- **Esc:** Close modal (returns focus to start button)
- **Form validation:** Errors are announced and focus moves to the first error
## Thoughtworks Color Palette Used
- **Mist gray:** #EDF1F3
- **Onyx black:** #000000
- **Flamingo pink:** #F2617A
- **Wave blue:** #003D4F
- **Turmeric yellow:** #CC850A
- **Jade green:** #6B9E78
- **Sapphire blue:** #47A1AD
- **Amethyst purple:** #634F7D
## Running the Project
1. Install dependencies:
```sh
npm install
```
2. Start the dev server:
```sh
npm run dev
```
3. Open [http://localhost:5173](http://localhost:5173) in your browser.
## License
MIT