fix(theme): add missing aria-labels to the main and sidebar navs (#8366)

Fix #8308

Author: r-lawrence

packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/Content/index.tsx

@@ -12,6 +12,7 @@ import {
   useAnnouncementBar,
   useScrollPosition,
 } from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import DocSidebarItems from '@theme/DocSidebarItems';
 import type {Props} from '@theme/DocSidebar/Desktop/Content';
 
@@ -41,6 +42,11 @@ export default function DocSidebarDesktopContent({
 
   return (
     <nav
+      aria-label={translate({
+        id: 'theme.docs.sidebar.navAriaLabel',
+        message: 'Docs sidebar',
+        description: 'The ARIA label for the sidebar navigation',
+      })}
       className={clsx(
         'menu thin-scrollbar',
         styles.menu,

packages/docusaurus-theme-classic/src/theme/Navbar/Layout/index.tsx

@@ -12,6 +12,7 @@ import {
   useHideableNavbar,
   useNavbarMobileSidebar,
 } from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
 import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
 import type {Props} from '@theme/Navbar/Layout';
 
@@ -36,6 +37,11 @@ export default function NavbarLayout({children}: Props): JSX.Element {
   return (
     <nav
       ref={navbarRef}
+      aria-label={translate({
+        id: 'theme.NavBar.navAriaLabel',
+        message: 'Main',
+        description: 'The ARIA label for the main navigation',
+      })}
       className={clsx(
         'navbar',
         'navbar--fixed-top',

packages/docusaurus-theme-translations/locales/ar/theme-common.json

@@ -8,6 +8,7 @@
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "تبديل فئة الشريط الجاني القابل للاغلاق '{label}'",
   "theme.ErrorPageContent.title": "هذه الصفحة لا تستجيب.",
   "theme.ErrorPageContent.tryAgain": "المحاولة مجددا",
+  "theme.NavBar.navAriaLabel": "Main",
   "theme.NotFound.p1": "لم نتمكن من العثور على ما كنت تبحث عنه.",
   "theme.NotFound.p2": "يرجى الاتصال بمالك الموقع الذي ربطك بعنوان URL الأصلي وإخباره بأن الارتباط الخاص به معطل.",
   "theme.NotFound.title": "الصفحة غير موجودة",
@@ -48,6 +49,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "طي الشريط الجانبي",
   "theme.docs.sidebar.expandButtonAriaLabel": "توسيع الشريط الجانبي",
   "theme.docs.sidebar.expandButtonTitle": "توسيع الشريط الجانبي",
+  "theme.docs.sidebar.navAriaLabel": "Docs sidebar",
   "theme.docs.sidebar.toggleSidebarButtonAriaLabel": "Toggle navigation bar",
   "theme.docs.tagDocListPageTitle": "{nDocsTagged} مستند موسوم بـ \"{tagName}\"",
   "theme.docs.tagDocListPageTitle.nDocsTagged": "مستند موسوم واحد|{count} مستندات موسومة",

packages/docusaurus-theme-translations/locales/base/theme-common.json

@@ -17,6 +17,8 @@
   "theme.ErrorPageContent.title___DESCRIPTION": "The title of the fallback page when the page crashed",
   "theme.ErrorPageContent.tryAgain": "Try again",
   "theme.ErrorPageContent.tryAgain___DESCRIPTION": "The label of the button to try again rendering when the React error boundary captures an error",
+  "theme.NavBar.navAriaLabel": "Main",
+  "theme.NavBar.navAriaLabel___DESCRIPTION": "The ARIA label for the main navigation",
   "theme.NotFound.p1": "We could not find what you were looking for.",
   "theme.NotFound.p1___DESCRIPTION": "The first paragraph of the 404 page",
   "theme.NotFound.p2": "Please contact the owner of the site that linked you to the original URL and let them know their link is broken.",
@@ -97,6 +99,8 @@
   "theme.docs.sidebar.expandButtonAriaLabel___DESCRIPTION": "The ARIA label and title attribute for expand button of doc sidebar",
   "theme.docs.sidebar.expandButtonTitle": "Expand sidebar",
   "theme.docs.sidebar.expandButtonTitle___DESCRIPTION": "The ARIA label and title attribute for expand button of doc sidebar",
+  "theme.docs.sidebar.navAriaLabel": "Docs sidebar",
+  "theme.docs.sidebar.navAriaLabel___DESCRIPTION": "The ARIA label for the sidebar navigation",
   "theme.docs.sidebar.toggleSidebarButtonAriaLabel": "Toggle navigation bar",
   "theme.docs.sidebar.toggleSidebarButtonAriaLabel___DESCRIPTION": "The ARIA label for hamburger menu button of mobile navigation",
   "theme.docs.tagDocListPageTitle": "{nDocsTagged} with \"{tagName}\"",

packages/docusaurus-theme-translations/locales/bn/theme-common.json

@@ -8,6 +8,7 @@
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
+  "theme.NavBar.navAriaLabel": "Main",
   "theme.NotFound.p1": "আপনি যা খুঁজছিলেন তা আমরা খুঁজে পাইনি।",
   "theme.NotFound.p2": "দয়া করে সাইটের মালিকের সাথে যোগাযোগ করুন যা আপনাকে মূল URL এর সাথে যুক্ত করেছে এবং তাদের লিঙ্কটি ভাঙ্গা রয়েছে তা তাদের জানান।",
   "theme.NotFound.title": "পেজটি খুঁজে পাওয়া যায়নি",
@@ -48,6 +49,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "সাইডবারটি সঙ্কুচিত করুন",
   "theme.docs.sidebar.expandButtonAriaLabel": "সাইডবারটি প্রসারিত করুন",
   "theme.docs.sidebar.expandButtonTitle": "সাইডবারটি প্রসারিত করুন",
+  "theme.docs.sidebar.navAriaLabel": "Docs sidebar",
   "theme.docs.sidebar.toggleSidebarButtonAriaLabel": "Toggle navigation bar",
   "theme.docs.tagDocListPageTitle": "{nDocsTagged} with \"{tagName}\"",
   "theme.docs.tagDocListPageTitle.nDocsTagged": "One doc tagged|{count} docs tagged",

packages/docusaurus-theme-translations/locales/cs/theme-common.json

@@ -8,6 +8,7 @@
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
+  "theme.NavBar.navAriaLabel": "Main",
   "theme.NotFound.p1": "Nepodařilo se nám najít co jste hledal(a).",
   "theme.NotFound.p2": "Kontaktujte prosím vlastníka webu, který vás odkázal na původní URL a upozorněte ho, že jejich odkaz nefunguje.",
   "theme.NotFound.title": "Stránka nenalezena",
@@ -48,6 +49,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Zavřít postranní lištu",
   "theme.docs.sidebar.expandButtonAriaLabel": "Otevřít postranní lištu",
   "theme.docs.sidebar.expandButtonTitle": "Otevřít postranní lištu",
+  "theme.docs.sidebar.navAriaLabel": "Docs sidebar",
   "theme.docs.sidebar.toggleSidebarButtonAriaLabel": "Toggle navigation bar",
   "theme.docs.tagDocListPageTitle": "{nDocsTagged} with \"{tagName}\"",
   "theme.docs.tagDocListPageTitle.nDocsTagged": "One doc tagged|{count} docs tagged",

packages/docusaurus-theme-translations/locales/da/theme-common.json

@@ -8,6 +8,7 @@
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
+  "theme.NavBar.navAriaLabel": "Main",
   "theme.NotFound.p1": "Vi kunne ikke finde det, du søgte.",
   "theme.NotFound.p2": "Venligst kontakt ejeren til webstedet, som førte dig frem denne URL, og informer dem om at linket ikke virker.",
   "theme.NotFound.title": "Siden blev ikke fundet",
@@ -48,6 +49,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Sammenlæg sidenavigation",
   "theme.docs.sidebar.expandButtonAriaLabel": "Udvid sidenavigation",
   "theme.docs.sidebar.expandButtonTitle": "Udvid sidenavigation",
+  "theme.docs.sidebar.navAriaLabel": "Docs sidebar",
   "theme.docs.sidebar.toggleSidebarButtonAriaLabel": "Toggle navigation bar",
   "theme.docs.tagDocListPageTitle": "{nDocsTagged} with \"{tagName}\"",
   "theme.docs.tagDocListPageTitle.nDocsTagged": "One doc tagged|{count} docs tagged",

packages/docusaurus-theme-translations/locales/de/theme-common.json

@@ -8,6 +8,7 @@
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Umschalten der Seitenleiste mit einklappbarer Kategorie '{label}'",
   "theme.ErrorPageContent.title": "Die Seite ist abgestürzt.",
   "theme.ErrorPageContent.tryAgain": "Nochmal versuchen",
+  "theme.NavBar.navAriaLabel": "Main",
   "theme.NotFound.p1": "Wir konnten nicht finden, wonach Sie gesucht haben.",
   "theme.NotFound.p2": "Bitte kontaktieren Sie den Besitzer der Seite, die Sie mit der ursprünglichen URL verlinkt hat, und teilen Sie ihm mit, dass der Link nicht mehr funktioniert.",
   "theme.NotFound.title": "Seite nicht gefunden",
@@ -48,6 +49,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Seitenleiste einklappen",
   "theme.docs.sidebar.expandButtonAriaLabel": "Seitenleiste ausklappen",
   "theme.docs.sidebar.expandButtonTitle": "Seitenleiste ausklappen",
+  "theme.docs.sidebar.navAriaLabel": "Docs sidebar",
   "theme.docs.sidebar.toggleSidebarButtonAriaLabel": "Toggle navigation bar",
   "theme.docs.tagDocListPageTitle": "{nDocsTagged} mit \"{tagName}\"",
   "theme.docs.tagDocListPageTitle.nDocsTagged": "Ein doc getaggt|{count} docs getaggt",

packages/docusaurus-theme-translations/locales/es/theme-common.json

@@ -8,6 +8,7 @@
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "Toggle the collapsible sidebar category '{label}'",
   "theme.ErrorPageContent.title": "This page crashed.",
   "theme.ErrorPageContent.tryAgain": "Try again",
+  "theme.NavBar.navAriaLabel": "Main",
   "theme.NotFound.p1": "No pudimos encontrar lo que buscaba.",
   "theme.NotFound.p2": "Comuníquese con el dueño del sitio que lo vinculó a la URL original y hágale saber que su vínculo está roto.",
   "theme.NotFound.title": "Página No Encontrada",
@@ -48,6 +49,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Colapsar barra lateral",
   "theme.docs.sidebar.expandButtonAriaLabel": "Expandir barra lateral",
   "theme.docs.sidebar.expandButtonTitle": "Expandir barra lateral",
+  "theme.docs.sidebar.navAriaLabel": "Docs sidebar",
   "theme.docs.sidebar.toggleSidebarButtonAriaLabel": "Toggle navigation bar",
   "theme.docs.tagDocListPageTitle": "{nDocsTagged} con \"{tagName}\"",
   "theme.docs.tagDocListPageTitle.nDocsTagged": "Un documento etiquetado|{count} documentos etiquetados",

packages/docusaurus-theme-translations/locales/fa/theme-common.json

@@ -8,6 +8,7 @@
   "theme.DocSidebarItem.toggleCollapsedCategoryAriaLabel": "دسته‌بندی برچسب '{label}' در نوار کناری را تغییر دهید ",
   "theme.ErrorPageContent.title": "بارگذاری صفحه با خطا روبرو شد.",
   "theme.ErrorPageContent.tryAgain": "تلاش مجدد",
+  "theme.NavBar.navAriaLabel": "Main",
   "theme.NotFound.p1": "صفحه‌ای که دنبال آن بودید پیدا نشد.",
   "theme.NotFound.p2": "لطفا با صاحب وبسایت تماس بگیرید و ایشان را از مشکل پیش آمده مطلع کنید.",
   "theme.NotFound.title": "صفحه ای که دنبال آن بودید پیدا نشد.",
@@ -48,6 +49,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "بستن نوار کناری",
   "theme.docs.sidebar.expandButtonAriaLabel": "باز کردن نوار کناری",
   "theme.docs.sidebar.expandButtonTitle": "باز کردن نوار کناری",
+  "theme.docs.sidebar.navAriaLabel": "Docs sidebar",
   "theme.docs.sidebar.toggleSidebarButtonAriaLabel": "Toggle navigation bar",
   "theme.docs.tagDocListPageTitle": "{nDocsTagged} با \"{tagName}\"",
   "theme.docs.tagDocListPageTitle.nDocsTagged": "یک مطلب برچسب شده|{count} مطلب برچسب شده",