Improve header accessibility and keyboard navigation support #4804

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?

• 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.