Skip to content

fix(menubar): enable keyboard focus for main navigation menuitems #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
arthurgousset wants to merge 1 commit into from
Closed

fix(menubar): enable keyboard focus for main navigation menuitems #13

arthurgousset wants to merge 1 commit into from

Conversation

@arthurgousset
Copy link
Collaborator

@arthurgousset arthurgousset commented Nov 13, 2025

Summary

Fixes WCAG 2.4.3 (Focus Order) by removing hardcoded tabIndex={-1} attributes that excluded main navigation menuitems from the keyboard focus order.

Issue: Main navigation menubar (Scuola, Università, Giuridico, Saggistica) was completely inaccessible to keyboard-only users.

Solution: Removed hardcoded tabIndex values, allowing the existing initTabindex() method to properly implement the roving tabindex pattern.

Test Plan

  • Verified menuitems appear in accessibility tree
  • Confirmed first menuitem has tabindex="0" after page load
  • Tested keyboard navigation (Tab, Arrow keys, Home/End, Enter, Escape)
  • Verified focus indicators visible during keyboard navigation
  • Confirmed no visual regressions for mouse users
  • Tested across mobile and desktop viewports

Evidence

On workback.ai.

Issues Resolved

This PR resolves:

  • Issue 182: Main navigation menu excluded from keyboard focus order
  • Issue 134: Main navigation menubar items completely excluded from keyboard focus order
  • Issue 86: Main navigation menu excluded from keyboard tab order

WCAG Reference: 2.4.3 Focus Order (Level A)

@arthurgousset
fix(menubar): enable keyboard focus for main navigation menuitems
2b8a87b 
Removed hardcoded tabIndex={-1} that excluded menubar items from keyboard
focus order. The initTabindex() method now properly manages focus by setting
the first menuitem to tabindex="0" and others to "-1" for roving tabindex
pattern.

This fix ensures keyboard-only users can access the primary navigation
(Scuola, Università, Giuridico, Saggistica) in the logical page structure,
resolving a critical barrier for users with motor impairments.
@fquffio
Copy link
Collaborator

fquffio commented Nov 18, 2025 •
edited
Loading

Mmh… I'm not really sure about this.

Those tabindex="-1" are there for a reason. The user can navigate through the menu using arrow keys, and they are correctly announced as "menu item (N of M)" by VoiceOver (although admittedly I haven't tried recently with other assistive technologies). See this screenshot:

Screenshot of Apple's VoiceOver announcing: UNIVERSITÀ, menu item, (2 of 4), menu bar Zanichelli.it 4 items

By setting all menu items as tabindex="0", a user trying to explore the page would need to hit the Tab key many (many!) times before reaching the page's main content. On the contrary, leaving tabIndex={-1} as it currently is and allowing menu navigation with arrow keys looks preferrable, at least to my judgement, as it allows both navigation within the menu as one would usually expect, and quick navigation across the main landmarks of the page.

@arthurgousset
Copy link
Collaborator Author

arthurgousset commented Nov 24, 2025

I agree, thanks for the review @fquffio. This looks like a false positive.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@arthurgousset @fquffio