diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 36b04375..1a75a3af 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -53,6 +53,10 @@ type Props = { */ // This prop is required because it's rare to not want a label label: string | null; + /** + * Additional properties to pass to the Text label component. + */ + labelProps?: ComponentPropsWithoutRef; /** * Event callback for when the item is selected via mouse, touch, or keyboard. * Calling event.preventDefault in this handler will prevent the menu from @@ -71,12 +75,14 @@ type Props = { /** * An item within a menu, acting either as a navigation button, or simply a * container for other interactive elements. + * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree. */ export const MenuItem = ({ as, className, Icon, label, + labelProps, onSelect, kind = "primary", children, @@ -133,7 +139,13 @@ export const MenuItem = ({ )} {label !== null && ( - + {label} )} diff --git a/src/components/Menu/ToggleMenuItem.tsx b/src/components/Menu/ToggleMenuItem.tsx index 3e5e4ff2..1a1bfbb1 100644 --- a/src/components/Menu/ToggleMenuItem.tsx +++ b/src/components/Menu/ToggleMenuItem.tsx @@ -28,6 +28,7 @@ type Props = Pick< /** * A menu item with a toggle control. Clicking anywhere on the surface will * activate the toggle. + * Must be used within a compound Menu or other `menu` or `menubar` aria role subtree. */ export const ToggleMenuItem = forwardRef( function ToggleMenuItem( @@ -35,15 +36,20 @@ export const ToggleMenuItem = forwardRef( ref, ) { const toggleId = useId(); + // We render the label ourselves as a `label` element cannot have role `menuitemcheckbox` return ( diff --git a/src/components/Menu/__snapshots__/ToggleMenuItem.test.tsx.snap b/src/components/Menu/__snapshots__/ToggleMenuItem.test.tsx.snap index 4392edd9..95cde932 100644 --- a/src/components/Menu/__snapshots__/ToggleMenuItem.test.tsx.snap +++ b/src/components/Menu/__snapshots__/ToggleMenuItem.test.tsx.snap @@ -2,10 +2,9 @@ exports[`ToggleMenuItem > renders 1`] = ` -
@@ -38,6 +38,6 @@ exports[`ToggleMenuItem > renders 1`] = ` class="_ui_adcb29" />
- +
`;