[Menubar] Adds keyboard behaviors to the menubar, improves accessibility

[tespin]

Fixes #2933

Just setting this up to track next steps for the component! This PR focuses on adding proper keyboard behaviors to the recently refactored Menubar. Currently in progress

---

Update

The Menubar component now has keyboard navigation and enhanced accessibility support. There are some other improvements to make which are listed at the end, but I'll implement them in future PRs seeing as this one has gotten rather large.

Before:
Navigation happened purely through Tab / Shift + Tab. Escape functionality worked but otherwise behaviors were not intuitive or accessible. Focus is not tied to state.

old_menubar_2.mov

After:
Most keyboard behaviors from the WAI ARIA authoring guide implemented. Tab behavior works as expected and initial focus styles are available.

menubar_test.mov

Key Changes

• Implemented roving tab index in Menubar.jsx for focus management
• Updated aria roles, such as aria-orientation='horizontal'on Menubar and aria-labels where applicable
• Navigation support, including:
  • Horizontal and vertical navigation
  • Home/end, enter/space support
  • Basic focus trapping in submenus
• Improved HTML structure
  • wrapped Menubar in nav element
  • moved from div-based menubar to ul/li
  • Logo is moved outside of the nav, UserMenu is back in
  • left and right menu items now wrapped in ul elements with role=group
• added SubmenuContext for managing submenu state
• MenubarSubmenu supports listbox aria roles, such as with the options in LanguageMenu
• basic tests checking for checking component renders, keyboard behavior, and aria roles
• added keyboard styles
• added basic JSDoc comments for components

To Do

• testing:
  • test with screen readers
  • verify aria structure and role handling
• errors:
  • focus is not properly entering certain modals
  • some timing issues with effects and blur/focus handlers
• optimizations:
  • consider refactoring context structure
  • memoize index and menuItem calculations
  • menuItems and menuItemToId could probably be combined into a better data structure
  • consolidate the more complex state updates with useReducer
• other features/improvements:
  • add support for matching focused menu item to pressed character key
  • complete focus styles
  • extract common logic into hooks
  • tests could be more thorough
  • implement better compound component pattern

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123

[tespin]

• Extract logo to header level for better semantic structure
• Ensure arrow keys only cycle through menu items, excluding the logo

[raclim]

I love the addition of documentation for the components!

[raclim]

Thanks so much for continuing the work on the navigation menu section—I really love the transformation you've been giving it!

I think overall this PR looks great so far! I feel like there's also a few great practices that are being introduced here (such as the formatting of the PR, component documentation, more detailed commenting) that could be adopted throughout the codebase as well! I also agree that this is a good point to stop at for this PR, and the rest of the tasks outlined in the description could be addressed in future ones.

I think the only issue I might've found is that I noticed that when using the arrow keys to navigate specifically the File SubMenu, it ends up skipping over "Open".

nav_file_menu.mov

---

Besides this, I mostly had a few questions while testing it out and looking through the code, which I'll list out below!

1. When navigating the SubMenus, I noticed that both the mouse hover and arrow key inputs are visible, which I tried to depict in the video. I feel like this could get a bit confusing, but unsure if it might've been intentional!

nav_language_menu.mov

2. I also noticed that the focus state immediately appears on the Menubar as soon as I landed on the editor page. I was wondering if this might've been intended as well!

3. I know there's a few different opinions around adding comments, I was curious about why you decided to add more explanatory comments throughout the components!

4. While looking through MenubarSubmenu.jsx, I feel like it could be broken down into maybe a few files, but was wondering if you felt that way as well!

[tespin]

I think the only issue I might've found is that I noticed that when using the arrow keys to navigate specifically the File SubMenu, it ends up skipping over "Open".

ooo interesting ... for some reason this didn't happen to me earlier but now it's occurring. it also gets very weird when I save the sketch and new menu items appear? seems like it has something to do with hideIf prop. the way I'm tracking the menu items probably isn't accounting for the conditionally rendered options. definitely needs another look.

separately, i also run into an error when the user is unauthenticated and attemps to click "Login" or "Signup", as it's looking for a menuitem element to focus but there isn't one in this case.

1. When navigating the SubMenus, I noticed that both the mouse hover and arrow key inputs are visible, which I tried to depict in the video. I feel like this could get a bit confusing, but unsure if it might've been intentional!

definitely not intentional, should probably prioritize one interaction over the other!

2. I also noticed that the focus state immediately appears on the Menubar as soon as I landed on the editor page. I was wondering if this might've been intended as well!

i should fix this as well, the auto-focusing feels disruptive and likely isn't wcag-oriented.

3. I know there's a few different opinions around adding comments, I was curious about why you decided to add more explanatory comments throughout the components!

thanks for this question! most comments I added for myself just to keep track of what was happening as it was getting a little complex ... i also felt that it wasn't always clear what some code was doing. i can probably remove some of the comments for code that is more self-evident.

4. While looking through `MenubarSubmenu.jsx`, I feel like it could be broken down into maybe a few files, but was wondering if you felt that way as well!

yup, agreed! this is a change that makes sense to me.

i know it's a lot to review so thanks for taking the time! let me go back in and address some of the more urgent bugs regarding the auto-focusing and weird navigation. as for the other issues (mouse and key inputs being visible, breaking down the submenu into smaller files, etc ...) do you think it's ok if i add those to this PR or can I address them in future ones?

[raclim]

i know it's a lot to review so thanks for taking the time! let me go back in and address some of the more urgent bugs regarding the auto-focusing and weird navigation. as for the other issues (mouse and key inputs being visible, breaking down the submenu into smaller files, etc ...) do you think it's ok if i add those to this PR or can I address them in future ones?

That sounds good to me!! I think the other issues can probably be addressed in future ones, but please feel free to go ahead with whichever feels best to you! Thanks so much again for your efforts on this! :)