Accessibility audit and fixes for the dashboard navbar, mobile drawer, and events table

[greatest0fallt1me]

Description

The project already invests in a11y (see app/(dashboard)/settings/ACCESSIBILITY.md and its __tests__/settings.a11y.test.tsx), but coverage is uneven elsewhere. components/navbar/MobileDrawer.tsx implements an ad-hoc focus trap and ESC handler in raw useEffects, components/navbar/Navbar.tsx and SearchInput.tsx need an aria/label review, and category status in components/events/events-table.tsx is conveyed largely through color badges. This issue runs a focused audit of those surfaces and lands fixes plus regression tests.

Requirements and context

• Audit and fix the dashboard Navbar, MobileDrawer, SearchInput, and EventsTable for: accessible names on icon-only controls, correct focus management (the drawer should reliably trap focus and restore it to the trigger on close), and status conveyed by more than color.
• Ensure the mobile drawer's focus trap covers Shift+Tab wrap-around and returns focus to the opener; prefer the existing components/ui/sheet.tsx/dialog.tsx Radix primitives if they simplify correct behavior.
• Add aria-labels/roles where missing and ensure the events status/category indicators include a text or icon cue, not color alone.
• Non-functional: no visual redesign; changes must be keyboard- and screen-reader-verified; meet WCAG 2.1 AA for the touched components.
• Extend the existing a11y test approach used in the settings folder to the audited components.

Acceptance criteria

• Icon-only controls in the navbar/drawer have accessible names.
• The mobile drawer traps focus (including Shift+Tab) and restores focus to its trigger on close.
• Event category/status is distinguishable without relying on color alone.
• Search input is properly labelled and operable by keyboard.
• A11y regression tests are added for the audited components.
• Touched components reach >=85% coverage on changed logic.

Suggested execution

1. Fork the repo and create a branch — git checkout -b feature/a11y-navbar-events.

2. Implement changes — components/navbar/MobileDrawer.tsx, components/navbar/Navbar.tsx, components/navbar/SearchInput.tsx, components/events/events-table.tsx.

3. Write/extend tests — Jest + React Testing Library + @testing-library/user-event with pnpm; add a11y tests modeled on app/(dashboard)/settings/__tests__/settings.a11y.test.tsx (role/label queries, focus assertions).

4. Test and commit —

pnpm install
pnpm test
pnpm test:coverage
pnpm lint

Example commit message

fix(a11y): label navbar controls, harden drawer focus trap, and de-color-only event status

Guidelines

• Aim for >=85% coverage on changed logic and document findings in the settings ACCESSIBILITY.md or a new a11y doc.
• Verify with keyboard and a screen reader; target WCAG 2.1 AA for the touched surfaces.
• Timeframe: 96 hours.

[libby-coder]

I would like to work on this issue because I have experience auditing and fixing accessibility issues in React applications using WCAG 2.1 AA standards,and I understand the nuances of focus trap correctness, accessible naming,and conveying state beyond color alone. I can audit and fix the four targeted components, replace the ad-hoc focus trap in MobileDrawer.tsx with the existing Radix primitives, and extend the established a11y test pattern to cover all audited surfaces within the 96-hour timeframe.