@docusaurus/theme-classic 0.0.0-4492 → 0.0.0-4501

package/lib-next/theme/BlogPostItem/index.js

@@ -138,7 +138,17 @@ function BlogPostItem(props) {
               })}>
               <Link
                 to={metadata.permalink}
-                aria-label={`Read more about ${title}`}>
+                aria-label={translate(
+                  {
+                    message: 'Read more about {title}',
+                    id: 'theme.blog.post.readMoreLabel',
+                    description:
+                      'The ARIA label for the link to full blog posts from excerpts',
+                  },
+                  {
+                    title,
+                  },
+                )}>
                 <b>
                   <Translate
                     id="theme.blog.post.readMore"

package/lib-next/theme/DocCard/index.js

@@ -10,6 +10,7 @@ import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
 
 function CardContainer({href, children}) {
   const className = clsx(
@@ -48,7 +49,17 @@ function CardCategory({item}) {
       href={href}
       icon="🗃️"
       title={item.label}
-      description={`${item.items.length} items`}
+      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,
+        },
+      )}
     />
   );
 }

package/lib-next/theme/DocVersionBadge/index.js

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
+import Translate from '@docusaurus/Translate';
 import {ThemeClassNames, useDocsVersion} from '@docusaurus/theme-common';
 import clsx from 'clsx';
 export default function DocVersionBadge({className}) {
@@ -18,7 +19,13 @@ export default function DocVersionBadge({className}) {
           ThemeClassNames.docs.docVersionBadge,
           'badge badge--secondary',
         )}>
-        Version: {versionMetadata.label}
+        <Translate
+          id="theme.docs.versionBadge.label"
+          values={{
+            versionLabel: versionMetadata.label,
+          }}>
+          {'Version: {versionLabel}'}
+        </Translate>
       </span>
     );
   }

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

@@ -9,6 +9,7 @@ import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
 import IconLanguage from '@theme/IconLanguage';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common';
+import {translate} from '@docusaurus/Translate';
 import styles from './styles.module.css';
 export default function LocaleDropdownNavbarItem({
   mobile,
@@ -41,7 +42,13 @@ export default function LocaleDropdownNavbarItem({
   });
   const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter]; // Mobile is handled a bit differently
 
-  const dropdownLabel = mobile ? 'Languages' : getLocaleLabel(currentLocale);
+  const dropdownLabel = mobile
+    ? translate({
+        message: 'Languages',
+        id: 'theme.navbar.mobileLanguageDropdown.label',
+        description: 'The label for the mobile language switcher dropdown',
+      })
+    : getLocaleLabel(currentLocale);
   return (
     <DropdownNavbarItem
       {...props}

package/lib-next/theme/Toggle/index.js

@@ -7,6 +7,7 @@
 import React, {useState, useRef, memo} from 'react';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import {translate} from '@docusaurus/Translate';
 import clsx from 'clsx';
 import styles from './styles.module.css'; // Based on react-toggle (https://github.com/aaronshaf/react-toggle/).
 
@@ -47,7 +48,11 @@ const ToggleComponent = memo(
           checked={checked}
           type="checkbox"
           className={styles.toggleScreenReader}
-          aria-label="Switch between dark and light mode"
+          aria-label={translate({
+            message: 'Switch between dark and light mode',
+            id: 'theme.colorToggle.ariaLabel',
+            description: 'The ARIA label for the navbar color mode toggle',
+          })}
           onChange={onChange}
           onClick={() => setChecked(!checked)}
           onFocus={() => setFocused(true)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4492",
+  "version": "0.0.0-4501",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -21,15 +21,15 @@
     "format:lib-next": "prettier --config ../../.prettierrc --write \"lib-next/**/*.{js,ts,jsx,tsc}\""
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4492",
-    "@docusaurus/plugin-content-blog": "0.0.0-4492",
-    "@docusaurus/plugin-content-docs": "0.0.0-4492",
-    "@docusaurus/plugin-content-pages": "0.0.0-4492",
-    "@docusaurus/theme-common": "0.0.0-4492",
-    "@docusaurus/theme-translations": "0.0.0-4492",
-    "@docusaurus/utils": "0.0.0-4492",
-    "@docusaurus/utils-common": "0.0.0-4492",
-    "@docusaurus/utils-validation": "0.0.0-4492",
+    "@docusaurus/core": "0.0.0-4501",
+    "@docusaurus/plugin-content-blog": "0.0.0-4501",
+    "@docusaurus/plugin-content-docs": "0.0.0-4501",
+    "@docusaurus/plugin-content-pages": "0.0.0-4501",
+    "@docusaurus/theme-common": "0.0.0-4501",
+    "@docusaurus/theme-translations": "0.0.0-4501",
+    "@docusaurus/utils": "0.0.0-4501",
+    "@docusaurus/utils-common": "0.0.0-4501",
+    "@docusaurus/utils-validation": "0.0.0-4501",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
     "copy-text-to-clipboard": "^3.0.1",
@@ -42,8 +42,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4492",
-    "@docusaurus/types": "0.0.0-4492",
+    "@docusaurus/module-type-aliases": "0.0.0-4501",
+    "@docusaurus/types": "0.0.0-4501",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/prismjs": "^1.16.2",
@@ -60,5 +60,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "415285c8972b89d17923fe23bed2eedab3daa393"
+  "gitHead": "53867e522d42d77e0668fe9ccda6fa674978f010"
 }

package/src/theme/BlogPostItem/index.tsx

@@ -135,7 +135,15 @@ function BlogPostItem(props: Props): JSX.Element {
               })}>
               <Link
                 to={metadata.permalink}
-                aria-label={`Read more about ${title}`}>
+                aria-label={translate(
+                  {
+                    message: 'Read more about {title}',
+                    id: 'theme.blog.post.readMoreLabel',
+                    description:
+                      'The ARIA label for the link to full blog posts from excerpts',
+                  },
+                  {title},
+                )}>
                 <b>
                   <Translate
                     id="theme.blog.post.readMore"

package/src/theme/DocCard/index.tsx

@@ -16,6 +16,7 @@ import {findFirstCategoryLink, useDocById} from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 import isInternalUrl from '@docusaurus/isInternalUrl';
+import {translate} from '@docusaurus/Translate';
 
 function CardContainer({
   href,
@@ -70,7 +71,15 @@ function CardCategory({item}: {item: PropSidebarItemCategory}): JSX.Element {
       href={href}
       icon="🗃️"
       title={item.label}
-      description={`${item.items.length} items`}
+      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},
+      )}
     />
   );
 }

