Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jun 15, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/ar.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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": "احدث اصدار",
Expand Down
2 changes: 2 additions & 0 deletions packages/docusaurus-theme-classic/codeTranslations/base.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,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",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/da.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/fa.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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": "آخرین نسخه",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/he.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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": "גרסא אחרונה",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/hi.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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": "सबसे नया वर्जन",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/ja.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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": "最新バージョン",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/ko.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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": "최신 버전",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/pl.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/ru.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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": "последней версии",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/tr.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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",
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/codeTranslations/vi.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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": "最新版本",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,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": "最新版本",
Expand Down
7 changes: 3 additions & 4 deletions packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function DocPageContent({
}}>
<div className={styles.docPage}>
{sidebar && (
<div
<aside
className={clsx(styles.docSidebarContainer, {
[styles.docSidebarContainerHidden]: hiddenSidebarContainer,
})}
Expand All @@ -97,8 +97,7 @@ function DocPageContent({
if (hiddenSidebarContainer) {
setHiddenSidebar(true);
}
}}
role="complementary">
}}>
<DocSidebar
key={
// Reset sidebar state on sidebar changes
Expand Down Expand Up @@ -136,7 +135,7 @@ function DocPageContent({
<IconArrow className={styles.expandSidebarButtonIcon} />
</div>
)}
</div>
</aside>
)}
<main
className={clsx(styles.docMainContainer, {
Expand Down
12 changes: 9 additions & 3 deletions packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -333,7 +333,7 @@ function DocSidebar({
[styles.sidebarHidden]: isHidden,
})}>
{hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
<div
<nav
className={clsx(
'menu',
'menu--responsive',
Expand All @@ -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}
Expand All @@ -357,7 +363,7 @@ function DocSidebar({
activePath={path}
/>
</ul>
</div>
</nav>
{hideableSidebar && <HideableSidebarButton onClick={onCollapse} />}
</div>
);
Expand Down