[utils] Explicitly register roving tab items with parent (#48122)

Co-authored-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>

Author: mj12albert

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

@@ -5,18 +5,9 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { styled } from '@mui/material/styles';
 
-const StyledListHeader = Object.assign(
-  styled(ListSubheader)({
-    backgroundImage: 'var(--Paper-overlay)',
-  }),
-  {
-    // IMPORTANT: The base ListSubheader component sets `muiSkipListHighlight = true`
-    // by default, but wrapping it with `styled(ListSubheader)` does not preserve
-    // that static field. We re-declare it here so the menu list continues to skip
-    // highlighting this non-focusable subheader when navigating with the keyboard.
-    muiSkipListHighlight: true,
-  },
-);
+const StyledListHeader = styled(ListSubheader)({
+  backgroundImage: 'var(--Paper-overlay)',
+});
 
 export default function GroupedMenu() {
   const [anchorEl, setAnchorEl] = React.useState(null);

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

@@ -5,18 +5,9 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { styled } from '@mui/material/styles';
 
-const StyledListHeader = Object.assign(
-  styled(ListSubheader)({
-    backgroundImage: 'var(--Paper-overlay)',
-  }),
-  {
-    // IMPORTANT: The base ListSubheader component sets `muiSkipListHighlight = true`
-    // by default, but wrapping it with `styled(ListSubheader)` does not preserve
-    // that static field. We re-declare it here so the menu list continues to skip
-    // highlighting this non-focusable subheader when navigating with the keyboard.
-    muiSkipListHighlight: true,
-  },
-);
+const StyledListHeader = styled(ListSubheader)({
+  backgroundImage: 'var(--Paper-overlay)',
+});
 
 export default function GroupedMenu() {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

docs/data/material/components/selects/selects.md

@@ -141,67 +141,6 @@ Display categories with the `ListSubheader` component or the native `<optgroup>`
 
 {{"demo": "GroupedSelect.js"}}
 
-:::warning
-If you wish to wrap the ListSubheader in a custom component, you'll have to annotate it so Material UI can handle it properly when determining focusable elements.
-
-You have two options for solving this:
-Option 1: Define a static boolean field called `muiSkipListHighlight` on your component function, and set it to `true`:
-
-```tsx
-function MyListSubheader(props: ListSubheaderProps) {
-  return <ListSubheader {...props} />;
-}
-
-MyListSubheader.muiSkipListHighlight = true;
-export default MyListSubheader;
-
-// elsewhere:
-
-return (
-  <Select>
-    <MyListSubheader>Group 1</MyListSubheader>
-    <MenuItem value={1}>Option 1</MenuItem>
-    <MenuItem value={2}>Option 2</MenuItem>
-    <MyListSubheader>Group 2</MyListSubheader>
-    <MenuItem value={3}>Option 3</MenuItem>
-    <MenuItem value={4}>Option 4</MenuItem>
-    {/* ... */}
-  </Select>
-```
-
-Option 2: Place a `muiSkipListHighlight` prop on each instance of your component.
-The prop doesn't have to be forwarded to the ListSubheader, nor present in the underlying DOM element.
-It just has to be placed on a component that's used as a subheader.
-
-```tsx
-export default function MyListSubheader(
-  props: ListSubheaderProps & { muiSkipListHighlight: boolean },
-) {
-  const { muiSkipListHighlight, ...other } = props;
-  return <ListSubheader {...other} />;
-}
-
-// elsewhere:
-
-return (
-  <Select>
-    <MyListSubheader muiSkipListHighlight>Group 1</MyListSubheader>
-    <MenuItem value={1}>Option 1</MenuItem>
-    <MenuItem value={2}>Option 2</MenuItem>
-    <MyListSubheader muiSkipListHighlight>Group 2</MyListSubheader>
-    <MenuItem value={3}>Option 3</MenuItem>
-    <MenuItem value={4}>Option 4</MenuItem>
-    {/* ... */}
-  </Select>
-);
-```
-
-We recommend the first option as it doesn't require updating all the usage sites of the component.
-
-Keep in mind this is **only necessary** if you wrap the ListSubheader in a custom component.
-If you use the ListSubheader directly, **no additional code is required**.
-:::
-
 ## Accessibility
 
 To properly label your `Select` input you need an extra element with an `id` that contains a label.

docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md

@@ -286,20 +286,28 @@ The `StepButton` has:
 
 ### Tabs
 
-The `tabindex` attribute for each tab will be changed on Arrow Key or Home / End navigation. Previously, we only moved the focus on keyboard navigation. Now, we move the focus and also add the `tabindex="0"` to the focused element. The previously focused element will have its `tabindex` updated to `-1` in order to keep only one focusable `Tab` at a time.
+The `tabindex` attribute for each tab will be changed on Arrow Key or Home / End navigation. Previously, keyboard navigation moved DOM focus without updating `tabindex` on the focused `Tab`. Now, we move DOM focus and also add the `tabindex="0"` to the focused `Tab`. Other tabs will have `tabindex="-1"` to keep only one focusable `Tab` at a time.
 
 Selecting a `Tab` will update the focus and `tabindex` as before.
 
-### Menu and MenuList
+`Tab`s not placed inside `Tabs` will now throw an error.
 
-The `tabindex` attribute for each menu item will be changed on Arrow Key, Home / End or Character Key navigation. Previously, we only moved the focus on keyboard navigation. Now, we move the focus and also add the `tabindex="0"` to the focused element. The previously focused element will have its `tabindex` updated to `-1` in order to keep only one focusable `MenuItem` at a time.
+### Menu and MenuList
 
-This change also applies to the `Menu` since it uses `MenuList`.
+When using `variant="selectedMenu"`, the `tabindex` attribute for each menu item will change on Arrow Key, Home / End or Character Key navigation. Previously, keyboard navigation moved DOM focus without updating `tabindex` on focused items. Now, we move DOM focus and also add `tabindex="0"` to the focused element. The previously focused element will have its `tabindex` updated to `-1` in order to keep only one focusable `MenuItem` at a time.
 
-Selecting a `MenuItem` will update the focus and `tabindex` as before.
+This change also applies both `Menu` and `MenuList` with `variant="selectedMenu"`.
 
 The `autoFocus` prop in `MenuList` does not set `tabindex="0"` on the `List` component anymore. It will always stay as `-1`.
 
+`MenuItem`s will throw an error when rendered outside of `Menu` or `MenuList`.
+
+Keyboard navigation now supports `MenuItem`s inside `React.Fragment`.
+
+Custom non-interactive menu content such as `ListSubheader` or `Divider` no longer need to set `muiSkipListHighlight` to opt-out of the menu's focus management.
+
+Custom children that set `role="menuitem"` but do not wrap the `MenuItem` component are no longer supported inside `Menu` or `MenuList`.
+
 ## Deprecated APIs removed (Breaking)
 
 APIs that were deprecated earlier have been removed in v9.