[docs] Fix duplicate IDs and HTML validation issues

docs/src/modules/components/BackToTop.tsx

@@ -35,14 +35,14 @@ export default function BackToTop() {
 
   return (
     <Fade in={trigger}>
-      <Tooltip
-        title="Scroll to top"
-        placement="left"
-        open={open}
-        onClose={handleClose}
-        onOpen={handleOpen}
-      >
-        <Box className="mui-fixed" sx={{ position: 'fixed', bottom: 24, right: 24, zIndex: 10 }}>
+      <Box className="mui-fixed" sx={{ position: 'fixed', bottom: 24, right: 24, zIndex: 10 }}>
+        <Tooltip
+          title="Scroll to top"
+          placement="left"
+          open={open}
+          onClose={handleClose}
+          onOpen={handleOpen}
+        >
           <Fab
             size="small"
             aria-label={t('backToTop')}
@@ -75,8 +75,8 @@ export default function BackToTop() {
               })}
             />
           </Fab>
-        </Box>
-      </Tooltip>
+        </Tooltip>
+      </Box>
     </Fade>
   );
 }

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 (
     <SearchButtonStyled
       ref={onRef}
       onClick={onClick}
       disabled={!onClick}
-      aria-labelledby="app-search-label"
+      aria-labelledby={labelId}
       {...props}
     >
       <SearchIcon color="primary" sx={{ fontSize: '1.125rem' }} />
-      <SearchLabel id="app-search-label">{t('searchButton')}</SearchLabel>
+      <SearchLabel id={labelId}>{t('searchButton')}</SearchLabel>
       {shortcut && <Shortcut aria-hidden="true">{shortcut}</Shortcut>}
     </SearchButtonStyled>
   );

docs/src/modules/components/ThemeViewer.tsx

@@ -187,8 +187,6 @@ export function useItemIdsLazy(object: Record<string, any>) {
   return allItemIds;
 }
 
-const keyPrefix = '$ROOT';
-
 export default function ThemeViewer({
   data,
   expandPaths = [],
@@ -197,12 +195,13 @@ export default function ThemeViewer({
   data: Record<string, any>;
   expandPaths: Array<string> | 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]);

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<HTMLElement | null>(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}
       </Button>
       <Menu
-        id="view-options-menu"
+        id={menuId}
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}