refactor(v2): improve semantic doc sidebar markup (#4940)

* refactor(v2): improve semantic doc sidebar markup * Fixes
facebook · Jun 15, 2021 · c8b9061 · c8b9061
1 parent e2acda6
commit c8b9061
Show file tree

Hide file tree

Showing 22 changed files with 33 additions and 7 deletions.
diff --git a/packages/docusaurus-theme-classic/codeTranslations/ar.json b/packages/docusaurus-theme-classic/codeTranslations/ar.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "طي الشريط الجانبي",
   "theme.docs.sidebar.expandButtonAriaLabel": "توسيع الشريط الجانبي",
   "theme.docs.sidebar.expandButtonTitle": "توسيع الشريط الجانبي",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "إغلاق القائمة",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "فتح القائمة",
   "theme.docs.versions.latestVersionLinkLabel": "احدث اصدار",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/base.json b/packages/docusaurus-theme-classic/codeTranslations/base.json
@@ -83,6 +83,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": "Sidebar navigation",
+  "theme.docs.sidebar.navAriaLabel___DESCRIPTION": "The ARIA label for documentation menu",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Close menu",
   "theme.docs.sidebar.responsiveCloseButtonLabel___DESCRIPTION": "The ARIA label for close button of mobile doc sidebar",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Open menu",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/da.json b/packages/docusaurus-theme-classic/codeTranslations/da.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Sammenlæg sidenavigation",
   "theme.docs.sidebar.expandButtonAriaLabel": "Udvid sidenavigation",
   "theme.docs.sidebar.expandButtonTitle": "Udvid sidenavigation",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Luk menu",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Åben menu",
   "theme.docs.versions.latestVersionLinkLabel": "seneste version",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/de.json b/packages/docusaurus-theme-classic/codeTranslations/de.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Seitenleiste einklappen",
   "theme.docs.sidebar.expandButtonAriaLabel": "Seitenleiste ausklappen",
   "theme.docs.sidebar.expandButtonTitle": "Seitenleiste ausklappen",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Menü schließen",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Menü öffenen",
   "theme.docs.versions.latestVersionLinkLabel": "letzte Version",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/es.json b/packages/docusaurus-theme-classic/codeTranslations/es.json
@@ -41,6 +41,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": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Cerrar menu",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Abrir menu",
   "theme.docs.versions.latestVersionLinkLabel": "última versión",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/fa.json b/packages/docusaurus-theme-classic/codeTranslations/fa.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "بستن نوار کناری",
   "theme.docs.sidebar.expandButtonAriaLabel": "بزرگ کردن نوار کناری",
   "theme.docs.sidebar.expandButtonTitle": "بزرگ کردن نوار کناری",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "بستن منو",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "باز کردن منو",
   "theme.docs.versions.latestVersionLinkLabel": "آخرین نسخه",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/fil.json b/packages/docusaurus-theme-classic/codeTranslations/fil.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Itupî ang sidebar",
   "theme.docs.sidebar.expandButtonAriaLabel": "Palakihin ang sidebar",
   "theme.docs.sidebar.expandButtonTitle": "Palakihin ang sidebar",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Isara ang menu",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Buksan ang menu",
   "theme.docs.versions.latestVersionLinkLabel": "pinakahuling bersiyón",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/fr.json b/packages/docusaurus-theme-classic/codeTranslations/fr.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Réduire le menu latéral",
   "theme.docs.sidebar.expandButtonAriaLabel": "Déplier le menu latéral",
   "theme.docs.sidebar.expandButtonTitle": "Déplier le menu latéral",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Fermer le menu latéral",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Ouvrir le menu latéral",
   "theme.docs.versions.latestVersionLinkLabel": "dernière version",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/he.json b/packages/docusaurus-theme-classic/codeTranslations/he.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "סגור",
   "theme.docs.sidebar.expandButtonAriaLabel": "פתח",
   "theme.docs.sidebar.expandButtonTitle": "פתח",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "סגור תפריט",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "פתח תפריט",
   "theme.docs.versions.latestVersionLinkLabel": "גרסא אחרונה",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/hi.json b/packages/docusaurus-theme-classic/codeTranslations/hi.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "साइडबार बंद करें",
   "theme.docs.sidebar.expandButtonAriaLabel": "साइडबार खोलें",
   "theme.docs.sidebar.expandButtonTitle": "साइडबार खोलें",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "मेन्यू बंद करें",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "मेन्यू खोलें",
   "theme.docs.versions.latestVersionLinkLabel": "सबसे नया वर्जन",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/ja.json b/packages/docusaurus-theme-classic/codeTranslations/ja.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "サイドバーを隠す",
   "theme.docs.sidebar.expandButtonAriaLabel": "サイドバーを開く",
   "theme.docs.sidebar.expandButtonTitle": "サイドバーを開く",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "メニューを閉じる",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "メニューを開く",
   "theme.docs.versions.latestVersionLinkLabel": "最新バージョン",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/ko.json b/packages/docusaurus-theme-classic/codeTranslations/ko.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "사이드바 숨기기",
   "theme.docs.sidebar.expandButtonAriaLabel": "사이드바 열기",
   "theme.docs.sidebar.expandButtonTitle": "사이드바 열기",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "메뉴 닫기",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "메뉴 열기",
   "theme.docs.versions.latestVersionLinkLabel": "최신 버전",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/pl.json b/packages/docusaurus-theme-classic/codeTranslations/pl.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Zwiń boczny panel",
   "theme.docs.sidebar.expandButtonAriaLabel": "Rozszerz boczny panel",
   "theme.docs.sidebar.expandButtonTitle": "Rozszerz boczny panel",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Zamknij menu",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Otwórz menu",
   "theme.docs.versions.latestVersionLinkLabel": "bieżącej wersji",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/pt-BR.json b/packages/docusaurus-theme-classic/codeTranslations/pt-BR.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Fechar sidebar",
   "theme.docs.sidebar.expandButtonAriaLabel": "Expandir sidebar",
   "theme.docs.sidebar.expandButtonTitle": "Expandir sidebar",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Fechar menu",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Abrir menu",
   "theme.docs.versions.latestVersionLinkLabel": "última versão",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/pt-PT.json b/packages/docusaurus-theme-classic/codeTranslations/pt-PT.json
@@ -41,6 +41,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": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Fechar menu",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Abrir menu",
   "theme.docs.versions.latestVersionLinkLabel": "última versão",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/ru.json b/packages/docusaurus-theme-classic/codeTranslations/ru.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Свернуть сайдбар",
   "theme.docs.sidebar.expandButtonAriaLabel": "Развернуть сайдбар",
   "theme.docs.sidebar.expandButtonTitle": "Развернуть сайдбар",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Закрыть меню",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Открыть меню",
   "theme.docs.versions.latestVersionLinkLabel": "последней версии",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/tr.json b/packages/docusaurus-theme-classic/codeTranslations/tr.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Kenar çubuğunu daralt",
   "theme.docs.sidebar.expandButtonAriaLabel": "Kenar çubuğunu genişlet",
   "theme.docs.sidebar.expandButtonTitle": "Kenar çubuğunu genişlet",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Menüyü kapat",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Menüyü aç",
   "theme.docs.versions.latestVersionLinkLabel": "en son sürüm",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/vi.json b/packages/docusaurus-theme-classic/codeTranslations/vi.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "Thu gọn thanh bên",
   "theme.docs.sidebar.expandButtonAriaLabel": "Mở rộng thanh bên",
   "theme.docs.sidebar.expandButtonTitle": "Mở rộng thanh bên",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "Đóng menu",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "Mở menu",
   "theme.docs.versions.latestVersionLinkLabel": "phiên bản mới nhất",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/zh-Hans.json b/packages/docusaurus-theme-classic/codeTranslations/zh-Hans.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "收起侧边栏",
   "theme.docs.sidebar.expandButtonAriaLabel": "展开侧边栏",
   "theme.docs.sidebar.expandButtonTitle": "展开侧边栏",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "关闭菜单",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "打开菜单",
   "theme.docs.versions.latestVersionLinkLabel": "最新版本",

diff --git a/packages/docusaurus-theme-classic/codeTranslations/zh-Hant.json b/packages/docusaurus-theme-classic/codeTranslations/zh-Hant.json
@@ -41,6 +41,7 @@
   "theme.docs.sidebar.collapseButtonTitle": "收起側邊欄",
   "theme.docs.sidebar.expandButtonAriaLabel": "展開側邊欄",
   "theme.docs.sidebar.expandButtonTitle": "展開側邊欄",
+  "theme.docs.sidebar.navAriaLabel": "Sidebar navigation",
   "theme.docs.sidebar.responsiveCloseButtonLabel": "關閉選單",
   "theme.docs.sidebar.responsiveOpenButtonLabel": "打開選單",
   "theme.docs.versions.latestVersionLinkLabel": "最新版本",

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
@@ -83,7 +83,7 @@ function DocPageContent({
       }}>
       <div className={styles.docPage}>
         {sidebar && (
-          <div
+          <aside
             className={clsx(styles.docSidebarContainer, {
               [styles.docSidebarContainerHidden]: hiddenSidebarContainer,
             })}
@@ -97,8 +97,7 @@ function DocPageContent({
               if (hiddenSidebarContainer) {
                 setHiddenSidebar(true);
               }
-            }}
-            role="complementary">
+            }}>
             <DocSidebar
               key={
                 // Reset sidebar state on sidebar changes
@@ -136,7 +135,7 @@ function DocPageContent({
                 <IconArrow className={styles.expandSidebarButtonIcon} />
               </div>
             )}
-          </div>
+          </aside>
         )}
         <main
           className={clsx(styles.docMainContainer, {

diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
@@ -333,7 +333,7 @@ function DocSidebar({
         [styles.sidebarHidden]: isHidden,
       })}>
       {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
-      <div
+      <nav
         className={clsx(
           'menu',
           'menu--responsive',
@@ -344,11 +344,17 @@ function DocSidebar({
             [styles.menuWithAnnouncementBar]:
               !isAnnouncementBarClosed && showAnnouncementBar,
           },
-        )}>
+        )}
+        aria-label={translate({
+          id: 'theme.docs.sidebar.navAriaLabel',
+          message: 'Sidebar navigation',
+          description: 'The ARIA label for documentation menu',
+        })}>
         <ResponsiveSidebarButton
           responsiveSidebarOpened={showResponsiveSidebar}
           onClick={toggleResponsiveSidebar}
         />
+
         <ul className="menu__list">
           <DocSidebarItems
             items={sidebar}
@@ -357,7 +363,7 @@ function DocSidebar({
             activePath={path}
           />
         </ul>
-      </div>
+      </nav>
       {hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
     </div>
   );