live-announcer causing width overflow in mobile while using calendar hooks

[wildcant]

🐛 Bug Report

Hi guys, first of all thank your work on this amazing library,
I've being working on a custom calendar component using the hooks from stately and aria packages and found this problem when interacting with the calendar grid cells the message in the live announcer would update and cause overflow in the page, this is mostly noticeable in mobile view. It seems this is similar to #3791

🤔 Expected Behavior

The data-live-announcer should be completely invisible and should not affect the overflow behavior.

😯 Current Behavior

The data-live-announcer will grow in width till it pushes the width out of the body.

💁 Possible Solution

Seems to be a style fix similar to #3791

🔦 Context

Here's an example of the current behavior

Range calendar initial state	Range calendar while state changes

💻 Code Sample

Here's a code sandbox, it has the example from the documentation on how to use the useRangeCalendar hook from react aria:
https://codesandbox.io/s/calendar-range-live-announcer-issue-seokij

[snowystinger]

is it causing horizontal scrolling for you? It's not doing anything for me in terms of page layout. I can see it extend out past the width, but it isn't causing any issues for me.

The possible solution cited was applied to both height and width, so I think something else will be needed.

[wildcant]

Yes it's affecting my layout, not a 100% sure why yet, my app is using next js 13 and tailwind, I'm guessing somewhere one of the two is applying some style making the problem more noticeable, here's a codesandbox with next js and tailwind where you can see this effect:
https://codesandbox.io/p/sandbox/calendar-range-live-announcer-issue-next-js-tailwind-5ilibw

In order to see the problem you'll have to open the preview in a new tab and toggle device toolbar, l like this:

Range calendar initial state	Range calendar while state changes

I was able to fix the issue in my project with the following css

div[data-live-announcer='true'] {
  display: none;
}

but not sure if that would be an issue for accessibility or SEO?
just curious, what is the main purpose of the live announcer?
in terms of UI it seems to be working just fine for now

[snowystinger]

I think display none will negatively impact the iPhone VoiceOver or the Android TalkBack experience. Instead, maybe you can just set the width of the live-announcer or it's children to 1px for now? I'll try to find some time to try it out this week, but we are headed into a release, so I apologize if I'm a little slow getting back. If you want to try those out and make a PR, that'd be very helpful.

[filipw01]

Looks like it was fixed together with #3791 and is fine in react-aria 3.23.1. @wildcant can you try it out?

[wildcant]

Updated package versions and it's working properly now 🙌 thanks guys