Getting Started
- Fork the repository: https://github.com/JointSave-org/Joint_Save
- Clone your fork:
git clone https://github.com/<your-username>/Joint_Save.git
cd Joint_Save
- Create a new branch:
git checkout -b improve/accessibility-audit
Overview
JointSave's dashboard has several accessibility gaps that prevent users relying on screen readers, keyboard navigation, or other assistive technologies from using the platform effectively.
Checked key components and found:
frontend/components/group/group-details.tsx: pool status badges are visual-only (no aria-label)frontend/components/dashboard/dashboard-tabs.tsx: tabs are not keyboard navigable (no arrow key support)frontend/components/notifications/notification-bell.tsx: dropdown is not focus-trapped when openfrontend/components/explore/pool-card.tsx: pool cards are not announced by screen readersfrontend/app/dashboard/page.tsx: no skip-to-content link- Color contrast issues on several text elements using low-opacity Tailwind classes
This issue conducts a comprehensive accessibility audit and fixes the identified issues, targeting WCAG 2.1 AA compliance.
Requirements
Global Fixes
- Add skip-to-content link at the top of the dashboard layout
- Ensure all pages have proper
<h1> headings (only one per page)
- Add
lang attribute to <html> tag (dynamic based on i18n locale)
Component-Level Fixes
- Tabs: Add
role="tablist", role="tab", aria-selected, aria-controls, keyboard navigation with Left/Right arrow keys
- Notification Bell: Add
aria-label, aria-expanded, focus trapping, close on Escape
- Pool Cards: Add
role="article", aria-label with pool name and stats, focusable with Enter key
- Status Badges: Add
aria-label to all status badges (color is never the only indicator)
- Forms: All fields have associated
<label> elements, error messages linked via aria-describedby, required fields marked with aria-required
- Modal Dialogs: Focus trapped, focus returned on close,
aria-modal="true", role="dialog"
- Buttons and Links: All icon-only buttons get
aria-label
Color Contrast Fixes
- Audit all text elements for WCAG AA contrast ratio (4.5:1)
- Replace
text-gray-400 on white backgrounds with text-gray-500 or darker
Testing
- Install
@axe-core/react for development-time accessibility warnings
- Run axe audit on all dashboard pages and fix reported violations
- Verify all fixes with keyboard-only navigation
Acceptance Criteria
Getting Started
Overview
JointSave's dashboard has several accessibility gaps that prevent users relying on screen readers, keyboard navigation, or other assistive technologies from using the platform effectively.
Checked key components and found:
frontend/components/group/group-details.tsx: pool status badges are visual-only (no aria-label)frontend/components/dashboard/dashboard-tabs.tsx: tabs are not keyboard navigable (no arrow key support)frontend/components/notifications/notification-bell.tsx: dropdown is not focus-trapped when openfrontend/components/explore/pool-card.tsx: pool cards are not announced by screen readersfrontend/app/dashboard/page.tsx: no skip-to-content linkThis issue conducts a comprehensive accessibility audit and fixes the identified issues, targeting WCAG 2.1 AA compliance.
Requirements
Global Fixes
<h1>headings (only one per page)langattribute to<html>tag (dynamic based on i18n locale)Component-Level Fixes
role="tablist",role="tab",aria-selected,aria-controls, keyboard navigation with Left/Right arrow keysaria-label,aria-expanded, focus trapping, close on Escaperole="article",aria-labelwith pool name and stats, focusable with Enter keyaria-labelto all status badges (color is never the only indicator)<label>elements, error messages linked viaaria-describedby, required fields marked witharia-requiredaria-modal="true",role="dialog"aria-labelColor Contrast Fixes
text-gray-400on white backgrounds withtext-gray-500or darkerTesting
@axe-core/reactfor development-time accessibility warningsAcceptance Criteria