Added role for sidebar-nav (npm#286)

pavlov-kirill · Shivangi Mittal · web-flow · commit 7f5d2cab8dc9 · 2022-11-11T11:36:53.000+05:30
* added role for sidebar-nav

* fix role for third level

Co-authored-by: Shivangi Mittal &lt;shmittal@Shivangis-MacBook-Pro.local&gt;
diff --git a/theme/src/components/nav-items.js b/theme/src/components/nav-items.js
@@ -105,6 +105,7 @@ function topLevelItems(items, path) {
               borderTopWidth={1}
               py={3}
               px={4}
+              role="listitem"
             >
               <Flex flexDirection="column">
                 <TopLevelLink to={item.url} key={item.title}>{item.title}</TopLevelLink>
@@ -123,11 +124,11 @@ function secondLevelItems(items, path) {
     }
 
     return (
-      <Flex flexDirection="column" mt={2}>
+      <Flex flexDirection="column" mt={2} role="list">
         {items.map((item) => {
           const children = NavHierarchy.isActiveUrl(path, item.url) ? NavHierarchy.getHierarchy(item, { path: path, hideVariants: true }) : null;
           return(
-            <Box key={item.title}>
+            <Box key={item.title} role="listitem">
               <SecondLevelLink key={item.url} to={item.url}>
                 {item.title}
                 {item.description != null ? (
@@ -150,11 +151,13 @@ function thirdLevelItems(items, path) {
     }
 
     return (
-      <Flex flexDirection="column" mt={2}>
+      <Flex flexDirection="column" mt={2} role="list">
         {items.map((item) => (
-          <ThirdLevelLink key={item.url} to={item.url}>
-            {item.title}
-          </ThirdLevelLink>
+          <Box key={item.title} role="listitem">
+            <ThirdLevelLink key={item.url} to={item.url}>
+              {item.title}
+            </ThirdLevelLink>
+          </Box>
         ))}
       </Flex>
     )
diff --git a/theme/src/components/sidebar.js b/theme/src/components/sidebar.js
@@ -22,7 +22,7 @@ function Sidebar({location, editOnGitHub}) {
         height="100%"
         style={{overflow: 'auto'}}
       >
-        <Flex flexDirection="column">
+        <Flex flexDirection="column" role="list">
           <NavItems location={location} items={navItems} editOnGitHub={editOnGitHub} />
         </Flex>
       </BorderBox>

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ function Sidebar({location, editOnGitHub}) {`
`22`	`22`	`height="100%"`
`23`	`23`	`style={{overflow: 'auto'}}`
`24`	`24`	`>`
`25`		`- <Flex flexDirection="column">`
	`25`	`+ <Flex flexDirection="column" role="list">`
`26`	`26`	`<NavItems location={location} items={navItems} editOnGitHub={editOnGitHub} />`
`27`	`27`	`</Flex>`
`28`	`28`	`</BorderBox>`