A11Y: the announcements are spammed when using NVDA (Screen reader)

[samld]

Problem

On firefox, whenever I click on an item, drag it over another, or do any action for which there are announcements, those announcements get repeated multiple times. I tested it with chrome and it seems to be fine.

Environment

Windows 10 NVDA Firefox 100.0.2 DND Kit/React versions:

{
    "@dnd-kit/accessibility": "^3.0.0",
    "@dnd-kit/core": "^5.0.3",
    "@dnd-kit/sortable": "^6.0.1",
    "@dnd-kit/utilities": "^3.1.0",
    "react": "17.0.2",
}

I will try to provide a sandbox later if you need one. But any example with announcements running in the same environment should cause the issue, because I ran into similar issues when using aria-live regions for a timer on the application I'm working on. It might be shown for too long or something like that.

Unrelated A11Y note

It might be worthwhile to add in your documentation that the keyboard drag and drop won't work with JAWS or NVDA unless you specify that the role of the a container is application, due to how the screen readers behave in application mode vs. browser mode. Using <ul role="application">...</ul> solved the issue for me.

[clauderic]

Hey @samld, thanks for the detailed report. This seems like an issue with NVDA, though I'd happily accept a PR that solves this issue. I saw a few github tickets for React related issues with NVDA; perhaps manually updating the contents of the aria-live region in a useEffect when the value changes could solve this issue?

[samld]

@clauderic Thanks! I'll try your suggestion and keep you posted.