Added aria-labelledby for table of content (npm#259)

pavlov-kirill · web-flow · commit e1483ea93043 · 2022-11-03T09:57:14.000+04:00
* added aria-labelledby for table of content

* added roles
diff --git a/theme/src/components/layout.js b/theme/src/components/layout.js
@@ -108,10 +108,10 @@ function Layout({children, pageContext, location}) {
                 pl={1}
                 pb={1}
               >
-                <Text display="inline-block" fontWeight="bold" mb={1}>
+                <Text display="inline-block" fontWeight="bold" mb={1} id='table-of-content-label'>
                   Table of contents
                 </Text>
-                <TableOfContents items={pageContext.tableOfContents.items} />
+                <TableOfContents items={pageContext.tableOfContents.items} labelId='table-of-content-label'/>
               </Position>
             ) : null}
             <Box css={{gridArea: 'content'}}>
diff --git a/theme/src/components/table-of-contents.js b/theme/src/components/table-of-contents.js
@@ -1,11 +1,11 @@
 import {Box, Link} from '@primer/components'
 import React from 'react'
 
-function TableOfContents({items, depth}) {
+function TableOfContents({items, depth, labelId}) {
   return (
-    <Box key={items} as="ul" m={0} p={0} css={{listStyle: 'none', lineHeight: '1.4em'}}>
+    <Box key={items} as="ul" role='list' m={0} p={0} css={{listStyle: 'none', lineHeight: '1.4em'}} aria-labelledby={labelId}>
       {items.map(item => (
-        <Box as="li" key={item.url} pl={depth > 0 ? 3 : 0}>
+        <Box as="li" role='listitem' key={item.url} pl={depth > 0 ? 3 : 0}>
           <Link key={item.title} display="inline-block" py={1} href={item.url} color="gray.6">
             {item.title}
           </Link>
