From ac19f82936a9a9b08c747a6f9d20b9df0990c710 Mon Sep 17 00:00:00 2001
From: Alex Taker <a.taker@gmail.com>
Date: Thu, 28 Apr 2022 10:59:22 -0400
Subject: [PATCH] Add main and nav landmarks

Signed-off-by: Alex Taker <a.taker@gmail.com>
---
 .changeset/afraid-insects-do.md                              | 5 +++++
 packages/core-components/src/layout/Page/Page.tsx            | 2 +-
 packages/core-components/src/layout/Sidebar/Bar.tsx          | 4 ++--
 .../core-components/src/layout/Sidebar/MobileSidebar.tsx     | 3 ++-
 4 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/afraid-insects-do.md

diff --git a/.changeset/afraid-insects-do.md b/.changeset/afraid-insects-do.md
new file mode 100644
index 0000000000..dd3a02d063
--- /dev/null
+++ b/.changeset/afraid-insects-do.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added ARIA landmark <main> to Page component and added ARIA landmark <nav> to DesktopSidebar and Sidebar components
diff --git a/packages/core-components/src/layout/Page/Page.tsx b/packages/core-components/src/layout/Page/Page.tsx
index 0b35a59d8f..9bfc16fea3 100644
--- a/packages/core-components/src/layout/Page/Page.tsx
+++ b/packages/core-components/src/layout/Page/Page.tsx
@@ -52,7 +52,7 @@ export function Page(props: Props) {
         page: baseTheme.getPageTheme({ themeId }),
       })}
     >
-      <div className={classes.root}>{children}</div>
+      <main className={classes.root}>{children}</main>
     </ThemeProvider>
   );
 }
diff --git a/packages/core-components/src/layout/Sidebar/Bar.tsx b/packages/core-components/src/layout/Sidebar/Bar.tsx
index 7a0b3f5b76..ea3200176d 100644
--- a/packages/core-components/src/layout/Sidebar/Bar.tsx
+++ b/packages/core-components/src/layout/Sidebar/Bar.tsx
@@ -189,7 +189,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => {
   };
 
   return (
-    <div style={{}}>
+    <nav style={{}}>
       <A11ySkipSidebar />
       <SidebarContext.Provider value={{ isOpen, setOpen }}>
         <div
@@ -209,7 +209,7 @@ const DesktopSidebar = (props: DesktopSidebarProps) => {
           </div>
         </div>
       </SidebarContext.Provider>
-    </div>
+    </nav>
   );
 };
 
diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx
index aefc58bc45..111bf38314 100644
--- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx
+++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx
@@ -140,7 +140,7 @@ const OverlayMenu = ({
           <CloseIcon />
         </IconButton>
       </Box>
-      <Box>{children}</Box>
+      <Box component="nav">{children}</Box>
     </Drawer>
   );
 };
@@ -226,6 +226,7 @@ export const MobileSidebar = (props: MobileSidebarProps) => {
         <BottomNavigation
           className={classes.root}
           data-testid="mobile-sidebar-root"
+          component="nav"
         >
           {sidebarGroups}
         </BottomNavigation>