[MenuItem] add aria-checked for checkbox and radio menu items

docs/data/material/components/menus/CheckboxMenu.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Check from '@mui/icons-material/Check';
+
+const options = ['Show toolbar', 'Show sidebar', 'Show status bar'];
+
+export default function CheckboxMenu() {
+  const [checked, setChecked] = React.useState({
+    'Show toolbar': true,
+  });
+
+  const handleToggle = (option) => () => {
+    setChecked((prev) => ({ ...prev, [option]: !prev[option] }));
+  };
+
+  return (
+    <Paper sx={{ width: 320, maxWidth: '100%' }}>
+      <MenuList>
+        {options.map((option) => (
+          <MenuItem
+            key={option}
+            role="menuitemcheckbox"
+            selected={Boolean(checked[option])}
+            onClick={handleToggle(option)}
+          >
+            <ListItemIcon>
+              {checked[option] ? <Check fontSize="small" /> : null}
+            </ListItemIcon>
+            <ListItemText>{option}</ListItemText>
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Paper>
+  );
+}

docs/data/material/components/menus/CheckboxMenu.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Check from '@mui/icons-material/Check';
+
+const options = ['Show toolbar', 'Show sidebar', 'Show status bar'];
+
+export default function CheckboxMenu() {
+  const [checked, setChecked] = React.useState<Record<string, boolean>>({
+    'Show toolbar': true,
+  });
+
+  const handleToggle = (option: string) => () => {
+    setChecked((prev) => ({ ...prev, [option]: !prev[option] }));
+  };
+
+  return (
+    <Paper sx={{ width: 320, maxWidth: '100%' }}>
+      <MenuList>
+        {options.map((option) => (
+          <MenuItem
+            key={option}
+            role="menuitemcheckbox"
+            selected={Boolean(checked[option])}
+            onClick={handleToggle(option)}
+          >
+            <ListItemIcon>
+              {checked[option] ? <Check fontSize="small" /> : null}
+            </ListItemIcon>
+            <ListItemText>{option}</ListItemText>
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Paper>
+  );
+}

docs/data/material/components/menus/RadioMenu.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import RadioButtonChecked from '@mui/icons-material/RadioButtonChecked';
+import RadioButtonUnchecked from '@mui/icons-material/RadioButtonUnchecked';
+
+const options = ['Name', 'Date modified', 'Size'];
+
+export default function RadioMenu() {
+  const [selected, setSelected] = React.useState('Name');
+
+  return (
+    <Paper sx={{ width: 320, maxWidth: '100%' }}>
+      <MenuList>
+        {options.map((option) => (
+          <MenuItem
+            key={option}
+            role="menuitemradio"
+            selected={selected === option}
+            onClick={() => setSelected(option)}
+          >
+            <ListItemIcon>
+              {selected === option ? (
+                <RadioButtonChecked fontSize="small" />
+              ) : (
+                <RadioButtonUnchecked fontSize="small" />
+              )}
+            </ListItemIcon>
+            <ListItemText>{option}</ListItemText>
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Paper>
+  );
+}

docs/data/material/components/menus/RadioMenu.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import RadioButtonChecked from '@mui/icons-material/RadioButtonChecked';
+import RadioButtonUnchecked from '@mui/icons-material/RadioButtonUnchecked';
+
+const options = ['Name', 'Date modified', 'Size'];
+
+export default function RadioMenu() {
+  const [selected, setSelected] = React.useState('Name');
+
+  return (
+    <Paper sx={{ width: 320, maxWidth: '100%' }}>
+      <MenuList>
+        {options.map((option) => (
+          <MenuItem
+            key={option}
+            role="menuitemradio"
+            selected={selected === option}
+            onClick={() => setSelected(option)}
+          >
+            <ListItemIcon>
+              {selected === option ? (
+                <RadioButtonChecked fontSize="small" />
+              ) : (
+                <RadioButtonUnchecked fontSize="small" />
+              )}
+            </ListItemIcon>
+            <ListItemText>{option}</ListItemText>
+          </MenuItem>
+        ))}
+      </MenuList>
+    </Paper>
+  );
+}

docs/data/material/components/menus/menus.md

@@ -52,6 +52,17 @@ To use a selected menu item without impacting the initial focus, set the `varian
 
 {{"demo": "SimpleListMenu.js"}}
 
+## Checkbox and radio menu items
+
+To build a menu of toggleable options, set each item's `role` to `menuitemcheckbox` for independent toggles, or `menuitemradio` for a single choice within a group.
+For these roles, the `selected` prop drives `aria-checked`, so assistive technologies announce the checked state.
+
+{{"demo": "CheckboxMenu.js", "bg": true}}
+
+For a single choice within a group, use `menuitemradio`:
+
+{{"demo": "RadioMenu.js", "bg": true}}
+
 ## Positioned menu
 
 Because the `Menu` component uses the `Popover` component to position itself, you can use the same [positioning props](/material-ui/react-popover/#anchor-playground) to position it.

docs/translations/api-docs/menu-item/menu-item.json

@@ -21,7 +21,9 @@
     "focusVisibleClassName": {
       "description": "This prop can help identify which element has keyboard focus. The class name will be applied when the element gains the focus through keyboard interaction. It&#39;s a polyfill for the <a href=\"https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo\">CSS :focus-visible selector</a>. The rationale for using this feature <a href=\"https://github.com/WICG/focus-visible/blob/HEAD/explainer.md\">is explained here</a>. A <a href=\"https://github.com/WICG/focus-visible\">polyfill can be used</a> to apply a <code>focus-visible</code> class to other components if needed."
     },
-    "selected": { "description": "If <code>true</code>, the component is selected." },
+    "selected": {
+      "description": "If <code>true</code>, the component is selected. For <code>menuitemcheckbox</code> and <code>menuitemradio</code> roles, this also drives <code>aria-checked</code>."
+    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     }

packages/mui-material/src/MenuItem/MenuItem.d.ts

@@ -39,6 +39,7 @@ export interface MenuItemOwnProps {
   divider?: boolean | undefined;
   /**
    * If `true`, the component is selected.
+   * For `menuitemcheckbox` and `menuitemradio` roles, this also drives `aria-checked`.
    * @default false
    */
   selected?: boolean | undefined;

packages/mui-material/src/MenuItem/MenuItem.js

@@ -181,6 +181,11 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
     ...other
   } = props;
 
+  // `menuitemcheckbox`/`menuitemradio` require `aria-checked`; derive it from `selected`
+  // (an omitted `selected` means unchecked). Other roles keep `selected` presentational.
+  const isCheckableRole = role === 'menuitemcheckbox' || role === 'menuitemradio';
+  const ariaChecked = isCheckableRole ? Boolean(props.selected) : undefined;
+
   const focusSource = useSelectFocusSource();
   const context = React.useContext(ListContext);
   const childContext = React.useMemo(
@@ -250,6 +255,7 @@ const MenuItem = React.forwardRef(function MenuItem(inProps, ref) {
       <MenuItemRoot
         ref={handleRef}
         role={role}
+        aria-checked={ariaChecked}
         tabIndex={tabIndex}
         component={component}
         internalNativeButton={false}
@@ -328,6 +334,7 @@ MenuItem.propTypes /* remove-proptypes */ = {
   role: PropTypes.string,
   /**
    * If `true`, the component is selected.
+   * For `menuitemcheckbox` and `menuitemradio` roles, this also drives `aria-checked`.
    * @default false
    */
   selected: PropTypes.bool,

packages/mui-material/src/MenuItem/MenuItem.test.js

@@ -61,6 +61,61 @@ describe('<MenuItem />', () => {
 
     expect(menuitem).to.have.class(classes.selected);
     expect(menuitem).not.to.have.attribute('aria-selected');
+    expect(menuitem).not.to.have.attribute('aria-checked');
+  });
+
+  it('drives aria-checked from `selected` for `role="menuitemcheckbox"`', () => {
+    const { rerender } = render(
+      <MenuList>
+        <MenuItem role="menuitemcheckbox" selected />
+      </MenuList>,
+    );
+    const menuitem = screen.getByRole('menuitemcheckbox');
+
+    expect(menuitem).to.have.attribute('aria-checked', 'true');
+    expect(menuitem).not.to.have.attribute('aria-selected');
+
+    rerender(
+      <MenuList>
+        <MenuItem role="menuitemcheckbox" selected={false} />
+      </MenuList>,
+    );
+
+    expect(screen.getByRole('menuitemcheckbox')).to.have.attribute('aria-checked', 'false');
+  });
+
+  it('sets aria-checked="false" for a `menuitemcheckbox` when `selected` is omitted', () => {
+    render(
+      <MenuList>
+        <MenuItem role="menuitemcheckbox" />
+      </MenuList>,
+    );
+
+    expect(screen.getByRole('menuitemcheckbox')).to.have.attribute('aria-checked', 'false');
+  });
+
+  it('drives aria-checked from `selected` for `role="menuitemradio"`', () => {
+    render(
+      <MenuList>
+        <MenuItem role="menuitemradio" selected />
+      </MenuList>,
+    );
+    const menuitem = screen.getByRole('menuitemradio');
+
+    expect(menuitem).to.have.attribute('aria-checked', 'true');
+    expect(menuitem).not.to.have.attribute('aria-selected');
+  });
+
+  it('keeps `selected` presentational and omits aria-checked for non-checkable roles', () => {
+    render(
+      <MenuList>
+        <MenuItem role="option" selected aria-selected />
+      </MenuList>,
+    );
+    const option = screen.getByRole('option');
+
+    expect(option).to.have.class(classes.selected);
+    expect(option).not.to.have.attribute('aria-checked');
   });
 
   it('can have a role of option', () => {