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  ## After - The screen reader announces the search result information as `No results` on providing invalid input ## References - https://github.com/github/accessibility-audits/issues/9196
Mai TXN committed
Oct 21, 2024 at 09:27 UTC
708df10fa3889a5371a23d8c45d86f61fbf8ffb7
1 file changed
+7
-2
src/components/search.js
+7
-2
@@ -10,12 +10,17 @@ import {LightTheme} from '../theme'
10
import {LinkNoUnderline} from './link'
11
import * as getNav from '../util/get-nav'
12
import omit from '../util/omit'
13
+import {announce} from '../util/aria-live'
14
15
const SearchResults = ({results, getItemProps, highlightedIndex}) => {
16
const siteMetadata = useSiteMetadata()
16
-
17
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
+ )
24
}
25
26
return (