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>

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

packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/styles.module.css

@@ -10,8 +10,10 @@
   margin-bottom: 0.8rem;
 }
 
-.icon {
+.breadcrumbHomeIcon {
-  vertical-align: middle;
+  position: relative;
+  top: 1px;
+  vertical-align: top;
   height: 1.1rem;
   width: 1.1rem;
 }

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": "السابق",

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",

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": "পূর্ববর্তী",

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í",

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",

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",

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",

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": "قبلی",

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",

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",

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": "הקודם",

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": "पिछ्ला",

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",

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": "前へ",

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": "이전",

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",

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",

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",

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": "Предыдущая страница",

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": "Назад",

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",

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",

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": "上一页",

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": "上一頁",