Add main and nav landmarks

Signed-off-by: Alex Taker <a.taker@gmail.com>

.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

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>
   );
 }

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>
   );
 };
 

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>