Background
The current API of the menu component has a couple of issues:
- It's currently possible/required to provide both an aria-label and a visible label for MenuButtons that have a visible label. This is redundant and could be confusing for users of assistive technology.
- If you want to have the default icon and text, you have to override the default slot, meaning you have to re-implement the default icon yourself. This could be confusing since the default icon works for an icon-only button, but not icon + text
- The API for this component is different than that of Button and ToggleButton, where visible button content is provided via the default slot, an aria-label is provided for icon-only buttons, and there is no default icon.
Proposed solution
To make the experience of adding a label consistent with the existing Button and ToggleButton components, the DST engineers propose the following API:
- Visible ToggleButton content must be passed in via the default slot. There would be no default content of this slot.
- We use the same system we use in Button and ToggleButton to detect if the button is icon-only and throw a warning if it is and there is no aria-label
This would mean the following changes to the existing code:
- Remove the toggleButtonlabel prop
- Remove the default slot content
- Make sure an aria-label applied to the MenuButton component gets passed to its internal ToggleButton component. We could either add a prop called ariaLabel, or use the useSplitAttributes composable to pass all attributes to the internal <cdx-toggle-button> component.
- Implement the useIconOnlyButton composable, like in the Button and ToggleButton components
We would also need to update the demo page accordingly.
Implications
Pros:
- Simpler API
- No more redundant aria-label and visible label
- Consistent with Button and ToggleButton
Cons:
- No more default icon (ellipsis)
- We wouldn't be enforcing an aria-label on the icon-only version of MenuButton, just warning about it
Acceptance criteria
- Validate this proposal with design
- Implement the changes in MenuButton
- Update the component docs and demos
