@docusaurus/theme-classic 0.0.0-5335 → 0.0.0-5341

package/lib/getSwizzleConfig.js

@@ -348,6 +348,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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-5335",
+  "version": "0.0.0-5341",
   "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": "0.0.0-5335",
-    "@docusaurus/mdx-loader": "0.0.0-5335",
-    "@docusaurus/module-type-aliases": "0.0.0-5335",
-    "@docusaurus/plugin-content-blog": "0.0.0-5335",
-    "@docusaurus/plugin-content-docs": "0.0.0-5335",
-    "@docusaurus/plugin-content-pages": "0.0.0-5335",
-    "@docusaurus/theme-common": "0.0.0-5335",
-    "@docusaurus/theme-translations": "0.0.0-5335",
-    "@docusaurus/types": "0.0.0-5335",
-    "@docusaurus/utils": "0.0.0-5335",
-    "@docusaurus/utils-common": "0.0.0-5335",
-    "@docusaurus/utils-validation": "0.0.0-5335",
+    "@docusaurus/core": "0.0.0-5341",
+    "@docusaurus/mdx-loader": "0.0.0-5341",
+    "@docusaurus/module-type-aliases": "0.0.0-5341",
+    "@docusaurus/plugin-content-blog": "0.0.0-5341",
+    "@docusaurus/plugin-content-docs": "0.0.0-5341",
+    "@docusaurus/plugin-content-pages": "0.0.0-5341",
+    "@docusaurus/theme-common": "0.0.0-5341",
+    "@docusaurus/theme-translations": "0.0.0-5341",
+    "@docusaurus/types": "0.0.0-5341",
+    "@docusaurus/utils": "0.0.0-5341",
+    "@docusaurus/utils-common": "0.0.0-5341",
+    "@docusaurus/utils-validation": "0.0.0-5341",
     "@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": "42c59e0828b093f765f6c37d522c02ef74846a31"
+  "gitHead": "d74e9a571123b90c4effb2e1b2d4765c88bcb94f"
 }

package/src/getSwizzleConfig.ts

@@ -377,6 +377,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/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/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/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} />;
 }