feat: Automatically render popovers as dialogs

[devongovett]

Developers have found it confusing when they need to render a <Dialog> inside a <Popover>, and when they don't. This is becoming even more complicated with Autocomplete, which enables patterns like searchable menus, submenus, and selects. This PR makes RAC popovers automatically render with role=dialog when a <Dialog> is not rendered inside them.

Behavior changes

• This always renders (modal) popovers as dialogs, so all menus, select list boxes, etc. are wrapped in a dialog. We need to test how this behaves with screen readers to ensure the announcements aren't too much more verbose or confusing.
• Selects and Menus now contain focus. This means you can no longer tab out of them. That matches macOS native behavior.
• Opening a submenu with the right arrow key will autofocus the first menu item within the dialog (if any) the same way it does with regular submenus. Is this a problem?
• This removes SubDialogTrigger and merges it into SubmenuTrigger.

[devongovett]

need to decide whether to do this in the hooks or keep the independent.

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

## API Changes

react-aria-components

/react-aria-components:UNSTABLE_SubDialogTrigger

-UNSTABLE_SubDialogTrigger {
-  children: Array<ReactElement>
-  delay?: number = 200
-}

/react-aria-components:Popover

 Popover {
   UNSTABLE_portalContainer?: Element = document.body
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
   arrowBoundaryOffset?: number = 0
   boundaryElement?: Element = document.body
   children?: ReactNode | ((PopoverRenderProps & {
     defaultChildren: ReactNode | undefined
   className?: string | ((PopoverRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldCloseOnInteractOutside?: (Element) => boolean
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   slot?: string | null
   style?: CSSProperties | ((PopoverRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

/react-aria-components:PopoverProps

 PopoverProps {
   UNSTABLE_portalContainer?: Element = document.body
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
   arrowBoundaryOffset?: number = 0
   boundaryElement?: Element = document.body
   children?: ReactNode | ((PopoverRenderProps & {
     defaultChildren: ReactNode | undefined
   className?: string | ((PopoverRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldCloseOnInteractOutside?: (Element) => boolean
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   slot?: string | null
   style?: CSSProperties | ((PopoverRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

---

@react-aria/overlays

/@react-aria/overlays:Overlay

 Overlay {
   children: ReactNode
   disableFocusManagement?: boolean
   isExiting?: boolean
   portalContainer?: Element = document.body
+  shouldContainFocus?: boolean
 }

/@react-aria/overlays:OverlayProps

 OverlayProps {
   children: ReactNode
   disableFocusManagement?: boolean
   isExiting?: boolean
   portalContainer?: Element = document.body
+  shouldContainFocus?: boolean
 }

---

@react-spectrum/s2

/@react-spectrum/s2:PopoverProps

 PopoverProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   UNSTABLE_portalContainer?: Element = document.body
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
   boundaryElement?: Element = document.body
   children?: ReactNode | ((PopoverRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   hideArrow?: boolean = false
   isEntering?: boolean
   isExiting?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L'
   slot?: string | null
   style?: CSSProperties | ((PopoverRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   styles?: StyleString
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

---

[devongovett]

now we don't know if the submenu will be a dialog or not, or rather, they are all dialogs? I didn't notice any announcement differences in real screen readers