Skip to content

Fix LiveAnnouncer styles cause page shift#3807

Merged
snowystinger merged 4 commits into
mainfrom
live-announcer-hidden-styles
Jan 6, 2023
Merged

Fix LiveAnnouncer styles cause page shift#3807
snowystinger merged 4 commits into
mainfrom
live-announcer-hidden-styles

Conversation

@snowystinger
Copy link
Copy Markdown
Member

@snowystinger snowystinger commented Nov 30, 2022

Closes #3791

started here #3792

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Go to path=/story/combobox--static-items
inspect the dom
watch the height of the data-live-announcer as you move the mouse over items in the combobox popover repeatedly
it should not grow in height

🧢 Your Project:

@adobe-bot
Copy link
Copy Markdown

Copy link
Copy Markdown
Member

@reidbarber reidbarber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Copy link
Copy Markdown
Member

@LFDanLu LFDanLu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, confirmed that the LiveAnnouncer is staying as a 1x1 div now

@snowystinger snowystinger merged commit 73d8be4 into main Jan 6, 2023
@snowystinger snowystinger deleted the live-announcer-hidden-styles branch January 6, 2023 00:30
vuluongj20 added a commit to getsentry/sentry that referenced this pull request May 25, 2023
Fix a scrolling issue coming from `CompactSelect` in grid mode,
specifically the `LiveAnnouncer` element:


https://github.com/getsentry/sentry/assets/44172267/171b3ca1-c61e-43b0-9ac5-be830a2f91af

This was a `react-aria` issue and was fixed in
adobe/react-spectrum#3807. We just need to
upgrade `@react-aria/gridlist`.

After upgrading, the `LiveAnnouncer` element is always 1px wide/tall and
won't cause any scrolling issue.
<img width="1543" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/3b2d9b25-c056-4e7f-9004-48f5ab1e7075">
volokluev pushed a commit to getsentry/sentry that referenced this pull request May 30, 2023
Fix a scrolling issue coming from `CompactSelect` in grid mode,
specifically the `LiveAnnouncer` element:


https://github.com/getsentry/sentry/assets/44172267/171b3ca1-c61e-43b0-9ac5-be830a2f91af

This was a `react-aria` issue and was fixed in
adobe/react-spectrum#3807. We just need to
upgrade `@react-aria/gridlist`.

After upgrading, the `LiveAnnouncer` element is always 1px wide/tall and
won't cause any scrolling issue.
<img width="1543" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/3b2d9b25-c056-4e7f-9004-48f5ab1e7075">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

small review Easy to review PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

live-announcer incorrectly copies visually hidden styles

4 participants