package/src/theme/DocVersionBadge/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import Translate from '@docusaurus/Translate';
 import {ThemeClassNames, useDocsVersion} from '@docusaurus/theme-common';
 import clsx from 'clsx';
 import type {Props} from '@theme/DocVersionBadge';
@@ -22,7 +23,11 @@ export default function DocVersionBadge({
           ThemeClassNames.docs.docVersionBadge,
           'badge badge--secondary',
         )}>
-        Version: {versionMetadata.label}
+        <Translate
+          id="theme.docs.versionBadge.label"
+          values={{versionLabel: versionMetadata.label}}>
+          {'Version: {versionLabel}'}
+        </Translate>
       </span>
     );
   }

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

@@ -11,6 +11,7 @@ import IconLanguage from '@theme/IconLanguage';
 import type {Props} from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import {useAlternatePageUtils} from '@docusaurus/theme-common';
+import {translate} from '@docusaurus/Translate';
 import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem';
 
 import styles from './styles.module.css';
@@ -48,7 +49,13 @@ export default function LocaleDropdownNavbarItem({
   const items = [...dropdownItemsBefore, ...localeItems, ...dropdownItemsAfter];
 
   // Mobile is handled a bit differently
-  const dropdownLabel = mobile ? 'Languages' : getLocaleLabel(currentLocale);
+  const dropdownLabel = mobile
+    ? translate({
+        message: 'Languages',
+        id: 'theme.navbar.mobileLanguageDropdown.label',
+        description: 'The label for the mobile language switcher dropdown',
+      })
+    : getLocaleLabel(currentLocale);
 
   return (
     <DropdownNavbarItem

package/src/theme/Toggle/index.tsx

@@ -9,6 +9,7 @@ import React, {useState, useRef, memo} from 'react';
 import type {Props} from '@theme/Toggle';
 import {useThemeConfig, type ColorModeConfig} from '@docusaurus/theme-common';
 import useIsBrowser from '@docusaurus/useIsBrowser';
+import {translate} from '@docusaurus/Translate';
 
 import clsx from 'clsx';
 import styles from './styles.module.css';
@@ -61,7 +62,11 @@ const ToggleComponent = memo(
           checked={checked}
           type="checkbox"
           className={styles.toggleScreenReader}
-          aria-label="Switch between dark and light mode"
+          aria-label={translate({
+            message: 'Switch between dark and light mode',
+            id: 'theme.colorToggle.ariaLabel',
+            description: 'The ARIA label for the navbar color mode toggle',
+          })}
           onChange={onChange}
           onClick={() => setChecked(!checked)}
           onFocus={() => setFocused(true)}