feat(a11y/combosearch): announce results to screen readers
From http://haltersweb.github.io/Accessibility/autocomplete.html Closes #8643
This commit is contained in:
parent
6dd7e867d2
commit
07579c9a58
1 changed files with 24 additions and 0 deletions
|
@ -1,5 +1,6 @@
|
|||
import React, {
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
useId,
|
||||
ChangeEventHandler
|
||||
|
@ -132,10 +133,30 @@ function ComboSearch<Result>({
|
|||
}
|
||||
};
|
||||
|
||||
const [announceLive, setAnnounceLive] = useState('');
|
||||
|
||||
const a11yInstructions =
|
||||
'utilisez les flèches haut et bas pour naviguer et la touche Entrée pour choisir.\
|
||||
Sur un appareil tactile, explorez par toucher ou avec des gestes.';
|
||||
|
||||
const announceTimeout = useRef<ReturnType<typeof setTimeout>>();
|
||||
|
||||
useEffect(() => {
|
||||
if (isSuccess && results.length > 0) {
|
||||
setAnnounceLive(
|
||||
`${results.length} résultats disponibles, ${a11yInstructions}`
|
||||
);
|
||||
|
||||
announceTimeout.current = setTimeout(() => {
|
||||
setAnnounceLive('');
|
||||
}, 4000);
|
||||
} else {
|
||||
setAnnounceLive('Aucun résultat trouvé.');
|
||||
}
|
||||
|
||||
return () => clearTimeout(announceTimeout.current);
|
||||
}, [results.length, isSuccess]);
|
||||
|
||||
const initInstrId = useId();
|
||||
|
||||
return (
|
||||
|
@ -173,6 +194,9 @@ function ComboSearch<Result>({
|
|||
{a11yInstructions}
|
||||
</span>
|
||||
)}
|
||||
<div aria-live="assertive" className="sr-only">
|
||||
{announceLive}
|
||||
</div>
|
||||
</Combobox>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue