[Fix Accessibility]: Enhance accessibility by adding ARIA attributes to table of content

src/components/search.js

@@ -45,7 +45,10 @@ const SearchResults = ({results, getItemProps, highlightedIndex}) => {
             to={item.path}
             active={highlightedIndex === index}
           >
-            <Box sx={{display: 'flex', flexDirection: 'column', flex: '0 0 auto'}}>
+            <Box
+              sx={{display: 'flex', flexDirection: 'column', flex: '0 0 auto'}}
+              aria-label={`${item.title}${hierarchy.length ? ` in ${hierarchy.map(s => s.shortName || s.title).join(' / ')}` : ` in ${siteMetadata.shortName}`}, ${index + 1} of ${results.length}`}
+            >
               <Text sx={{fontSize: 0}}>
                 {hierarchy.length ? hierarchy.map(s => s.shortName || s.title).join(' / ') : siteMetadata.shortName}
               </Text>

src/components/table-of-contents.js

@@ -6,12 +6,20 @@ import usePage from '../hooks/use-page'
 
 const TableOfContentsItems = ({items, depth}) => (
   <>
-    {items.map(item => (
+    {items.map((item, index) => (
       <React.Fragment key={item.title}>
-        <NavList.Item href={item.url} sx={{pl: depth > 1 ? 4 : 2}}>
+        <NavList.Item
+          href={item.url}
+          aria-label={`${item.title}, ${index + 1} of ${items.length}`}
+          aria-labelledby={null}
+        >
           {item.title}
+          {item.items ? (
+            <NavList.SubNav>
+              <TableOfContentsItems items={item.items} depth={depth + 1} />
+            </NavList.SubNav>
+          ) : null}
         </NavList.Item>
-        {item.items ? <TableOfContentsItems items={item.items} depth={depth + 1} /> : null}
       </React.Fragment>
     ))}
   </>