live-announcer incorrectly copies visually hidden styles

[mitchellwarr]

🐛 Bug Report

The live announcer div appended to the top of the body is supposed to be invisible and not affecting the page at all, however it does still have height and width and does affect the page its on.

If you focus, or do any action, enough times without let up; then the announcer grows in height to such a degree that the pages scroll starts to grow. After the announcer starts deleting items from itself, the scroll bar will shrink again.

If any of this happens while the user has also scrolled the window, then when the body scroll height changes, it appears as if something is taking over your scroll and jittering you up or down the page.

<div
  data-live-announcer="true"
  style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap;"
>
  <div role="log" aria-live="assertive" aria-relevant="additions"></div>
  <div role="log" aria-live="polite" aria-relevant="additions"></div>
</div>

🤔 Expected Behavior

The data-live-announcer should be completely invisible, including height and width.

😯 Current Behavior

The data-live-announcer will grow in height till it pushes the height and width of the body. There is a sandbox listed here that lets you focus back and forth in a comboBox, creating live announce events. When you do so the number next to it is the current height of the announcer div. Notice that if you move your mouse back and forth repeatedly over the items in the drop down, that the height grows and will eventually cause a scroll state.

Scrolling in this state, with the announcer changing in height will lead to strangeness.

💁 Possible Solution

I've made a PR to show the potential solution: #3792

It comes down to this here:

react-spectrum/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx

Lines 69 to 80 in 71cfa87

	Object.assign(this.node.style, {
	border: 0,
	clip: 'rect(0 0 0 0)',
	clipPath: 'inset(50%)',
	height: 1,
	margin: '0 -1px -1px 0',
	overflow: 'hidden',
	padding: 0,
	position: 'absolute',
	width: 1,
	whiteSpace: 'nowrap'
	});

Object.assign node.style does not accept 1 as a value for width and height; it requires '1px'

🔦 Context

This has lead to a lot of issues using the ComboBox in our product. It has expressed itself as weird scrolling issues. I have spent many hours over the last few weeks tracking this down off and on. At first I thought this was a rogue window.scrollTop issue.

I first had to isolate this repo as the issue, and work out how to recreate it. Recreating the issue was hard given that it depends on your screen height and the way you focus on the ComboBox's dropdown items. I wasn't even sure how to recreate it until I found the data-live-announcer issue.

I finally caught this when in a StoryBook story, trying to keep an eye on how the items in our dropdown looked while focused and not focused, the scroll bar was growing. That smelled like items were being appended to the body. Then managed to track the appending items to the announcer, and sure enough it was growing.

I'll be honest here, i'm over joyed I finally caught this bug. This was driving me utterly nuts, I've been heavily scoping this repos source code for the last few weeks to try figure it out... and I found it on accident while doing something else. This is the way, i suppose.

💻 Code Sample

Here is a sandbox to recreate the issue. Move your mouse back and forth across the dropdown items to watch the number grow.

When the scrollbar expands beyond the screen, try scrolling down and see what happens as it shrinks again.

https://codesandbox.io/s/eager-jackson-gy3btv?file=/src/App.js

🌍 Your Environment

Software	Version(s)
react-aria	3.21.0
react-stately	3.19.0
Browser	chrome 106.0.5249.119
Operating System	mac Version 13.0 (22A380)