diff --git a/.changeset/tidy-cobras-hang.md b/.changeset/tidy-cobras-hang.md new file mode 100644 index 00000000..66ba1b0e --- /dev/null +++ b/.changeset/tidy-cobras-hang.md @@ -0,0 +1,9 @@ +--- +'@dnd-kit/accessibility': patch +--- + +Workaround `` layout bug by adding explicit `top` and `left` +attributes. Under sufficiently complex CSS conditions, the element would +overflow containers that it's not supposed to. See [this +post](https://blog.duvallj.pw/posts/2024-11-19-chrome-heisenbug-uncovered.html) +for a complete explanation. diff --git a/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx b/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx index 7caf2bb1..15c88aa0 100644 --- a/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx +++ b/packages/accessibility/src/components/LiveRegion/LiveRegion.tsx @@ -10,6 +10,8 @@ export function LiveRegion({id, announcement, ariaLiveType = "assertive"}: Props // Hide element visually but keep it readable by screen readers const visuallyHidden: React.CSSProperties = { position: 'fixed', + top: 0, + left: 0, width: 1, height: 1, margin: -1,