Added aria-labelledby for table of content (#259)
* added aria-labelledby for table of content * added roles
pavlov-kirill committed
Nov 3, 2022 at 09:57 UTC
e1483ea93043f22f3aa93cacb308b11e649a158e
2 files changed
+5
-5
theme/src/components/layout.js
+2
-2
@@ -108,10 +108,10 @@ function Layout({children, pageContext, location}) {
108
pl={1}
109
pb={1}
110
>
111
- <Text display="inline-block" fontWeight="bold" mb={1}>
111
+ <Text display="inline-block" fontWeight="bold" mb={1} id='table-of-content-label'>
112
Table of contents
113
</Text>
114
- <TableOfContents items={pageContext.tableOfContents.items} />
114
+ <TableOfContents items={pageContext.tableOfContents.items} labelId='table-of-content-label'/>
115
</Position>
116
) : null}
117
<Box css={{gridArea: 'content'}}>
theme/src/components/table-of-contents.js
+3
-3
@@ -1,11 +1,11 @@
1
import {Box, Link} from '@primer/components'
2
import React from 'react'
3
4
-function TableOfContents({items, depth}) {
4
+function TableOfContents({items, depth, labelId}) {
5
return (
6
- <Box key={items} as="ul" m={0} p={0} css={{listStyle: 'none', lineHeight: '1.4em'}}>
6
+ <Box key={items} as="ul" role='list' m={0} p={0} css={{listStyle: 'none', lineHeight: '1.4em'}} aria-labelledby={labelId}>
7
{items.map(item => (
8
- <Box as="li" key={item.url} pl={depth > 0 ? 3 : 0}>
8
+ <Box as="li" role='listitem' key={item.url} pl={depth > 0 ? 3 : 0}>
9
<Link key={item.title} display="inline-block" py={1} href={item.url} color="gray.6">
10
{item.title}
11
</Link>