Skip to content

fix: improve mobile navigation accessibility#39

Closed
simbongile-mkhotheli wants to merge 1 commit into
mainfrom
fix/accessibility-navigation
Closed

fix: improve mobile navigation accessibility#39
simbongile-mkhotheli wants to merge 1 commit into
mainfrom
fix/accessibility-navigation

Conversation

@simbongile-mkhotheli

Copy link
Copy Markdown
Contributor

Summary

Improve mobile navigation accessibility by enhancing keyboard interaction, focus management, and screen reader support.

Type of Change

  • Bug fix

Changes

  • Navbar: Implemented focus trapping (WCAG 2.1.2) so keyboard users don't tab "behind" the mobile menu. Added proper ARIA states for the disclosure pattern.
  • Keyboard Support: Added Escape to close the menu. Standardized focus-ring on the home page slider and file upload zone.
  • ARIA: Linked the menu toggle to the navigation list via aria-controls.

Keyboard Support: Added Escape to close the menu. Standardized focus-ring on the home page slider and file upload zone.

ARIA: Linked the menu toggle to the navigation list via aria-controls.

Testing

  • npm run lint
  • npm test
  • npm run build
  • Manual browser testing
  • Verified keyboard-only navigation
  • Verified focus remains within the mobile menu while open
  • Verified the mobile menu closes with the Esc key
  • Verified screen reader labels update correctly

Screenshots

N/A (Accessibility improvements)

Notes

This PR improves the accessibility of the mobile navigation by implementing proper focus management, enhancing keyboard interactions, and strengthening screen reader support. These changes align with WCAG 2.1.2 AA recommendations while preserving the existing user experience.

@ThanasisSoftwareDeveloper ThanasisSoftwareDeveloper left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By Thanasis Codes

@ThanasisSoftwareDeveloper ThanasisSoftwareDeveloper left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By Thanasis

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants