[menu] Inferred menu item label includes SVG description
Bug report
Current behavior
Open the reduced test case, open the menu, and try to jump to a menu item using the keyboard (e.g. "b" for "bar"). Observe that it doesn't work.
This seems to be because the inferred menu item label includes the SVG description (desc).
Expected behavior
I know that we can add an explicit label, but it's nice to lean on inference.
Maybe the inferred menu item label should not include the SVG description. Thoughts?
Or, maybe you would recommend removing the SVG description altogether?
Reproducible example
https://stackblitz.com/edit/qcyq6nxj?file=src%2FApp.tsx
Base UI version
1.0.0-beta.5 (probably also earlier versions, I haven't tested)
Which browser are you using?
Chrome
Which OS are you using?
Mac OS
Which assistive tech are you using (if applicable)?
N/A
Additional context
Slightly related: https://github.com/mui/base-ui/issues/1942
For SVGs like this, you should add aria-hidden since it's already labeled by the text elsewhere. The Icon and Arrow parts of components do this for instance, where they don't have <desc>s. Is there a reason there needs to be one for this?
As you mentioned, for typeahead, a workaround is to set an explicit label (<Menu.Item label="...">) so it doesn't read from .textContent which includes the description. I'm not sure of a way to avoid that at this moment
In our design system, all icons have a desc. I'm debating removing it from all icons though, because we usually have alternative text elsewhere e.g. aria-label for icon buttons.