@docusaurus/theme-classic 2.1.0 → 2.2.0

package/lib/getSwizzleConfig.js

@@ -222,6 +222,13 @@ function getSwizzleConfig() {
                 // By default it's an empty placeholder for the user to fill
                 description: 'The search bar component of your site, appearing in the navbar.',
             },
+            SkipToContent: {
+                actions: {
+                    eject: 'safe',
+                    wrap: 'safe',
+                },
+                description: 'The component responsible for implementing the accessibility "skip to content" link (https://www.w3.org/TR/WCAG20-TECHS/G1.html)',
+            },
             'prism-include-languages': {
                 actions: {
                     eject: 'safe',

package/lib/theme/AnnouncementBar/styles.module.css

@@ -15,8 +15,16 @@
   height: var(--docusaurus-announcement-bar-height);
   background-color: var(--ifm-color-white);
   color: var(--ifm-color-black);
+
+  /*
+  Unfortunately we can't make announcement bar render above the navbar
+  IE need to use border-bottom instead of shadow
+  See https://github.com/facebookincubator/infima/issues/275
+
   box-shadow: var(--ifm-global-shadow-lw);
-  z-index: calc(var(--ifm-z-index-fixed) + 1); /* just above the navbar */
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+  */
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
 }
 
 html[data-announcement-bar-initially-dismissed='true'] .announcementBar {

package/lib/theme/CodeBlock/Line/index.js

@@ -32,11 +32,9 @@ export default function CodeBlockLine({
           <span className={styles.codeLineContent}>{lineTokens}</span>
         </>
       ) : (
-        <>
-          {lineTokens}
-          <br />
-        </>
+        lineTokens
       )}
+      <br />
     </span>
   );
 }

package/lib/theme/ColorModeToggle/index.js

