base-ui icon indicating copy to clipboard operation
base-ui copied to clipboard

[menu] Inferred menu item label includes SVG description

Open OliverJAsh opened this issue 1 month ago • 2 comments

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

OliverJAsh avatar Nov 18 '25 10:11 OliverJAsh

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

atomiks avatar Nov 18 '25 10:11 atomiks

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.

OliverJAsh avatar Nov 18 '25 10:11 OliverJAsh