Skip to content

Commit

Permalink
Accessibility#9196 (#1319)
Browse files Browse the repository at this point in the history
## What/Why

- Screen reader does not announce the search result information as `No
results` on providing invalid input

## Changes

-
[`src/components/search.js`](https://github.com/npm/documentation/pull/1319/files#diff-995f95946b0cbf613b5cf5d8d6335cb1612dcb31907922cd5da28be90a6ff442)

> Add `aria-live` as `polite` to Box element

> Add `announce` function to trigger screen reader announcing the `No
results` message when there is no search result

## Before

![image](https://github.com/user-attachments/assets/5067f434-b86b-4383-899f-fe88b808abac)

## After

- The screen reader announces the search result information as `No
results` on providing invalid input

## References

- github/accessibility-audits#9196
  • Loading branch information
maitxn authored Oct 21, 2024
1 parent a83654f commit 708df10
Showing 1 changed file with 7 additions and 2 deletions.
9 changes: 7 additions & 2 deletions src/components/search.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,17 @@ import {LightTheme} from '../theme'
import {LinkNoUnderline} from './link'
import * as getNav from '../util/get-nav'
import omit from '../util/omit'
import {announce} from '../util/aria-live'

const SearchResults = ({results, getItemProps, highlightedIndex}) => {
const siteMetadata = useSiteMetadata()

if (!results || results.length === 0) {
return <Box sx={{fontSize: 2, px: 3, py: 3}}>No results</Box>
announce('No results')
return (
<Box sx={{fontSize: 2, px: 3, py: 3}} aria-live="polite">
No results
</Box>
)
}

return (
Expand Down

0 comments on commit 708df10

Please sign in to comment.