Change Details

### Background The current API of the menu component has a couple of issues: 1. 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. 1. 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 1. 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

### Background The current API of the menu component has a couple of issues: 1. 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. 1. 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 1. 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 - [x] Validate this proposal with design - [] Implement the changes in MenuButton - [] Update the component docs and demos

### Background The current API of the menu component has a couple of issues: 1. 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. 1. 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 1. 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 - [x] Validate this proposal with design - [] Implement the changes in MenuButton - [] Update the component docs and demos