Duplicate aria-describedby="-live-region" IDs for multiple drag-and-drop containers

[vBenTec]

Description:

After updating to v^0.2.4, we encountered an issue where the parent container for drag-and-drop elements is assigned aria-describedby="-live-region". A live region div is then inserted at the root of the document with the same ID (-live-region), causing duplicate IDs when multiple drag-and-drop containers are present on the same page.

It appears that all instances are sharing the same div, as the first occurrence in the DOM is being used for announcements while dragging. However, the repeated use of the same ID could lead to conflicts.

<div aria-live="polite" aria-atomic="true" data-drag-and-drop-live-region="true" id="-live-region" style="position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"></div>
<div aria-live="polite" aria-atomic="true" data-drag-and-drop-live-region="true" id="-live-region" style="position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px;"></div>

Suggested Improvement:

Implement a guard that checks if the live region div has already been appended to the document. This would prevent additional drag-and-drop containers from attempting to insert a duplicate live region, while ensuring that all instances share the first one for updates mind SSR.

[Frallen]

In my project, the screen has fixed values and since div aria-live="polite" has width and height dimensions, I get a scroll.