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: Keyboard navigation does not work with templated subitems #7414

Open
scooby359 opened this issue Nov 13, 2024 · 1 comment
Open
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA

Comments

@scooby359
Copy link

scooby359 commented Nov 13, 2024

Describe the bug

If a menu bar submenu menuitem has a template, keyboard navigation can not select it. Using a mouse to click on the templated item also does not work.

menubar-keyboard nav

Reproducer

https://stackblitz.com/edit/vitejs-vite-hgjvbm?file=src%2FApp.tsx

System Information

System:
    OS: Windows 11 10.0.26100
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
    Memory: 6.48 GB / 31.61 GB
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.3 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (130.0.2849.56)
    Internet Explorer: 11.0.26100.1882

Steps to reproduce the behavior

Prerequisites:

  • Set up a menu bar where some sub menuitems use template content

While using a menu bar menuitem, where some sub items have a template, navigate around the menu using the keyboard arrows. Where subitems use a template, they cannot be selected with the keyboard. Where subitems use a template, clicking on them with a mouse also has no effect.

Expected behavior

All items in the menu should be selectable, even those using a template.

@scooby359 scooby359 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 13, 2024
@melloware melloware added Component: Accessibility Issue or pull request is related to WCAG or ARIA and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 13, 2024
@snake-py
Copy link
Contributor

snake-py commented Nov 20, 2024

Looking at the docs, I see that all items which have sub items of the Menubar component get tabindex="-1", which basically makes keyboard navigation impossible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA
Projects
None yet
Development

No branches or pull requests

3 participants