You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
🐛 [BUG] - Allow a declarative accessible label for the ActionMenu split-button toggle #1459
In ActionMenu split-button mode, the menu toggle always renders with the hardcoded accessible name aria-label="Menu":
<Buttonaria-label="Menu".../>
Consumers can provide an authored label to ActionMenu.Overlay, but there is no supported API for declaratively naming the split-button toggle. Updating the label after hydration is insufficient because server-rendered markup—and markup where hydration is delayed or fails—retains the generic name.
This is especially problematic when a ButtonGroup contains two split-button ActionMenus. Both toggles are announced as “Menu,” so screen-reader users cannot distinguish their purpose.
This is reproducible on current primer/brand main and in @primer/react-brand 0.74.0.
Reproduction steps
Render two ActionMenu components with mode="split-button" and distinct overlay labels.
Inspect the server-rendered HTML before hydration.
Find the toggle button for each ActionMenu.
Observe that both toggles render with aria-label="Menu".
Example:
<ButtonGroup><ActionMenumode="split-button"><ActionMenu.Buttonas="a"href="/mac">Download for macOS</ActionMenu.Button><ActionMenu.Overlayaria-label="Other macOS downloads">...</ActionMenu.Overlay></ActionMenu><ActionMenumode="split-button"><ActionMenu.Buttonas="a"href="/windows">Download for Windows</ActionMenu.Button><ActionMenu.Overlayaria-label="Other Windows downloads">...</ActionMenu.Overlay></ActionMenu></ButtonGroup>
Both dropdown toggles have the accessible name “Menu” until consumer-side JavaScript mutates the DOM.
Expected behavior
ActionMenu should expose a supported declarative API for the split-button toggle’s accessible name, and that label should be present in server-rendered markup.
Activity