From c47237bf8f675bbe0d7b432a36d02b8ef2fa2bbf Mon Sep 17 00:00:00 2001 From: Janpot <2109932+Janpot@users.noreply.github.com> Date: Wed, 25 Mar 2026 13:02:14 +0100 Subject: [PATCH 1/4] [docs] Fix duplicate IDs in ThemeViewer Use React.useId() instead of a hardcoded '$ROOT' prefix so that multiple ThemeViewer instances on the same page (e.g. collapsed and expanded views on /material-ui/customization/default-theme) produce unique element IDs. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/src/modules/components/ThemeViewer.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx index f0a6e1645e6e16..bd23f524af7772 100644 --- a/docs/src/modules/components/ThemeViewer.tsx +++ b/docs/src/modules/components/ThemeViewer.tsx @@ -187,8 +187,6 @@ export function useItemIdsLazy(object: Record) { return allItemIds; } -const keyPrefix = '$ROOT'; - export default function ThemeViewer({ data, expandPaths = [], @@ -197,12 +195,13 @@ export default function ThemeViewer({ data: Record; expandPaths: Array | null; }) { + const keyPrefix = React.useId(); const defaultExpanded = React.useMemo( () => Array.isArray(expandPaths) ? expandPaths.map((expandPath) => `${keyPrefix}.${expandPath}`) : [], - [expandPaths], + [expandPaths, keyPrefix], ); // for default* to take effect we need to remount const key = React.useMemo(() => defaultExpanded.join(''), [defaultExpanded]); From 72d294432a267248019778db02a9db6e07309cea Mon Sep 17 00:00:00 2001 From: Janpot <2109932+Janpot@users.noreply.github.com> Date: Wed, 25 Mar 2026 13:58:49 +0100 Subject: [PATCH 2/4] [docs] Fix duplicate IDs in SearchButton Use React.useId() instead of a hardcoded 'app-search-label' ID so that multiple SearchButton instances (AppHeader and AppFrame) don't produce duplicate IDs in the DOM. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/src/modules/components/SearchButton.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/src/modules/components/SearchButton.tsx b/docs/src/modules/components/SearchButton.tsx index c19b5930bf6a75..44b57b75c57c09 100644 --- a/docs/src/modules/components/SearchButton.tsx +++ b/docs/src/modules/components/SearchButton.tsx @@ -96,17 +96,18 @@ function useShortcut() { export default function SearchButton({ onClick, onRef, ...props }: SearchButtonProps) { const t = useTranslate(); const shortcut = useShortcut(); + const labelId = React.useId(); return ( - {t('searchButton')} + {t('searchButton')} {shortcut && } ); From e0e0ce3e8565bfceae12bfa84111373071447801 Mon Sep 17 00:00:00 2001 From: Janpot <2109932+Janpot@users.noreply.github.com> Date: Wed, 25 Mar 2026 14:11:18 +0100 Subject: [PATCH 3/4] [docs] Fix aria-label misuse on BackToTop wrapper div Move Tooltip inside the positioning Box so it wraps the Fab directly. This prevents aria-label from being applied to a non-interactive div. Co-Authored-By: Claude Opus 4.6 (1M context) --- docs/src/modules/components/BackToTop.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/src/modules/components/BackToTop.tsx b/docs/src/modules/components/BackToTop.tsx index 350a47294afb74..b2c5de3573695c 100644 --- a/docs/src/modules/components/BackToTop.tsx +++ b/docs/src/modules/components/BackToTop.tsx @@ -35,14 +35,14 @@ export default function BackToTop() { return ( - - + + - - + + ); } From c794a3543b51d0fd84eef7c676de521235e176b9 Mon Sep 17 00:00:00 2001 From: Janpot <2109932+Janpot@users.noreply.github.com> Date: Wed, 25 Mar 2026 14:16:07 +0100 Subject: [PATCH 4/4] [docs] Fix duplicate IDs and wrong aria-controls in ToggleDisplayOption Use React.useId() for unique IDs per instance, and fix aria-controls to reference the menu ID instead of the button's own ID. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/ApiPage/sections/ToggleDisplayOption.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/mui-docs/src/ApiPage/sections/ToggleDisplayOption.tsx b/packages/mui-docs/src/ApiPage/sections/ToggleDisplayOption.tsx index dacba447796e4b..5f2e3c17c093e0 100644 --- a/packages/mui-docs/src/ApiPage/sections/ToggleDisplayOption.tsx +++ b/packages/mui-docs/src/ApiPage/sections/ToggleDisplayOption.tsx @@ -84,6 +84,9 @@ interface ToggleDisplayOptionProps { export function ToggleDisplayOption(props: ToggleDisplayOptionProps) { const { displayOption, setDisplayOption, sectionType } = props; + const id = React.useId(); + const buttonId = `${id}-view-switching-button`; + const menuId = `${id}-view-options-menu`; const [anchorEl, setAnchorEl] = React.useState(null); const [open, setOpen] = React.useState(false); @@ -108,8 +111,8 @@ export function ToggleDisplayOption(props: ToggleDisplayOptionProps) { size="small" variant="outlined" color="secondary" - id="view-switching-button" - aria-controls={open ? 'view-switching-button' : undefined} + id={buttonId} + aria-controls={open ? menuId : undefined} aria-haspopup="true" aria-expanded={open ? 'true' : undefined} onClick={handleMenuClick} @@ -122,7 +125,7 @@ export function ToggleDisplayOption(props: ToggleDisplayOptionProps) { {displayOption}