wip: enable keyboard scrolling in S2 Popover when content overflows

[yihuiliao]

Closes #5303

The original issue was for V3 but the same issue occurred in S2. We focus the Popover but it wasn't a scrollable region (only the inner div was), so if you hit any of the up/down arrow keys, the content wouldn't scroll. The only way to scroll content via keyboard was if there was a focusable item inside. We move overflow: 'auto to the Popover so it is both focused + a scrollable region.

My only concern is that this could potentially affect a lot of other components which rely on Popover. I've tested other components but might have missed something

Btw, I still need to run chromatic so this PR is not quite done yet...

✅ 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:

Test ComboBox, Menu, Picker, Popover in storybook when the content scrolls. Make sure styles haven't changed, no double scrollbars, scroll into view works

Compare S2 Storybook > Popover > Help Center. Previously, if the content scrolled and you pressed the down arrow key, nothing would happen. You would first need to tab into the region. Now, you should be able to press the down arrow key and the content should scroll.

🧢 Your Project:

[yihuiliao]

I'm not sure if there was reason we were using outline over borders. However, since overflow: auto was moved to the popover and not inner div, the outline was appearing on top of the scrollbar. Using border ensures that it appears underneath.

*ignore the squished image, i didn't want it take up too much space but you can see where the outline is

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Agent Skills Changes

Modified (48)

• react-aria/skills/react-aria/references/components/ListBox.md $\color{green}{+2}$ $\color{red}{-2}$
• react-aria/skills/react-aria/references/components/Menu.md $\color{green}{+4}$ $\color{red}{-4}$
• react-aria/skills/react-aria/references/guides/selection.md $\color{green}{+5}$ $\color{red}{-5}$
• react-aria/skills/react-aria/references/internationalized/date/CalendarDate.md $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/skills/react-aria/references/internationalized/date/CalendarDateTime.md $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/skills/react-aria/references/internationalized/date/ZonedDateTime.md $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/skills/react-aria/references/utilities/useField.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/ActionButton.md $\color{green}{+3}$ $\color{red}{-3}$
• s2/skills/react-spectrum-s2/references/components/ActionButtonGroup.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/components/ActionMenu.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/AvatarGroup.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/Button.md $\color{green}{+5}$ $\color{red}{-5}$
• s2/skills/react-spectrum-s2/references/components/ButtonGroup.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/components/Calendar.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/Card.md $\color{green}{+4}$ $\color{red}{-4}$
• s2/skills/react-spectrum-s2/references/components/CardView.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/components/ColorSwatch.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/components/ColorSwatchPicker.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/ComboBox.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/DateField.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/DatePicker.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/DateRangePicker.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/components/Dialog.md $\color{green}{+6}$ $\color{red}{-6}$
• s2/skills/react-spectrum-s2/references/components/Divider.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/Form.md $\color{green}{+4}$ $\color{red}{-4}$
• s2/skills/react-spectrum-s2/references/components/Image.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/InlineAlert.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/Link.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/LinkButton.md $\color{green}{+3}$ $\color{red}{-3}$
• s2/skills/react-spectrum-s2/references/components/ListView.md $\color{green}{+3}$ $\color{red}{-3}$
• s2/skills/react-spectrum-s2/references/components/Menu.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/Meter.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/Picker.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/ProgressBar.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/ProgressCircle.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/RangeCalendar.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/components/SearchField.md $\color{green}{+5}$ $\color{red}{-5}$
• s2/skills/react-spectrum-s2/references/components/SelectBoxGroup.md $\color{green}{+3}$ $\color{red}{-3}$
• s2/skills/react-spectrum-s2/references/components/StatusLight.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/TableView.md $\color{green}{+8}$ $\color{red}{-8}$
• s2/skills/react-spectrum-s2/references/components/Tabs.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/TagGroup.md $\color{green}{+3}$ $\color{red}{-3}$
• s2/skills/react-spectrum-s2/references/components/TextArea.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/components/TimeField.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/components/ToggleButton.md $\color{green}{+3}$ $\color{red}{-3}$
• s2/skills/react-spectrum-s2/references/components/ToggleButtonGroup.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/components/Tooltip.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/components/TreeView.md $\color{green}{+3}$ $\color{red}{-3}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/58b074e4fd732c3975d1b49b23f878c6cfeaf1a8/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/58b074e4fd732c3975d1b49b23f878c6cfeaf1a8/