refactor: minor improvements for breadcrumbs (#7299)

* refactor: minor improvements for breadcrumbs * Apply suggestions from code review * Update packages/docusaurus-theme-translations/locales/fr/theme-common.json Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
2025-04-29 10:17:55 +02:00 · 2022-05-04 17:54:47 +03:00 · 2022-05-04 17:54:47 +03:00 · 7944fdd9a2
commit 7944fdd9a2
parent b3feb01009
26 changed files with 66 additions and 4 deletions
--- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx
@ -15,6 +15,7 @@ import styles from './styles.module.css';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import {translate} from '@docusaurus/Translate';
 import IconHome from '@theme/IconHome';

 // TODO move to design system folder
@ -82,9 +83,14 @@ function HomeBreadcrumbItem() {
  return (
    <li className="breadcrumbs__item">
      <Link
+        aria-label={translate({
+          id: 'theme.docs.breadcrumbs.home',
+          message: 'Home page',
+          description: 'The ARIA label for the home page in the breadcrumbs',
+        })}
        className={clsx('breadcrumbs__link', styles.breadcrumbsItemLink)}
        href={homeHref}>
-        <IconHome className={styles.icon} />
+        <IconHome className={styles.breadcrumbHomeIcon} />
      </Link>
    </li>
  );
@ -104,7 +110,11 @@ export default function DocBreadcrumbs(): JSX.Element | null {
        ThemeClassNames.docs.docBreadcrumbs,
        styles.breadcrumbsContainer,
      )}
-      aria-label="breadcrumbs">
+      aria-label={translate({
+        id: 'theme.docs.breadcrumbs.navAriaLabel',
+        message: 'Breadcrumbs',
+        description: 'The ARIA label for the breadcrumbs',
+      })}>
      <ul
        className="breadcrumbs"
        itemScope
--- a/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css
@ -10,8 +10,10 @@
  margin-bottom: 0.8rem;
 }

