Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mj12albert merged 32 commits into from
Apr 2, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
d989266
Refactor
mj12albert Mar 27, 2026
417dd3b
reduce menu focus glue
mj12albert Mar 28, 2026
2441105
stepper cleanup
mj12albert Mar 28, 2026
7b74f1c
tabs cleanup
mj12albert Mar 28, 2026
4665338
further cleanup
mj12albert Mar 28, 2026
4335667
fix ci
mj12albert Mar 29, 2026
965c2bd
fix unregister
mj12albert Mar 29, 2026
998e0b1
fix MenuContentAnchors
mj12albert Mar 29, 2026
236aca3
fixes
mj12albert Mar 31, 2026
6b67574
clean up contexts
mj12albert Mar 31, 2026
fa3aaf1
review comments
mj12albert Mar 31, 2026
fa5d14e
fix tests
mj12albert Mar 31, 2026
965307c
Fix CI
mj12albert Mar 31, 2026
877b952
polish
mj12albert Apr 1, 2026
e9dc37d
tweak docs and misc fixes
mj12albert Apr 1, 2026
168c0a1
fix demo
mj12albert Apr 1, 2026
0339459
clean up muiSkipListHighlight
mj12albert Apr 1, 2026
de95d6c
docs cleanup
mj12albert Apr 1, 2026
15ee4dd
fix review comments
mj12albert Apr 1, 2026
4ee41f4
align null checks
mj12albert Apr 1, 2026
53d6ab0
improve readability
mj12albert Apr 1, 2026
beddbdb
fix disabled step button
mj12albert Apr 1, 2026
e6596db
update doc
mj12albert Apr 1, 2026
90bd96e
comment
mj12albert Apr 1, 2026
d811b93
Merge branch 'master' into feat/roving-set-registry
Janpot Apr 1, 2026
d49aaff
fix visual highlight and add tests
mj12albert Apr 1, 2026
92fe098
fix open interaction handling
mj12albert Apr 1, 2026
ec0ee8c
add select disablePortal test
mj12albert Apr 1, 2026
bbcab89
cleanup focusActiveItem
mj12albert Apr 2, 2026
4623923
cleanup
mj12albert Apr 2, 2026
634e655
comment
mj12albert Apr 2, 2026
be593f7
Merge branch 'master' into feat/roving-set-registry
mj12albert Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 3 additions & 12 deletions docs/data/material/components/menus/GroupedMenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
15 changes: 3 additions & 12 deletions docs/data/material/components/menus/GroupedMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
61 changes: 0 additions & 61 deletions docs/data/material/components/selects/selects.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,67 +141,6 @@ Display categories with the `ListSubheader` component or the native `<optgroup>`

{{"demo": "GroupedSelect.js"}}

:::warning
Comment thread
mj12albert marked this conversation as resolved.
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.
Expand Down
18 changes: 13 additions & 5 deletions docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading
Loading