@docusaurus/theme-classic 2.3.1 → 2.4.0

package/lib/index.js

@@ -18,6 +18,7 @@ const ContextReplacementPlugin = requireFromDocusaurusCore('webpack/lib/ContextR
 // Need to be inlined to prevent dark mode FOUC
 // Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
 const ThemeStorageKey = 'theme';
+const ThemeQueryStringKey = 'docusaurus-theme';
 const noFlashColorMode = ({ defaultMode, respectPrefersColorScheme, }) => 
 /* language=js */
 `(function() {
@@ -28,6 +29,14 @@ const noFlashColorMode = ({ defaultMode, respectPrefersColorScheme, }) =>
     document.documentElement.setAttribute('data-theme', theme);
   }
 
+  function getQueryStringTheme() {
+    var theme = null;
+    try {
+      theme = new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
+    } catch(e) {}
+    return theme;
+  }
+
   function getStoredTheme() {
     var theme = null;
     try {
@@ -36,9 +45,9 @@ const noFlashColorMode = ({ defaultMode, respectPrefersColorScheme, }) =>
     return theme;
   }
 
-  var storedTheme = getStoredTheme();
-  if (storedTheme !== null) {
-    setDataThemeAttribute(storedTheme);
+  var initialTheme = getQueryStringTheme() || getStoredTheme();
+  if (initialTheme !== null) {
+    setDataThemeAttribute(initialTheme);
   } else {
     if (
       respectPrefersColorScheme &&

package/lib/theme/CodeBlock/Content/styles.module.css

@@ -59,6 +59,7 @@
   display: flex;
   column-gap: 0.2rem;
   position: absolute;
+  /* rtl:ignore */
   right: calc(var(--ifm-pre-padding) / 2);
   top: calc(var(--ifm-pre-padding) / 2);
 }
@@ -72,7 +73,7 @@
   border-radius: var(--ifm-global-radius);
   padding: 0.4rem;
   line-height: 0;
-  transition: opacity 200ms ease-in-out;
+  transition: opacity var(--ifm-transition-fast) ease-in-out;
   opacity: 0;
 }
 

package/lib/theme/CodeBlock/CopyButton/styles.module.css

@@ -24,7 +24,7 @@
   opacity: inherit;
   width: inherit;
   height: inherit;
-  transition: all 0.15s ease;
+  transition: all var(--ifm-transition-fast) ease;
 }
 
 .copyButtonSuccessIcon {

package/lib/theme/ColorModeToggle/index.d.ts

@@ -6,6 +6,6 @@
  */
 import React from 'react';
 import type { Props } from '@theme/ColorModeToggle';
-declare function ColorModeToggle({ className, value, onChange }: Props): JSX.Element;
+declare function ColorModeToggle({ className, buttonClassName, value, onChange, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof ColorModeToggle>;
 export default _default;

package/lib/theme/ColorModeToggle/index.js

@@ -11,7 +11,7 @@ import {translate} from '@docusaurus/Translate';
 import IconLightMode from '@theme/Icon/LightMode';
 import IconDarkMode from '@theme/Icon/DarkMode';
 import styles from './styles.module.css';
-function ColorModeToggle({className, value, onChange}) {
+function ColorModeToggle({className, buttonClassName, value, onChange}) {
   const isBrowser = useIsBrowser();
   const title = translate(
     {
@@ -41,6 +41,7 @@ function ColorModeToggle({className, value, onChange}) {
           'clean-btn',
           styles.toggleButton,
           !isBrowser && styles.toggleButtonDisabled,
+          buttonClassName,
         )}
         type="button"
         onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}

package/lib/theme/DocCard/index.js

@@ -50,15 +50,18 @@ function CardCategory({item}) {
       href={href}
       icon="🗃️"
       title={item.label}
-      description={translate(
-        {
-          message: '{count} items',
-          id: 'theme.docs.DocCard.categoryDescription',
-          description:
-            'The default description for a category card in the generated index about how many items this category includes',
-        },
-        {count: item.items.length},
-      )}
+      description={
+        item.description ??
+        translate(
+          {
+            message: '{count} items',
+            id: 'theme.docs.DocCard.categoryDescription',
+            description:
+              'The default description for a category card in the generated index about how many items this category includes',
+          },
+          {count: item.items.length},
+        )
+      }
     />
   );
 }
@@ -70,7 +73,7 @@ function CardLink({item}) {
       href={item.href}
       icon={icon}
       title={item.label}
-      description={doc?.description}
+      description={item.description ?? doc?.description}
     />
   );
 }

package/lib/theme/DocPage/Layout/styles.module.css

@@ -8,6 +8,7 @@
 .docPage {
   display: flex;
   width: 100%;
+  flex: 1 0;
 }
 
 .docsWrapper {

package/lib/theme/ErrorPageContent.js

@@ -6,6 +6,10 @@
  */
 import React from 'react';
 import Translate from '@docusaurus/Translate';
+import {
+  ErrorBoundaryError,
+  ErrorBoundaryTryAgainButton,
+} from '@docusaurus/theme-common';
 export default function ErrorPageContent({error, tryAgain}) {
   return (
     <main className="container margin-vert--xl">
@@ -18,15 +22,15 @@ export default function ErrorPageContent({error, tryAgain}) {
               This page crashed.
             </Translate>
           </h1>
-          <p>{error.message}</p>
-          <div>
-            <button type="button" onClick={tryAgain}>
-              <Translate
-                id="theme.ErrorPageContent.tryAgain"
-                description="The label of the button to try again when the page crashed">
-                Try again
-              </Translate>
-            </button>
+          <div className="margin-vert--lg">
+            <ErrorBoundaryTryAgainButton
+              onClick={tryAgain}
+              className="button button--primary shadow--lw"
+            />
+          </div>
+          <hr />
+          <div className="margin-vert--md">
+            <ErrorBoundaryError error={error} />
           </div>
         </div>
       </div>

package/lib/theme/Navbar/ColorModeToggle/index.js

@@ -7,7 +7,9 @@
 import React from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import ColorModeToggle from '@theme/ColorModeToggle';
+import styles from './styles.module.css';
 export default function NavbarColorModeToggle({className}) {
+  const navbarStyle = useThemeConfig().navbar.style;
   const disabled = useThemeConfig().colorMode.disableSwitch;
   const {colorMode, setColorMode} = useColorMode();
   if (disabled) {
@@ -16,6 +18,9 @@ export default function NavbarColorModeToggle({className}) {
   return (
     <ColorModeToggle
       className={className}
+      buttonClassName={
+        navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined
+      }
       value={colorMode}
       onChange={setColorMode}
     />

package/lib/theme/Navbar/ColorModeToggle/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.darkNavbarColorModeToggle:hover {
+  background: var(--ifm-color-gray-800);
+}

package/lib/theme/Navbar/Content/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import {useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig, ErrorCauseBoundary} from '@docusaurus/theme-common';
 import {
   splitNavbarItems,
   useNavbarMobileSidebar,
@@ -25,7 +25,18 @@ function NavbarItems({items}) {
   return (
     <>
       {items.map((item, i) => (
-        <NavbarItem {...item} key={i} />
+        <ErrorCauseBoundary
+          key={i}
+          onError={(error) =>
+            new Error(
+              `A theme navbar item failed to render.
+Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
+${JSON.stringify(item, null, 2)}`,
+              {cause: error},
+            )
+          }>
+          <NavbarItem {...item} />
+        </ErrorCauseBoundary>
       ))}
     </>
   );

package/lib/theme/NavbarItem/DropdownNavbarItem.js

@@ -47,9 +47,11 @@ function DropdownNavbarItemDesktop({
     };
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
+    document.addEventListener('focusin', handleClickOutside);
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('focusin', handleClickOutside);
     };
   }, [dropdownRef]);
   return (
@@ -79,22 +81,6 @@ function DropdownNavbarItemDesktop({
         {items.map((childItemProps, i) => (
           <NavbarItem
             isDropdownItem
-            onKeyDown={(e) => {
-              if (i === items.length - 1 && e.key === 'Tab') {
-                e.preventDefault();
-                setShowDropdown(false);
-                const nextNavbarItem = dropdownRef.current.nextElementSibling;
-                if (nextNavbarItem) {
-                  const targetItem =
-                    nextNavbarItem instanceof HTMLAnchorElement
-                      ? nextNavbarItem
-                      : // Next item is another dropdown; focus on the inner
-                        // anchor element instead so there's outline
-                        nextNavbarItem.querySelector('a');
-                  targetItem.focus();
-                }
-              }
-            }}
             activeClassName="dropdown__link--active"
             {...childItemProps}
             key={i}

package/lib/theme/Tabs/index.js

@@ -79,10 +79,11 @@ function TabList({className, block, selectedValue, selectValue, tabValues}) {
   );
 }
 function TabContent({lazy, children, selectedValue}) {
-  // eslint-disable-next-line no-param-reassign
-  children = Array.isArray(children) ? children : [children];
+  const childTabs = (Array.isArray(children) ? children : [children]).filter(
+    Boolean,
+  );
   if (lazy) {
-    const selectedTabItem = children.find(
+    const selectedTabItem = childTabs.find(
       (tabItem) => tabItem.props.value === selectedValue,
     );
     if (!selectedTabItem) {
@@ -93,7 +94,7 @@ function TabContent({lazy, children, selectedValue}) {
   }
   return (
     <div className="margin-top--md">
-      {children.map((tabItem, i) =>
+      {childTabs.map((tabItem, i) =>
         cloneElement(tabItem, {
           key: i,
           hidden: tabItem.props.value !== selectedValue,

package/lib/translations.js

@@ -32,15 +32,34 @@ function getNavbarTranslationFile(navbar) {
     const titleTranslations = navbar.title
         ? { title: { message: navbar.title, description: 'The title in the navbar' } }
         : {};
-    return (0, utils_1.mergeTranslations)([titleTranslations, navbarItemsTranslations]);
+    const logoAlt = navbar.logo?.alt
+        ? {
+            'logo.alt': {
+                message: navbar.logo.alt,
+                description: 'The alt text of navbar logo',
+            },
+        }
+        : {};
+    return (0, utils_1.mergeTranslations)([
+        titleTranslations,
+        logoAlt,
+        navbarItemsTranslations,
+    ]);
 }
 function translateNavbar(navbar, navbarTranslations) {
     if (!navbarTranslations) {
         return navbar;
     }
+    const logo = navbar.logo
+        ? {
+            ...navbar.logo,
+            alt: navbarTranslations[`logo.alt`]?.message ?? navbar.logo?.alt,
+        }
+        : undefined;
     return {
         ...navbar,
         title: navbarTranslations.title?.message ?? navbar.title,
+        logo,
         //  TODO handle properly all the navbar item types here!
         items: navbar.items.map((item) => {
             const subItems = item.items?.map((subItem) => ({
@@ -86,7 +105,20 @@ function getFooterTranslationFile(footer) {
             },
         }
         : {};
-    return (0, utils_1.mergeTranslations)([footerLinkTitles, footerLinkLabels, copyright]);
+    const logoAlt = footer.logo?.alt
+        ? {
+            'logo.alt': {
+                message: footer.logo.alt,
+                description: 'The alt text of footer logo',
+            },
+        }
+        : {};
+    return (0, utils_1.mergeTranslations)([
+        footerLinkTitles,
+        footerLinkLabels,
+        copyright,
+        logoAlt,
+    ]);
 }
 function translateFooter(footer, footerTranslations) {
     if (!footerTranslations) {
@@ -108,10 +140,17 @@ function translateFooter(footer, footerTranslations) {
                 link.label,
         }));
     const copyright = footerTranslations.copyright?.message ?? footer.copyright;
+    const logo = footer.logo
+        ? {
+            ...footer.logo,
+            alt: footerTranslations[`logo.alt`]?.message ?? footer.logo?.alt,
+        }
+        : undefined;
     return {
         ...footer,
         links,
         copyright,
+        logo,
     };
 }
 function getTranslationFiles({ themeConfig, }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,22 +20,22 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "2.3.1",
-    "@docusaurus/mdx-loader": "2.3.1",
-    "@docusaurus/module-type-aliases": "2.3.1",
-    "@docusaurus/plugin-content-blog": "2.3.1",
-    "@docusaurus/plugin-content-docs": "2.3.1",
-    "@docusaurus/plugin-content-pages": "2.3.1",
-    "@docusaurus/theme-common": "2.3.1",
-    "@docusaurus/theme-translations": "2.3.1",
-    "@docusaurus/types": "2.3.1",
-    "@docusaurus/utils": "2.3.1",
-    "@docusaurus/utils-common": "2.3.1",
-    "@docusaurus/utils-validation": "2.3.1",
+    "@docusaurus/core": "2.4.0",
+    "@docusaurus/mdx-loader": "2.4.0",
+    "@docusaurus/module-type-aliases": "2.4.0",
+    "@docusaurus/plugin-content-blog": "2.4.0",
+    "@docusaurus/plugin-content-docs": "2.4.0",
+    "@docusaurus/plugin-content-pages": "2.4.0",
+    "@docusaurus/theme-common": "2.4.0",
+    "@docusaurus/theme-translations": "2.4.0",
+    "@docusaurus/types": "2.4.0",
+    "@docusaurus/utils": "2.4.0",
+    "@docusaurus/utils-common": "2.4.0",
+    "@docusaurus/utils-validation": "2.4.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
-    "infima": "0.2.0-alpha.42",
+    "infima": "0.2.0-alpha.43",
     "lodash": "^4.17.21",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.14",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "cf12f21a10f6c5439ff931e61419c4bb03a5a2dc"
+  "gitHead": "898b85ef134cc43bf3b1209aad0ca8cdcfb214c5"
 }

package/src/index.ts

@@ -26,6 +26,8 @@ const ContextReplacementPlugin = requireFromDocusaurusCore(
 // Need to be inlined to prevent dark mode FOUC
 // Make sure the key is the same as the one in `/theme/hooks/useTheme.js`
 const ThemeStorageKey = 'theme';
+const ThemeQueryStringKey = 'docusaurus-theme';
+
 const noFlashColorMode = ({
   defaultMode,
   respectPrefersColorScheme,
@@ -39,6 +41,14 @@ const noFlashColorMode = ({
     document.documentElement.setAttribute('data-theme', theme);
   }
 
+  function getQueryStringTheme() {
+    var theme = null;
+    try {
+      theme = new URLSearchParams(window.location.search).get('${ThemeQueryStringKey}')
+    } catch(e) {}
+    return theme;
+  }
+
   function getStoredTheme() {
     var theme = null;
     try {
@@ -47,9 +57,9 @@ const noFlashColorMode = ({
     return theme;
   }
 
-  var storedTheme = getStoredTheme();
-  if (storedTheme !== null) {
-    setDataThemeAttribute(storedTheme);
+  var initialTheme = getQueryStringTheme() || getStoredTheme();
+  if (initialTheme !== null) {
+    setDataThemeAttribute(initialTheme);
   } else {
     if (
       respectPrefersColorScheme &&

package/src/theme/CodeBlock/Content/styles.module.css

@@ -59,6 +59,7 @@
   display: flex;
   column-gap: 0.2rem;
   position: absolute;
+  /* rtl:ignore */
   right: calc(var(--ifm-pre-padding) / 2);
   top: calc(var(--ifm-pre-padding) / 2);
 }
@@ -72,7 +73,7 @@
   border-radius: var(--ifm-global-radius);
   padding: 0.4rem;
   line-height: 0;
-  transition: opacity 200ms ease-in-out;
+  transition: opacity var(--ifm-transition-fast) ease-in-out;
   opacity: 0;
 }
 

package/src/theme/CodeBlock/CopyButton/styles.module.css

@@ -24,7 +24,7 @@
   opacity: inherit;
   width: inherit;
   height: inherit;
-  transition: all 0.15s ease;
+  transition: all var(--ifm-transition-fast) ease;
 }
 
 .copyButtonSuccessIcon {

package/src/theme/ColorModeToggle/index.tsx

@@ -15,7 +15,12 @@ import type {Props} from '@theme/ColorModeToggle';
 
 import styles from './styles.module.css';
 
-function ColorModeToggle({className, value, onChange}: Props): JSX.Element {
+function ColorModeToggle({
+  className,
+  buttonClassName,
+  value,
+  onChange,
+}: Props): JSX.Element {
   const isBrowser = useIsBrowser();
 
   const title = translate(
@@ -47,6 +52,7 @@ function ColorModeToggle({className, value, onChange}: Props): JSX.Element {
           'clean-btn',
           styles.toggleButton,
           !isBrowser && styles.toggleButtonDisabled,
+          buttonClassName,
         )}
         type="button"
         onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}

package/src/theme/DocCard/index.tsx

@@ -82,15 +82,18 @@ function CardCategory({
       href={href}
       icon="🗃️"
       title={item.label}
-      description={translate(
-        {
-          message: '{count} items',
-          id: 'theme.docs.DocCard.categoryDescription',
-          description:
-            'The default description for a category card in the generated index about how many items this category includes',
-        },
-        {count: item.items.length},
-      )}
+      description={
+        item.description ??
+        translate(
+          {
+            message: '{count} items',
+            id: 'theme.docs.DocCard.categoryDescription',
+            description:
+              'The default description for a category card in the generated index about how many items this category includes',
+          },
+          {count: item.items.length},
+        )
+      }
     />
   );
 }
@@ -103,7 +106,7 @@ function CardLink({item}: {item: PropSidebarItemLink}): JSX.Element {
       href={item.href}
       icon={icon}
       title={item.label}
-      description={doc?.description}
+      description={item.description ?? doc?.description}
     />
   );
 }

package/src/theme/DocPage/Layout/styles.module.css

@@ -8,6 +8,7 @@
 .docPage {
   display: flex;
   width: 100%;
+  flex: 1 0;
 }
 
 .docsWrapper {

package/src/theme/ErrorPageContent.tsx

@@ -7,6 +7,10 @@
 
 import React from 'react';
 import Translate from '@docusaurus/Translate';
+import {
+  ErrorBoundaryError,
+  ErrorBoundaryTryAgainButton,
+} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Error';
 
 export default function ErrorPageContent({
@@ -24,15 +28,15 @@ export default function ErrorPageContent({
               This page crashed.
             </Translate>
           </h1>
-          <p>{error.message}</p>
-          <div>
-            <button type="button" onClick={tryAgain}>
-              <Translate
-                id="theme.ErrorPageContent.tryAgain"
-                description="The label of the button to try again when the page crashed">
-                Try again
-              </Translate>
-            </button>
+          <div className="margin-vert--lg">
+            <ErrorBoundaryTryAgainButton
+              onClick={tryAgain}
+              className="button button--primary shadow--lw"
+            />
+          </div>
+          <hr />
+          <div className="margin-vert--md">
+            <ErrorBoundaryError error={error} />
           </div>
         </div>
       </div>

package/src/theme/Navbar/ColorModeToggle/index.tsx

@@ -9,10 +9,12 @@ import React from 'react';
 import {useColorMode, useThemeConfig} from '@docusaurus/theme-common';
 import ColorModeToggle from '@theme/ColorModeToggle';
 import type {Props} from '@theme/Navbar/ColorModeToggle';
+import styles from './styles.module.css';
 
 export default function NavbarColorModeToggle({
   className,
 }: Props): JSX.Element | null {
+  const navbarStyle = useThemeConfig().navbar.style;
   const disabled = useThemeConfig().colorMode.disableSwitch;
   const {colorMode, setColorMode} = useColorMode();
 
@@ -23,6 +25,9 @@ export default function NavbarColorModeToggle({
   return (
     <ColorModeToggle
       className={className}
+      buttonClassName={
+        navbarStyle === 'dark' ? styles.darkNavbarColorModeToggle : undefined
+      }
       value={colorMode}
       onChange={setColorMode}
     />

package/src/theme/Navbar/ColorModeToggle/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.darkNavbarColorModeToggle:hover {
+  background: var(--ifm-color-gray-800);
+}

package/src/theme/Navbar/Content/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, {type ReactNode} from 'react';
-import {useThemeConfig} from '@docusaurus/theme-common';
+import {useThemeConfig, ErrorCauseBoundary} from '@docusaurus/theme-common';
 import {
   splitNavbarItems,
   useNavbarMobileSidebar,
@@ -29,7 +29,18 @@ function NavbarItems({items}: {items: NavbarItemConfig[]}): JSX.Element {
   return (
     <>
       {items.map((item, i) => (
-        <NavbarItem {...item} key={i} />
+        <ErrorCauseBoundary
+          key={i}
+          onError={(error) =>
+            new Error(
+              `A theme navbar item failed to render.
+Please double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:
+${JSON.stringify(item, null, 2)}`,
+              {cause: error},
+            )
+          }>
+          <NavbarItem {...item} />
+        </ErrorCauseBoundary>
       ))}
     </>
   );

package/src/theme/NavbarItem/DropdownNavbarItem.tsx

@@ -54,7 +54,9 @@ function DropdownNavbarItemDesktop({
   const [showDropdown, setShowDropdown] = useState(false);
 
   useEffect(() => {
-    const handleClickOutside = (event: MouseEvent | TouchEvent) => {
+    const handleClickOutside = (
+      event: MouseEvent | TouchEvent | FocusEvent,
+    ) => {
       if (
         !dropdownRef.current ||
         dropdownRef.current.contains(event.target as Node)
@@ -66,10 +68,12 @@ function DropdownNavbarItemDesktop({
 
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
+    document.addEventListener('focusin', handleClickOutside);
 
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
+      document.removeEventListener('focusin', handleClickOutside);
     };
   }, [dropdownRef]);
 
@@ -100,22 +104,6 @@ function DropdownNavbarItemDesktop({
         {items.map((childItemProps, i) => (
           <NavbarItem
             isDropdownItem
-            onKeyDown={(e) => {
-              if (i === items.length - 1 && e.key === 'Tab') {
-                e.preventDefault();
-                setShowDropdown(false);
-                const nextNavbarItem = dropdownRef.current!.nextElementSibling;
-                if (nextNavbarItem) {
-                  const targetItem =
-                    nextNavbarItem instanceof HTMLAnchorElement
-                      ? nextNavbarItem
-                      : // Next item is another dropdown; focus on the inner
-                        // anchor element instead so there's outline
-                        nextNavbarItem.querySelector('a')!;
-                  targetItem.focus();
-                }
-              }
-            }}
             activeClassName="dropdown__link--active"
             {...childItemProps}
             key={i}

package/src/theme/Tabs/index.tsx

@@ -5,11 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {cloneElement} from 'react';
+import React, {cloneElement, type ReactElement} from 'react';
 import clsx from 'clsx';
 import {
   useScrollPositionBlocker,
   useTabs,
+  type TabItemProps,
 } from '@docusaurus/theme-common/internal';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import type {Props} from '@theme/Tabs';
@@ -109,10 +110,11 @@ function TabContent({
   children,
   selectedValue,
 }: Props & ReturnType<typeof useTabs>) {
-  // eslint-disable-next-line no-param-reassign
-  children = Array.isArray(children) ? children : [children];
+  const childTabs = (Array.isArray(children) ? children : [children]).filter(
+    Boolean,
+  ) as ReactElement<TabItemProps>[];
   if (lazy) {
-    const selectedTabItem = children.find(
+    const selectedTabItem = childTabs.find(
       (tabItem) => tabItem.props.value === selectedValue,
     );
     if (!selectedTabItem) {
@@ -123,7 +125,7 @@ function TabContent({
   }
   return (
     <div className="margin-top--md">
-      {children.map((tabItem, i) =>
+      {childTabs.map((tabItem, i) =>
         cloneElement(tabItem, {
           key: i,
           hidden: tabItem.props.value !== selectedValue,

package/src/theme-classic.d.ts

@@ -1243,6 +1243,7 @@ declare module '@theme/ColorModeToggle' {
 
   export interface Props {
     readonly className?: string;
+    readonly buttonClassName?: string;
     readonly value: ColorMode;
     /**
      * The parameter represents the "to-be" value. For example, if currently in

package/src/translations.ts

@@ -45,7 +45,20 @@ function getNavbarTranslationFile(navbar: Navbar): TranslationFileContent {
     ? {title: {message: navbar.title, description: 'The title in the navbar'}}
     : {};
 
-  return mergeTranslations([titleTranslations, navbarItemsTranslations]);
+  const logoAlt: TranslationFileContent = navbar.logo?.alt
+    ? {
+        'logo.alt': {
+          message: navbar.logo.alt,
+          description: 'The alt text of navbar logo',
+        },
+      }
+    : {};
+
+  return mergeTranslations([
+    titleTranslations,
+    logoAlt,
+    navbarItemsTranslations,
+  ]);
 }
 function translateNavbar(
   navbar: Navbar,
@@ -54,9 +67,18 @@ function translateNavbar(
   if (!navbarTranslations) {
     return navbar;
   }
+
+  const logo = navbar.logo
+    ? {
+        ...navbar.logo,
+        alt: navbarTranslations[`logo.alt`]?.message ?? navbar.logo?.alt,
+      }
+    : undefined;
+
   return {
     ...navbar,
     title: navbarTranslations.title?.message ?? navbar.title,
+    logo,
     //  TODO handle properly all the navbar item types here!
     items: navbar.items.map((item) => {
       const subItems = item.items?.map((subItem) => ({
@@ -119,7 +141,21 @@ function getFooterTranslationFile(footer: Footer): TranslationFileContent {
       }
     : {};
 
-  return mergeTranslations([footerLinkTitles, footerLinkLabels, copyright]);
+  const logoAlt: TranslationFileContent = footer.logo?.alt
+    ? {
+        'logo.alt': {
+          message: footer.logo.alt,
+          description: 'The alt text of footer logo',
+        },
+      }
+    : {};
+
+  return mergeTranslations([
+    footerLinkTitles,
+    footerLinkLabels,
+    copyright,
+    logoAlt,
+  ]);
 }
 function translateFooter(
   footer: Footer,
@@ -149,10 +185,18 @@ function translateFooter(
 
   const copyright = footerTranslations.copyright?.message ?? footer.copyright;
 
+  const logo = footer.logo
+    ? {
+        ...footer.logo,
+        alt: footerTranslations[`logo.alt`]?.message ?? footer.logo?.alt,
+      }
+    : undefined;
+
   return {
     ...footer,
     links,
     copyright,
+    logo,
   };
 }