Skip to content
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.

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

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

Draft
wants to merge 12 commits into
base: develop
Choose a base branch
from

Conversation

tespin
Copy link
Contributor

@tespin tespin commented Jan 17, 2025

Progresses #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

  • Implement keyboard behaviors
    • top level menu items are navigable
    • submenus are navigable
    • character search to jump to items
    • mouse behaviors are synced
  • add proper styling for focused items
  • Tests
    • unit tests
      • Menubar.jsx
      • MenubarItem.jsx
      • MenubarSubmenu.jsx
    • test with screen reader
    • state management tests
    • verify focus management and keyboard navigation
    • test across different OSs
      • apple
      • windows
      • linux
    • browser testing
      • chrome
      • firefox
      • safari
      • edge
      • brave
      • opera

Changes (as of 1/17/25):

  • top level items are navigable
  • ButtonOrLink has been setup with ref forwarding for focus management
  • Logo was extracted into its own component and moved out of the Menubar

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 tespin mentioned this pull request Jan 17, 2025
10 tasks
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

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.

1 participant