chore: additional shadow dom tests and fixes

[snowystinger]

Closes #10330

Pulling in various tests from all the PRs that have preceded this one.
First set from #8991

Need to figure out some oddities in the tests, esp Popover, why does it fail in React 16 and how does it pass in the non-shadow dom enabled test

• Resolution, cannot support React 16 as the way it aggregates event handlers doesn't work with Shadow DOM

Another issue solved, I've fixed focus in preventFocus for Combobox in real life. I was able to test it in the browser tests.

I also noticed that RangeCalendar has a bug, one click will start and finish the range immediately. I've added a test and fixed this as well.

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

You can test the ComboBox and DateRangePicker in the new aggregate S2 ShadowDOM story. If you find other bugs I don't mention or test in here, please still report it, but it'll be follow up elsewhere.

🧢 Your Project:

[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]

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]

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]

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]

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]

Build successful! 🎉

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

[LFDanLu]

@snowystinger I think this was unneeded but not entirely sure what this was for? If it is the page.css, that gets imported by render already I believe

[snowystinger]

I no longer recall, but that sounds about right

[rspbot]

Build successful! 🎉

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

[rspbot]

## API Changes

react-aria-components

/react-aria-components:setInteractionModality

-setInteractionModality {
-  modality: Modality
-  returnVal: undefined
-}

/react-aria-components:Modality

-Modality {
-  M: undefined
-}

---

@react-spectrum/s2

/@react-spectrum/s2:Avatar

 Avatar {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   alt?: string
   id?: string
   isOverBackground?: boolean
   size?: number | number | number | number | number | number | number | number | number | number | number | number | number | number | (number & {
   
-}) | `${number}lh` = 24
+}) = 24
   slot?: string | null
   src?: string
   styles?: StylesPropWithoutWidth
 }

/@react-spectrum/s2:AvatarProps

 AvatarProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   alt?: string
   id?: string
   isOverBackground?: boolean
   size?: number | number | number | number | number | number | number | number | number | number | number | number | number | number | (number & {
   
-}) | `${number}lh` = 24
+}) = 24
   slot?: string | null
   src?: string
   styles?: StylesPropWithoutWidth
 }

---

[rspbot]

Agent Skills Changes

Modified (11)

• react-aria/agent-skills/index.json $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/agent-skills/react-aria.tar.gz
• react-aria/agent-skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/agent-skills/react-aria/references/interactions/useFocusVisible.md $\color{red}{-12}$
• s2/agent-skills/index.json $\color{green}{+3}$ $\color{red}{-3}$
• s2/agent-skills/migrate-react-spectrum-v3-to-s2.tar.gz
• s2/agent-skills/react-spectrum-s2.tar.gz
• s2/agent-skills/react-spectrum-s2/references/components/Avatar.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/react-spectrum-s2/references/react-aria/interactions/useFocusVisible.md $\color{red}{-12}$
• s2/agent-skills/spectrum-audit.tar.gz

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/495a3f9141fabb3d9eb66ce00c388355db9e35b1/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/495a3f9141fabb3d9eb66ce00c388355db9e35b1/