Improve header accessibility and keyboard navigation support
- Dominant language
- Python
- Stars
- 451
- Forks
- 707
- Avg merge
- 22h 59m
- Merged PRs (30d)
- 91
Description
**Is your feature request related to a problem? Please describe.**
The current header navigation can be improved for keyboard-only and screen-reader users. There is no skip-to-content mechanism, mobile navigation state is not fully exposed through ARIA attributes, and focus handling during the mobile menu open/close lifecycle could be more accessible.
**Describe the solution you'd like**
Implement the following accessibility improvements:
* Add a keyboard-accessible "Skip to main content" link.
* Add an anchor target on the main content container.
* Improve mobile menu accessibility using:
* `aria-expanded`
* `aria-controls`
* navigation roles and visibility semantics
* Add focus management for the mobile navigation:
* move focus into the menu when opened
* restore focus when closed
* Add Escape-key support to close the mobile menu.
* Add automated accessibility tests using jest-axe.
**Describe alternatives you've considered**
The current implementation works functionally but relies on users manually navigating through the page structure. Alternative approaches could include a full focus-trap implementation, but the proposed changes provide a simpler and lower-risk improvement while significantly improving accessibility.
**Are you going to work on implementing this?**
* [x] Yes
**Additional context**
A working implementation has already been prepared and tested on a fork. The changes affect:
* frontend/src/app/layout.tsx
* frontend/src/components/Header.tsx
* frontend/src/app/globals.css
* frontend/**tests**/a11y/components/Header.a11y.test.tsx
The implementation also includes accessibility-focused test coverage.
Contributor guide
Assessment
This issue has not been assessed yet.