[Fix Accessibility]: Enhance accessibility by adding ARIA attributes to table of content (#1730)

### File Change - `src/components/search-results.js`
- Enhanced search result items with descriptive ARIA labels including
position and hierarchy information

### BEFORE
<img width="471" height="188" alt="image"
src="https://github.com/user-attachments/assets/fa5c53fe-7370-4e63-a13b-0cd0cf037f25"
/>

### AFTER
<img width="453" height="220" alt="image"
src="https://github.com/user-attachments/assets/cae92e63-ed31-4d1c-95c1-426c391874d4"
/>

### File Change - `src/components/table-of-contents-items.js`
- Added ARIA labels to table of contents navigation items and
restructured nested navigation with proper SubNav components

### BEFORE
<img width="246" height="286" alt="image"
src="https://github.com/user-attachments/assets/b02b7341-1dac-414e-927a-264161dfec31"
/>
<img width="393" height="111" alt="image"
src="https://github.com/user-attachments/assets/9b11a6fe-98d4-4390-9960-27c52543ca2f"
/>

### AFTER
<img width="246" height="286" alt="image"
src="https://github.com/user-attachments/assets/397d9b2b-92e5-4429-a1eb-19caf4f5562c"
/>
<img width="246" height="286" alt="image"
src="https://github.com/user-attachments/assets/a769f9ee-42dd-45eb-b912-46688e0091da"
/>
<img width="414" height="114" alt="image"
src="https://github.com/user-attachments/assets/8b06aa24-6700-4e94-af9a-5553ede122e9"
/>


### Summary
This PR improves accessibility for screen readers by adding descriptive
ARIA attributes to search results and table of contents navigation,
ensuring users can understand item context and position within the
navigation structure.

Author: jpg619

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>
     ))}
   </>