-.icon {
-  vertical-align: middle;
+.breadcrumbHomeIcon {
+  position: relative;
+  top: 1px;
+  vertical-align: top;
  height: 1.1rem;
  width: 1.1rem;
 }
--- a/packages/docusaurus-theme-translations/locales/ar/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/ar/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "ارتباط مباشر بالعنوان",
  "theme.common.skipToMainContent": "انتقل إلى المحتوى الرئيسي",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "التنقل بين صفحات الددات",
  "theme.docs.paginator.next": "التالى",
  "theme.docs.paginator.previous": "السابق",
--- a/packages/docusaurus-theme-translations/locales/base/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/base/theme-common.json
@ -67,6 +67,10 @@
  "theme.common.skipToMainContent___DESCRIPTION": "The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",
  "theme.docs.DocCard.categoryDescription": "{count} items",
  "theme.docs.DocCard.categoryDescription___DESCRIPTION": "The default description for a category card in the generated index about how many items this category includes",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.home___DESCRIPTION": "The ARIA label for the home page in the breadcrumbs",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
+  "theme.docs.breadcrumbs.navAriaLabel___DESCRIPTION": "The ARIA label for the breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Docs pages navigation",
  "theme.docs.paginator.navAriaLabel___DESCRIPTION": "The ARIA label for the docs pagination",
  "theme.docs.paginator.next": "Next",
--- a/packages/docusaurus-theme-translations/locales/bn/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/bn/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "হেডিং এর সঙ্গে সরাসরি লিংকড",
  "theme.common.skipToMainContent": "স্কিপ করে মূল কন্টেন্ট এ যান",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "ডক্স পৃষ্টাগুলির নেভিগেশন",
  "theme.docs.paginator.next": "পরবর্তী",
  "theme.docs.paginator.previous": "পূর্ববর্তী",
--- a/packages/docusaurus-theme-translations/locales/cs/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/cs/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Přímý odkaz na nadpis",
  "theme.common.skipToMainContent": "Přeskočit na hlavní obsah",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Stránkování dokumentace",
  "theme.docs.paginator.next": "Další",
  "theme.docs.paginator.previous": "Předchozí",
--- a/packages/docusaurus-theme-translations/locales/da/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/da/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Direkte link til overskrift",
  "theme.common.skipToMainContent": "Hop til hovedindhold",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Dokumentside navigation",
  "theme.docs.paginator.next": "Næste",
  "theme.docs.paginator.previous": "Tidligere",
--- a/packages/docusaurus-theme-translations/locales/de/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/de/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Direkter Link zur Überschrift",
  "theme.common.skipToMainContent": "Zum Hauptinhalt springen",
  "theme.docs.DocCard.categoryDescription": "{count} Einträge",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Dokumentation Seiten Navigation",
  "theme.docs.paginator.next": "Weiter",
  "theme.docs.paginator.previous": "Zurück",
--- a/packages/docusaurus-theme-translations/locales/es/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/es/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Enlace directo al encabezado",
  "theme.common.skipToMainContent": "Saltar al contenido principal",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Navegación de páginas de documentos",
  "theme.docs.paginator.next": "Siguiente",
  "theme.docs.paginator.previous": "Anterior",
--- a/packages/docusaurus-theme-translations/locales/fa/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/fa/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "لینک مستقیم به عنوان",
  "theme.common.skipToMainContent": "پرش به مطلب اصلی",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "کنترل صفحات مطالب",
  "theme.docs.paginator.next": "بعدی",
  "theme.docs.paginator.previous": "قبلی",
--- a/packages/docusaurus-theme-translations/locales/fil/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/fil/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Direktang link patungo sa heading",
  "theme.common.skipToMainContent": "Lumaktaw patungo sa pangunahing content",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Nabegasyón para sa mga pahinang docs.",
  "theme.docs.paginator.next": "Sumunod",
  "theme.docs.paginator.previous": "Naraaan",
--- a/packages/docusaurus-theme-translations/locales/fr/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/fr/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Lien direct vers le titre",
  "theme.common.skipToMainContent": "Aller au contenu principal",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Page d'accueil",
+  "theme.docs.breadcrumbs.navAriaLabel": "Fil d'Ariane",
  "theme.docs.paginator.navAriaLabel": "Pagination des documents",
  "theme.docs.paginator.next": "Suivant",
  "theme.docs.paginator.previous": "Précédent",
--- a/packages/docusaurus-theme-translations/locales/he/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/he/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "קישור ישיר לכותרת",
  "theme.common.skipToMainContent": "דלג לתוכן הראשי",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "רשימת דוקומנטאציה",
  "theme.docs.paginator.next": "הבא",
  "theme.docs.paginator.previous": "הקודם",
--- a/packages/docusaurus-theme-translations/locales/hi/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/hi/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "शीर्षक का सीधा लिंक",
  "theme.common.skipToMainContent": "मुख्य कंटेंट तक स्किप करें",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "डॉक्स पेज नेविगेशन",
  "theme.docs.paginator.next": "अगला",
  "theme.docs.paginator.previous": "पिछ्ला",
--- a/packages/docusaurus-theme-translations/locales/it/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/it/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Link diretto all'intestazione",
  "theme.common.skipToMainContent": "Passa al contenuto principale",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Navigazione delle pagine dei documenti",
  "theme.docs.paginator.next": "Successivo",
  "theme.docs.paginator.previous": "Precedente",
--- a/packages/docusaurus-theme-translations/locales/ja/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/ja/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "見出しへの直接リンク",
  "theme.common.skipToMainContent": "メインコンテンツまでスキップ",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "ドキュメントのナビゲーション",
  "theme.docs.paginator.next": "次へ",
  "theme.docs.paginator.previous": "前へ",
--- a/packages/docusaurus-theme-translations/locales/ko/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/ko/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "제목으로 바로 가기",
  "theme.common.skipToMainContent": "본문으로 건너뛰기",
  "theme.docs.DocCard.categoryDescription": "{count} 항목",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "문서 탐색",
  "theme.docs.paginator.next": "다음",
  "theme.docs.paginator.previous": "이전",
--- a/packages/docusaurus-theme-translations/locales/pl/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/pl/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Bezpośredni link do nagłówka",
  "theme.common.skipToMainContent": "Przejdź do głównej zawartości",
  "theme.docs.DocCard.categoryDescription": "{count} elementów",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Nawigacja na stronie dokumentacji",
  "theme.docs.paginator.next": "Następna strona",
  "theme.docs.paginator.previous": "Poprzednia strona",
--- a/packages/docusaurus-theme-translations/locales/pt-BR/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/pt-BR/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Link direto para o título",
  "theme.common.skipToMainContent": "Pular para o conteúdo principal",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Navigação das páginas de documentação",
  "theme.docs.paginator.next": "Próxima",
  "theme.docs.paginator.previous": "Anterior",
--- a/packages/docusaurus-theme-translations/locales/pt-PT/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/pt-PT/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Link direto para o título",
  "theme.common.skipToMainContent": "Saltar para o conteúdo principal",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Navigação das páginas de documentação",
  "theme.docs.paginator.next": "Próxima",
  "theme.docs.paginator.previous": "Anterior",
--- a/packages/docusaurus-theme-translations/locales/ru/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/ru/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Прямая ссылка на этот заголовок",
  "theme.common.skipToMainContent": "Перейти к основному содержимому",
  "theme.docs.DocCard.categoryDescription": "{count} элемент|{count} элемента|{count} элементов",
+  "theme.docs.breadcrumbs.home": "Главная страница",
+  "theme.docs.breadcrumbs.navAriaLabel": "Навигационная цепочка текущей страницы",
  "theme.docs.paginator.navAriaLabel": "Навигация по странице документации",
  "theme.docs.paginator.next": "Следующая страница",
  "theme.docs.paginator.previous": "Предыдущая страница",
--- a/packages/docusaurus-theme-translations/locales/sr/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/sr/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Веза до наслова",
  "theme.common.skipToMainContent": "Пређи на главни садржај",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Навигација по документима",
  "theme.docs.paginator.next": "Даље",
  "theme.docs.paginator.previous": "Назад",
--- a/packages/docusaurus-theme-translations/locales/tr/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/tr/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Başlığa doğrudan bağlantı",
  "theme.common.skipToMainContent": "Ana içeriğe geç",
  "theme.docs.DocCard.categoryDescription": "{count} items",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Dokümanlar sayfası navigasyonu",
  "theme.docs.paginator.next": "Sonraki",
  "theme.docs.paginator.previous": "Önceki",
--- a/packages/docusaurus-theme-translations/locales/vi/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/vi/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "Đường dẫn trực tiếp tới đề mục này",
  "theme.common.skipToMainContent": "Nhảy tới nội dung",
  "theme.docs.DocCard.categoryDescription": "{count} mục",
+  "theme.docs.breadcrumbs.home": "Home page",
+  "theme.docs.breadcrumbs.navAriaLabel": "Breadcrumbs",
  "theme.docs.paginator.navAriaLabel": "Thanh điều hướng của trang tài liệu",
  "theme.docs.paginator.next": "Kế tiếp",
  "theme.docs.paginator.previous": "Trước",
--- a/packages/docusaurus-theme-translations/locales/zh-Hans/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/zh-Hans/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "标题的直接链接",
  "theme.common.skipToMainContent": "跳到主要内容",
  "theme.docs.DocCard.categoryDescription": "{count} 个项目",
+  "theme.docs.breadcrumbs.home": "主页面",
+  "theme.docs.breadcrumbs.navAriaLabel": "页面路径",
  "theme.docs.paginator.navAriaLabel": "文档分页导航",
  "theme.docs.paginator.next": "下一页",
  "theme.docs.paginator.previous": "上一页",
--- a/packages/docusaurus-theme-translations/locales/zh-Hant/theme-common.json
+++ b/packages/docusaurus-theme-translations/locales/zh-Hant/theme-common.json
@ -33,6 +33,8 @@
  "theme.common.headingLinkTitle": "標題的直接連結",
  "theme.common.skipToMainContent": "跳至主要内容",
  "theme.docs.DocCard.categoryDescription": "{count} 個項目",
+  "theme.docs.breadcrumbs.home": "主頁面",
+  "theme.docs.breadcrumbs.navAriaLabel": "頁面路徑",
  "theme.docs.paginator.navAriaLabel": "文件分頁導覽",
  "theme.docs.paginator.next": "下一頁",
  "theme.docs.paginator.previous": "上一頁",