Added role for sidebar-nav (#286)
* added role for sidebar-nav * fix role for third level Co-authored-by: Shivangi Mittal <shmittal@Shivangis-MacBook-Pro.local>
pavlov-kirill committed
Nov 11, 2022 at 10:06 UTC
7f5d2cab8dc938e89dcf4db8b389a5b1c66d9d54
2 files changed
+10
-7
theme/src/components/nav-items.js
+9
-6
@@ -105,6 +105,7 @@ function topLevelItems(items, path) {
105
borderTopWidth={1}
106
py={3}
107
px={4}
108
+ role="listitem"
109
>
110
<Flex flexDirection="column">
111
<TopLevelLink to={item.url} key={item.title}>{item.title}</TopLevelLink>
@@ -123,11 +124,11 @@ function secondLevelItems(items, path) {
124
}
125
126
return (
126
- <Flex flexDirection="column" mt={2}>
127
+ <Flex flexDirection="column" mt={2} role="list">
128
{items.map((item) => {
129
const children = NavHierarchy.isActiveUrl(path, item.url) ? NavHierarchy.getHierarchy(item, { path: path, hideVariants: true }) : null;
130
return(
130
- <Box key={item.title}>
131
+ <Box key={item.title} role="listitem">
132
<SecondLevelLink key={item.url} to={item.url}>
133
{item.title}
134
{item.description != null ? (
@@ -150,11 +151,13 @@ function thirdLevelItems(items, path) {
151
}
152
153
return (
153
- <Flex flexDirection="column" mt={2}>
154
+ <Flex flexDirection="column" mt={2} role="list">
155
{items.map((item) => (
155
- <ThirdLevelLink key={item.url} to={item.url}>
156
- {item.title}
157
- </ThirdLevelLink>
156
+ <Box key={item.title} role="listitem">
157
+ <ThirdLevelLink key={item.url} to={item.url}>
158
+ {item.title}
159
+ </ThirdLevelLink>
160
+ </Box>
161
))}
162
</Flex>
163
)
theme/src/components/sidebar.js
+1
-1
@@ -22,7 +22,7 @@ function Sidebar({location, editOnGitHub}) {
22
height="100%"
23
style={{overflow: 'auto'}}
24
>
25
- <Flex flexDirection="column">
25
+ <Flex flexDirection="column" role="list">
26
<NavItems location={location} items={navItems} editOnGitHub={editOnGitHub} />
27
</Flex>
28
</BorderBox>