Skip to content

Commit 708df10

Browse files
authored
Accessibility#9196 (#1319)
## 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
1 parent a83654f commit 708df10

File tree

1 file changed

+7
-2
lines changed

1 file changed

+7
-2
lines changed

src/components/search.js

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,17 @@ import {LightTheme} from '../theme'
1010
import {LinkNoUnderline} from './link'
1111
import * as getNav from '../util/get-nav'
1212
import omit from '../util/omit'
13+
import {announce} from '../util/aria-live'
1314

1415
const SearchResults = ({results, getItemProps, highlightedIndex}) => {
1516
const siteMetadata = useSiteMetadata()
16-
1717
if (!results || results.length === 0) {
18-
return <Box sx={{fontSize: 2, px: 3, py: 3}}>No results</Box>
18+
announce('No results')
19+
return (
20+
<Box sx={{fontSize: 2, px: 3, py: 3}} aria-live="polite">
21+
No results
22+
</Box>
23+
)
1924
}
2025

2126
return (

0 commit comments

Comments
 (0)