[website] Fix lighthouse issues

Improve the experience on the pages.

Author: oliviertassinari

docs/src/components/header/ThemeModeToggle.tsx

@@ -4,6 +4,8 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
 import LightModeOutlined from '@mui/icons-material/LightModeOutlined';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 
 function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) {
   const [mounted, setMounted] = React.useState(false);
@@ -34,29 +36,55 @@ function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) {
   );
 }
 
-export default function ThemeModeToggle(props: {
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-}) {
+export default function ThemeModeToggle() {
   const theme = useTheme();
+  const changeTheme = useChangeTheme();
+  const [mode, setMode] = React.useState<string | null>(null);
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  React.useEffect(() => {
+    let initialMode = 'system';
+    try {
+      initialMode = localStorage.getItem('mui-mode') || initialMode;
+    } catch (error) {
+      // do nothing
+    }
+    setMode(initialMode);
+  }, []);
+
+  const handleChangeThemeMode = (checked: boolean) => {
+    const paletteMode = checked ? 'dark' : 'light';
+    setMode(paletteMode);
+
+    try {
+      localStorage.setItem('mui-mode', paletteMode); // syncing with homepage, can be removed once all pages are migrated to CSS variables
+    } catch (error) {
+      // do nothing
+    }
+    changeTheme({ paletteMode });
+  };
+
+  if (mode === null) {
+    return <IconButton color="primary" disableTouchRipple />;
+  }
+
   if (theme.vars) {
     // Temporarily renders conditionally because `useColorScheme` could not be used in the pages that haven't migrated to CSS theme variables.
-    return <CssVarsModeToggle {...props} />;
+    return <CssVarsModeToggle onChange={handleChangeThemeMode} />;
   }
+
+  const checked = mode === 'system' ? prefersDarkMode : mode === 'dark';
+
   return (
-    <Tooltip title={props.checked ? 'Turn on the light' : 'Turn off the light'}>
+    <Tooltip title={checked ? 'Turn on the light' : 'Turn off the light'}>
       <IconButton
         color="primary"
         disableTouchRipple
         onClick={() => {
-          props.onChange(!props.checked);
+          handleChangeThemeMode(!checked);
         }}
       >
-        {props.checked ? (
-          <LightModeOutlined fontSize="small" />
-        ) : (
-          <DarkModeOutlined fontSize="small" />
-        )}
+        {checked ? <LightModeOutlined fontSize="small" /> : <DarkModeOutlined fontSize="small" />}
       </IconButton>
     </Tooltip>
   );

docs/src/layouts/AppHeader.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import GlobalStyles from '@mui/material/GlobalStyles';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
@@ -12,7 +11,6 @@ import SvgMuiLogomark from 'docs/src/icons/SvgMuiLogomark';
 import HeaderNavBar from 'docs/src/components/header/HeaderNavBar';
 import HeaderNavDropdown from 'docs/src/components/header/HeaderNavDropdown';
 import ThemeModeToggle from 'docs/src/components/header/ThemeModeToggle';
-import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 import Link from 'docs/src/modules/components/Link';
 import { DeferredAppSearch } from 'docs/src/modules/components/AppFrame';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
@@ -41,34 +39,9 @@ interface AppHeaderProps {
 
 export default function AppHeader(props: AppHeaderProps) {
   const { gitHubRepository = 'https://github.com/mui' } = props;
-  const changeTheme = useChangeTheme();
-  const [mode, setMode] = React.useState<string | null>(null);
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
 
   const t = useTranslate();
 
-  React.useEffect(() => {
-    let initialMode = 'system';
-    try {
-      initialMode = localStorage.getItem('mui-mode') || initialMode;
-    } catch (error) {
-      // do nothing
-    }
-    setMode(initialMode);
-  }, []);
-
-  const handleChangeThemeMode = (checked: boolean) => {
-    const paletteMode = checked ? 'dark' : 'light';
-    setMode(paletteMode);
-
-    try {
-      localStorage.setItem('mui-mode', paletteMode); // syncing with homepage, can be removed once all pages are migrated to CSS variables
-    } catch (error) {
-      // do nothing
-    }
-    changeTheme({ paletteMode });
-  };
-
   return (
     <Header>
       <GlobalStyles
@@ -101,12 +74,7 @@ export default function AppHeader(props: AppHeaderProps) {
               <GitHubIcon fontSize="small" />
             </IconButton>
           </Tooltip>
-          {mode !== null ? (
-            <ThemeModeToggle
-              checked={mode === 'system' ? prefersDarkMode : mode === 'dark'}
-              onChange={handleChangeThemeMode}
-            />
-          ) : null}
+          <ThemeModeToggle />
         </Stack>
         <Box sx={{ display: { md: 'none' }, ml: 1 }}>
           <HeaderNavDropdown />

docs/src/modules/components/AppSearch.js

@@ -332,7 +332,7 @@ export default function AppSearch(props) {
           })}
         />
         <SearchLabel id="app-search-label">{search}</SearchLabel>
-        <Shortcut>
+        <Shortcut aria-hidden="true">
           {/* eslint-disable-next-line material-ui/no-hardcoded-labels */}
           {macOS ? '⌘' : 'Ctrl+'}K
         </Shortcut>