@@ -46,7 +46,8 @@ function ColorModeToggle({className, value, onChange}) {
         onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
         disabled={!isBrowser}
         title={title}
-        aria-label={title}>
+        aria-label={title}
+        aria-live="polite">
         <IconLightMode
           className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
         />

package/lib/theme/Layout/index.js

@@ -7,7 +7,11 @@
 import React from 'react';
 import clsx from 'clsx';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
-import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
 import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
@@ -37,6 +41,7 @@ export default function Layout(props) {
       <Navbar />
 
       <div
+        id={SkipToContentFallbackId}
         className={clsx(
           ThemeClassNames.wrapper.main,
           styles.mainWrapper,

package/lib/theme/MDXComponents/Code.js

@@ -9,15 +9,35 @@ import CodeBlock from '@theme/CodeBlock';
 export default function MDXCode(props) {
   const inlineElements = [
     'a',
+    'abbr',
     'b',
-    'big',
+    'br',
+    'button',
+    'cite',
+    'code',
+    'del',
+    'dfn',
+    'em',
     'i',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'label',
+    'object',
+    'output',
+    'q',
+    'ruby',
+    's',
+    'small',
     'span',
-    'em',
     'strong',
-    'sup',
     'sub',
-    'small',
+    'sup',
+    'time',
+    'u',
+    'var',
+    'wbr',
   ];
   const shouldBeInline = React.Children.toArray(props.children).every(
     (el) =>

package/lib/theme/MDXComponents/index.js

@@ -14,6 +14,7 @@ import MDXHeading from '@theme/MDXComponents/Heading';
 import MDXUl from '@theme/MDXComponents/Ul';
 import MDXImg from '@theme/MDXComponents/Img';
 import Admonition from '@theme/Admonition';
+import Mermaid from '@theme/Mermaid';
 const MDXComponents = {
   head: MDXHead,
   code: MDXCode,
@@ -29,5 +30,6 @@ const MDXComponents = {
   h5: (props) => <MDXHeading as="h5" {...props} />,
   h6: (props) => <MDXHeading as="h6" {...props} />,
   admonition: Admonition,
+  mermaid: Mermaid,
 };
 export default MDXComponents;

package/lib/theme/Mermaid.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export { default } from '@docusaurus/Noop';

package/lib/theme/Mermaid.js

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+// This component is meant to be implemented by a Mermaid renderer theme
+// It is notable created to be overridden by docusaurus-theme-mermaid
+// By default, the classic theme does not provide any Mermaid implementation
+// Yet we declare it there so that we can register it in MDX
+// TODO later the mermaid theme should be able to register its MDX component
+// see https://github.com/facebook/docusaurus/pull/7490#issuecomment-1279117288
+export {default} from '@docusaurus/Noop';

package/lib/theme/Navbar/MobileSidebar/Header/index.js

@@ -6,6 +6,7 @@
  */
 import React from 'react';
 import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import IconClose from '@theme/Icon/Close';
 import NavbarLogo from '@theme/Navbar/Logo';
@@ -14,6 +15,11 @@ function CloseButton() {
   return (
     <button
       type="button"
+      aria-label={translate({
+        id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
+        message: 'Close navigation bar',
+        description: 'The ARIA label for close button of mobile sidebar',
+      })}
       className="clean-btn navbar-sidebar__close"
       onClick={() => mobileSidebar.toggle()}>
       <IconClose color="var(--ifm-color-emphasis-600)" />

package/lib/theme/Navbar/MobileSidebar/Toggle/index.js

@@ -6,17 +6,22 @@
  */
 import React from 'react';
 import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import IconMenu from '@theme/Icon/Menu';
 export default function MobileSidebarToggle() {
-  const mobileSidebar = useNavbarMobileSidebar();
+  const {toggle, shown} = useNavbarMobileSidebar();
   return (
     <button
-      onClick={mobileSidebar.toggle}
-      onKeyDown={mobileSidebar.toggle}
-      aria-label="Navigation bar toggle"
+      onClick={toggle}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.toggleSidebarButtonAriaLabel',
+        message: 'Toggle navigation bar',
+        description:
+          'The ARIA label for hamburger menu button of mobile navigation',
+      })}
+      aria-expanded={shown}
       className="navbar__toggle clean-btn"
-      type="button"
-      tabIndex={0}>
+      type="button">
       <IconMenu />
     </button>
   );

package/lib/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -12,6 +12,7 @@ import {
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
+import {useLocation} from '@docusaurus/router';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 const getVersionMainDoc = (version) =>
@@ -24,6 +25,7 @@ export default function DocsVersionDropdownNavbarItem({
   dropdownItemsAfter,
   ...props
 }) {
+  const {search, hash} = useLocation();
   const activeDocContext = useActiveDocContext(docsPluginId);
   const versions = useVersions(docsPluginId);
   const {savePreferredVersionName} = useDocsPreferredVersion(docsPluginId);
@@ -35,7 +37,8 @@ export default function DocsVersionDropdownNavbarItem({
       getVersionMainDoc(version);
     return {
       label: version.label,
-      to: versionDoc.path,
+      // preserve ?search#hash suffix on version switches
+      to: `${versionDoc.path}${search}${hash}`,
       isActive: () => version === activeDocContext.activeVersion,
       onClick: () => savePreferredVersionName(version.name),
     };

package/lib/theme/NavbarItem/LocaleDropdownNavbarItem/index.js

@@ -8,6 +8,7 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
+import {useLocation} from '@docusaurus/router';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/Icon/Language';
 import styles from './styles.module.css';
@@ -21,11 +22,14 @@ export default function LocaleDropdownNavbarItem({
     i18n: {currentLocale, locales, localeConfigs},
   } = useDocusaurusContext();
   const alternatePageUtils = useAlternatePageUtils();
+  const {search, hash} = useLocation();
   const localeItems = locales.map((locale) => {
-    const to = `pathname://${alternatePageUtils.createUrl({
+    const baseTo = `pathname://${alternatePageUtils.createUrl({
       locale,
       fullyQualified: false,
     })}`;
+    // preserve ?search#hash suffix on locale switches
+    const to = `${baseTo}${search}${hash}`;
     return {
       label: localeConfigs[locale].label,
       lang: localeConfigs[locale].htmlLang,

package/lib/theme/SkipToContent/index.js

@@ -5,24 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Translate, {translate} from '@docusaurus/Translate';
-import {useSkipToContent} from '@docusaurus/theme-common/internal';
+import {SkipToContentLink} from '@docusaurus/theme-common';
 import styles from './styles.module.css';
 export default function SkipToContent() {
-  const {containerRef, handleSkip} = useSkipToContent();
-  return (
-    <div
-      ref={containerRef}
-      role="region"
-      aria-label={translate({id: 'theme.common.skipToMainContent'})}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a href="#" className={styles.skipToContent} onClick={handleSkip}>
-        <Translate
-          id="theme.common.skipToMainContent"
-          description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">
-          Skip to main content
-        </Translate>
-      </a>
-    </div>
-  );
+  return <SkipToContentLink className={styles.skipToContent} />;
 }

package/lib/theme/Tabs/index.js

@@ -102,6 +102,10 @@ function TabsComponent(props) {
   const handleKeydown = (event) => {
     let focusElement = null;
     switch (event.key) {
+      case 'Enter': {
+        handleTabChange(event);
+        break;
+      }
       case 'ArrowRight': {
         const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
         focusElement = tabRefs[nextTab] ?? tabRefs[0];
@@ -137,7 +141,6 @@ function TabsComponent(props) {
             key={value}
             ref={(tabControl) => tabRefs.push(tabControl)}
             onKeyDown={handleKeydown}
-            onFocus={handleTabChange}
             onClick={handleTabChange}
             {...attributes}
             className={clsx(

package/lib/theme/Tag/styles.module.css

@@ -20,7 +20,7 @@
 }
 
 .tagRegular {
-  border-radius: 0.5rem;
+  border-radius: var(--ifm-global-radius);
   padding: 0.2rem 0.5rem 0.3rem;
   font-size: 90%;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -20,18 +20,18 @@
     "copy:watch": "node ../../admin/scripts/copyUntypedFiles.js --watch"
   },
   "dependencies": {
-    "@docusaurus/core": "2.1.0",
-    "@docusaurus/mdx-loader": "2.1.0",
-    "@docusaurus/module-type-aliases": "2.1.0",
-    "@docusaurus/plugin-content-blog": "2.1.0",
-    "@docusaurus/plugin-content-docs": "2.1.0",
-    "@docusaurus/plugin-content-pages": "2.1.0",
-    "@docusaurus/theme-common": "2.1.0",
-    "@docusaurus/theme-translations": "2.1.0",
-    "@docusaurus/types": "2.1.0",
-    "@docusaurus/utils": "2.1.0",
-    "@docusaurus/utils-common": "2.1.0",
-    "@docusaurus/utils-validation": "2.1.0",
+    "@docusaurus/core": "2.2.0",
+    "@docusaurus/mdx-loader": "2.2.0",
+    "@docusaurus/module-type-aliases": "2.2.0",
+    "@docusaurus/plugin-content-blog": "2.2.0",
+    "@docusaurus/plugin-content-docs": "2.2.0",
+    "@docusaurus/plugin-content-pages": "2.2.0",
+    "@docusaurus/theme-common": "2.2.0",
+    "@docusaurus/theme-translations": "2.2.0",
+    "@docusaurus/types": "2.2.0",
+    "@docusaurus/utils": "2.2.0",
+    "@docusaurus/utils-common": "2.2.0",
+    "@docusaurus/utils-validation": "2.2.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -62,5 +62,5 @@
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "be9b0942641184213485eba7fd75ceb0b328d3f4"
+  "gitHead": "a308fb7c81832cca354192fe2984f52749441249"
 }

package/src/getSwizzleConfig.ts

@@ -240,6 +240,14 @@ export default function getSwizzleConfig(): SwizzleConfig {
         description:
           'The search bar component of your site, appearing in the navbar.',
       },
+      SkipToContent: {
+        actions: {
+          eject: 'safe',
+          wrap: 'safe',
+        },
+        description:
+          'The component responsible for implementing the accessibility "skip to content" link (https://www.w3.org/TR/WCAG20-TECHS/G1.html)',
+      },
       'prism-include-languages': {
         actions: {
           eject: 'safe',

package/src/theme/AnnouncementBar/styles.module.css

@@ -15,8 +15,16 @@
   height: var(--docusaurus-announcement-bar-height);
   background-color: var(--ifm-color-white);
   color: var(--ifm-color-black);
+
+  /*
+  Unfortunately we can't make announcement bar render above the navbar
+  IE need to use border-bottom instead of shadow
+  See https://github.com/facebookincubator/infima/issues/275
+
   box-shadow: var(--ifm-global-shadow-lw);
-  z-index: calc(var(--ifm-z-index-fixed) + 1); /* just above the navbar */
+  z-index: calc(var(--ifm-z-index-fixed) + 1);
+  */
+  border-bottom: 1px solid var(--ifm-color-emphasis-100);
 }
 
 html[data-announcement-bar-initially-dismissed='true'] .announcementBar {

package/src/theme/CodeBlock/Line/index.tsx

@@ -39,11 +39,9 @@ export default function CodeBlockLine({
           <span className={styles.codeLineContent}>{lineTokens}</span>
         </>
       ) : (
-        <>
-          {lineTokens}
-          <br />
-        </>
+        lineTokens
       )}
+      <br />
     </span>
   );
 }

package/src/theme/ColorModeToggle/index.tsx

@@ -52,7 +52,8 @@ function ColorModeToggle({className, value, onChange}: Props): JSX.Element {
         onClick={() => onChange(value === 'dark' ? 'light' : 'dark')}
         disabled={!isBrowser}
         title={title}
-        aria-label={title}>
+        aria-label={title}
+        aria-live="polite">
         <IconLightMode
           className={clsx(styles.toggleIcon, styles.lightToggleIcon)}
         />

package/src/theme/Layout/index.tsx

@@ -8,7 +8,11 @@
 import React from 'react';
 import clsx from 'clsx';
 import ErrorBoundary from '@docusaurus/ErrorBoundary';
-import {PageMetadata, ThemeClassNames} from '@docusaurus/theme-common';
+import {
+  PageMetadata,
+  SkipToContentFallbackId,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
 import {useKeyboardNavigation} from '@docusaurus/theme-common/internal';
 import SkipToContent from '@theme/SkipToContent';
 import AnnouncementBar from '@theme/AnnouncementBar';
@@ -42,6 +46,7 @@ export default function Layout(props: Props): JSX.Element {
       <Navbar />
 
       <div
+        id={SkipToContentFallbackId}
         className={clsx(
           ThemeClassNames.wrapper.main,
           styles.mainWrapper,

package/src/theme/MDXComponents/Code.tsx

@@ -13,15 +13,35 @@ import type {Props} from '@theme/MDXComponents/Code';
 export default function MDXCode(props: Props): JSX.Element {
   const inlineElements: (string | undefined)[] = [
     'a',
+    'abbr',
     'b',
-    'big',
+    'br',
+    'button',
+    'cite',
+    'code',
+    'del',
+    'dfn',
+    'em',
     'i',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'label',
+    'object',
+    'output',
+    'q',
+    'ruby',
+    's',
+    'small',
     'span',
-    'em',
     'strong',
-    'sup',
     'sub',
-    'small',
+    'sup',
+    'time',
+    'u',
+    'var',
+    'wbr',
   ];
   const shouldBeInline = React.Children.toArray(props.children).every(
     (el) =>

package/src/theme/MDXComponents/index.tsx

@@ -15,6 +15,7 @@ import MDXHeading from '@theme/MDXComponents/Heading';
 import MDXUl from '@theme/MDXComponents/Ul';
 import MDXImg from '@theme/MDXComponents/Img';
 import Admonition from '@theme/Admonition';
+import Mermaid from '@theme/Mermaid';
 
 import type {MDXComponentsObject} from '@theme/MDXComponents';
 
@@ -33,6 +34,7 @@ const MDXComponents: MDXComponentsObject = {
   h5: (props) => <MDXHeading as="h5" {...props} />,
   h6: (props) => <MDXHeading as="h6" {...props} />,
   admonition: Admonition,
+  mermaid: Mermaid,
 };
 
 export default MDXComponents;

package/src/theme/Mermaid.tsx

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+
+// This component is meant to be implemented by a Mermaid renderer theme
+// It is notable created to be overridden by docusaurus-theme-mermaid
+
+// By default, the classic theme does not provide any Mermaid implementation
+// Yet we declare it there so that we can register it in MDX
+// TODO later the mermaid theme should be able to register its MDX component
+// see https://github.com/facebook/docusaurus/pull/7490#issuecomment-1279117288
+
+export {default} from '@docusaurus/Noop';

package/src/theme/Navbar/MobileSidebar/Header/index.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle';
 import IconClose from '@theme/Icon/Close';
 import NavbarLogo from '@theme/Navbar/Logo';
@@ -16,6 +17,11 @@ function CloseButton() {
   return (
     <button
       type="button"
+      aria-label={translate({
+        id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
+        message: 'Close navigation bar',
+        description: 'The ARIA label for close button of mobile sidebar',
+      })}
       className="clean-btn navbar-sidebar__close"
       onClick={() => mobileSidebar.toggle()}>
       <IconClose color="var(--ifm-color-emphasis-600)" />

package/src/theme/Navbar/MobileSidebar/Toggle/index.tsx

@@ -7,18 +7,23 @@
 
 import React from 'react';
 import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import IconMenu from '@theme/Icon/Menu';
 
 export default function MobileSidebarToggle(): JSX.Element {
-  const mobileSidebar = useNavbarMobileSidebar();
+  const {toggle, shown} = useNavbarMobileSidebar();
   return (
     <button
-      onClick={mobileSidebar.toggle}
-      onKeyDown={mobileSidebar.toggle}
-      aria-label="Navigation bar toggle"
+      onClick={toggle}
+      aria-label={translate({
+        id: 'theme.docs.sidebar.toggleSidebarButtonAriaLabel',
+        message: 'Toggle navigation bar',
+        description:
+          'The ARIA label for hamburger menu button of mobile navigation',
+      })}
+      aria-expanded={shown}
       className="navbar__toggle clean-btn"
-      type="button"
-      tabIndex={0}>
+      type="button">
       <IconMenu />
     </button>
   );

package/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -13,6 +13,7 @@ import {
 import {useDocsPreferredVersion} from '@docusaurus/theme-common';
 import {useDocsVersionCandidates} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
+import {useLocation} from '@docusaurus/router';
 import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import type {Props} from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
@@ -29,6 +30,7 @@ export default function DocsVersionDropdownNavbarItem({
   dropdownItemsAfter,
   ...props
 }: Props): JSX.Element {
+  const {search, hash} = useLocation();
   const activeDocContext = useActiveDocContext(docsPluginId);
   const versions = useVersions(docsPluginId);
   const {savePreferredVersionName} = useDocsPreferredVersion(docsPluginId);
@@ -40,7 +42,8 @@ export default function DocsVersionDropdownNavbarItem({
       getVersionMainDoc(version);
     return {
       label: version.label,
-      to: versionDoc.path,
+      // preserve ?search#hash suffix on version switches
+      to: `${versionDoc.path}${search}${hash}`,
       isActive: () => version === activeDocContext.activeVersion,
       onClick: () => savePreferredVersionName(version.name),
     };

package/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common/internal';
 import {translate} from '@docusaurus/Translate';
+import {useLocation} from '@docusaurus/router';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/Icon/Language';
 import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
@@ -26,12 +27,15 @@ export default function LocaleDropdownNavbarItem({
     i18n: {currentLocale, locales, localeConfigs},
   } = useDocusaurusContext();
   const alternatePageUtils = useAlternatePageUtils();
+  const {search, hash} = useLocation();
 
   const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
-    const to = `pathname://${alternatePageUtils.createUrl({
+    const baseTo = `pathname://${alternatePageUtils.createUrl({
       locale,
       fullyQualified: false,
     })}`;
+    // preserve ?search#hash suffix on locale switches
+    const to = `${baseTo}${search}${hash}`;
     return {
       label: localeConfigs[locale]!.label,
       lang: localeConfigs[locale]!.htmlLang,

package/src/theme/SkipToContent/index.tsx

@@ -6,26 +6,10 @@
  */
 
 import React from 'react';
-import Translate, {translate} from '@docusaurus/Translate';
-import {useSkipToContent} from '@docusaurus/theme-common/internal';
+import {SkipToContentLink} from '@docusaurus/theme-common';
 
 import styles from './styles.module.css';
 
 export default function SkipToContent(): JSX.Element {
-  const {containerRef, handleSkip} = useSkipToContent();
-  return (
-    <div
-      ref={containerRef}
-      role="region"
-      aria-label={translate({id: 'theme.common.skipToMainContent'})}>
-      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-      <a href="#" className={styles.skipToContent} onClick={handleSkip}>
-        <Translate
-          id="theme.common.skipToMainContent"
-          description="The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation">
-          Skip to main content
-        </Translate>
-      </a>
-    </div>
-  );
+  return <SkipToContentLink className={styles.skipToContent} />;
 }

package/src/theme/Tabs/index.tsx

@@ -104,7 +104,10 @@ function TabsComponent(props: Props): JSX.Element {
   }
 
   const handleTabChange = (
-    event: React.FocusEvent<HTMLLIElement> | React.MouseEvent<HTMLLIElement>,
+    event:
+      | React.FocusEvent<HTMLLIElement>
+      | React.MouseEvent<HTMLLIElement>
+      | React.KeyboardEvent<HTMLLIElement>,
   ) => {
     const newTab = event.currentTarget;
     const newTabIndex = tabRefs.indexOf(newTab);
@@ -124,6 +127,10 @@ function TabsComponent(props: Props): JSX.Element {
     let focusElement: HTMLLIElement | null = null;
 
     switch (event.key) {
+      case 'Enter': {
+        handleTabChange(event);
+        break;
+      }
       case 'ArrowRight': {
         const nextTab = tabRefs.indexOf(event.currentTarget) + 1;
         focusElement = tabRefs[nextTab] ?? tabRefs[0]!;
@@ -161,7 +168,6 @@ function TabsComponent(props: Props): JSX.Element {
             key={value}
             ref={(tabControl) => tabRefs.push(tabControl)}
             onKeyDown={handleKeydown}
-            onFocus={handleTabChange}
             onClick={handleTabChange}
             {...attributes}
             className={clsx(

package/src/theme/Tag/styles.module.css

@@ -20,7 +20,7 @@
 }
 
 .tagRegular {
-  border-radius: 0.5rem;
+  border-radius: var(--ifm-global-radius);
   padding: 0.2rem 0.5rem 0.3rem;
   font-size: 90%;
 }

package/src/theme-classic.d.ts

@@ -788,6 +788,7 @@ declare module '@theme/MDXComponents' {
   import type MDXUl from '@theme/MDXComponents/Ul';
   import type MDXImg from '@theme/MDXComponents/Img';
   import type Admonition from '@theme/Admonition';
+  import type Mermaid from '@theme/Mermaid';
 
   export type MDXComponentsObject = {
     readonly head: typeof MDXHead;
@@ -804,6 +805,7 @@ declare module '@theme/MDXComponents' {
     readonly h5: (props: ComponentProps<'h5'>) => JSX.Element;
     readonly h6: (props: ComponentProps<'h6'>) => JSX.Element;
     readonly admonition: typeof Admonition;
+    readonly mermaid: typeof Mermaid;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [tagName: string]: ComponentType<any>;
   };
@@ -1112,6 +1114,14 @@ declare module '@theme/SearchBar' {
   export default function SearchBar(): JSX.Element;
 }
 
+declare module '@theme/Mermaid' {
+  export interface Props {
+    value: string;
+  }
+
+  export default function Mermaid(props: Props): JSX.Element;
+}
+
 declare module '@theme/TabItem' {
   import type {ReactNode} from 'react';