@cryptotaxi247 / documentation / commits / 5129bf9

[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.

Jithin Prabhakaran Girija committed Oct 6, 2025 at 16:57 UTC 5129bf9c63b5d241dbc9e1f85c5e82c9542c2e1e

2 files changed +15 -4

src/components/search.js

+4 -1

@@ -45,7 +45,10 @@ const SearchResults = ({results, getItemProps, highlightedIndex}) => {

45 to={item.path}

46 active={highlightedIndex === index}

47 >

48 - <Box sx={{display: 'flex', flexDirection: 'column', flex: '0 0 auto'}}>

48 + <Box

49 + sx={{display: 'flex', flexDirection: 'column', flex: '0 0 auto'}}

50 + aria-label={`${item.title}${hierarchy.length ? ` in ${hierarchy.map(s => s.shortName || s.title).join(' / ')}` : ` in ${siteMetadata.shortName}`}, ${index + 1} of ${results.length}`}

51 + >

52 <Text sx={{fontSize: 0}}>

53 {hierarchy.length ? hierarchy.map(s => s.shortName || s.title).join(' / ') : siteMetadata.shortName}

54 </Text>

src/components/table-of-contents.js

+11 -3

@@ -6,12 +6,20 @@ import usePage from '../hooks/use-page'

7 const TableOfContentsItems = ({items, depth}) => (

8 <>

9 - {items.map(item => (

9 + {items.map((item, index) => (

10 <React.Fragment key={item.title}>

11 - <NavList.Item href={item.url} sx={{pl: depth > 1 ? 4 : 2}}>

11 + <NavList.Item

12 + href={item.url}

13 + aria-label={`${item.title}, ${index + 1} of ${items.length}`}

14 + aria-labelledby={null}

15 + >

16 {item.title}

17 + {item.items ? (

18 + <NavList.SubNav>

19 + <TableOfContentsItems items={item.items} depth={depth + 1} />

20 + </NavList.SubNav>

21 + ) : null}

22 </NavList.Item>

14 - {item.items ? <TableOfContentsItems items={item.items} depth={depth + 1} /> : null}

23 </React.Fragment>

24 ))}

25 </>