feat(a11y/combosearch): announce results to screen readers

From http://haltersweb.github.io/Accessibility/autocomplete.html

Closes #8643
This commit is contained in:
Colin Darie 2023-02-22 11:48:50 +01:00
parent 6dd7e867d2
commit 07579c9a58
No known key found for this signature in database
GPG key ID: 4FB865FDBCA4BCC4

View file

@ -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>
);
}