diff --git a/.changeset/stale-owls-search.md b/.changeset/stale-owls-search.md new file mode 100644 index 000000000..864ec7c3a --- /dev/null +++ b/.changeset/stale-owls-search.md @@ -0,0 +1,5 @@ +--- +"@dnd-kit/accessibility": patch +--- + +Fix screen reader announcements so repeated messages are announced consistently. diff --git a/packages/accessibility/src/hooks/useAnnouncement.ts b/packages/accessibility/src/hooks/useAnnouncement.ts index e1db96ea5..9cab98b4a 100644 --- a/packages/accessibility/src/hooks/useAnnouncement.ts +++ b/packages/accessibility/src/hooks/useAnnouncement.ts @@ -4,7 +4,13 @@ export function useAnnouncement() { const [announcement, setAnnouncement] = useState(''); const announce = useCallback((value: string | undefined) => { if (value != null) { - setAnnouncement(value); + // Clear the announcement first to ensure screen readers detect the change + // even when the same text is announced consecutively + setAnnouncement(''); + // Use requestAnimationFrame to ensure the clear renders before setting new value + requestAnimationFrame(() => { + setAnnouncement(value); + }); } }, []);