diff --git a/src/components/Popup/Popup.tsx b/src/components/Popup/Popup.tsx index baeef7efc..4c45da490 100644 --- a/src/components/Popup/Popup.tsx +++ b/src/components/Popup/Popup.tsx @@ -12,6 +12,7 @@ import { useDismiss, useFloating, useInteractions, + useRole, useTransitionStatus, } from '@floating-ui/react'; import type { @@ -23,6 +24,7 @@ import type { Strategy, UseFloatingOptions, UseInteractionsReturn, + UseRoleProps, } from '@floating-ui/react'; import {useForkRef} from '../../hooks'; @@ -110,8 +112,8 @@ export interface PopupProps extends DOMProps, AriaLabelingProps, QAProps { disableOutsideClick?: boolean; /** Do not use `Portal` for children */ disablePortal?: boolean; - /** `aria-role` attribute */ - role?: React.AriaRole; + /** ARIA role or special component role (select, combobox) */ + role?: UseRoleProps['role']; /** HTML `id` attribute */ id?: string; // CSS property `z-index` @@ -151,7 +153,7 @@ export function Popup({ disablePortal = false, qa, id, - role, + role: roleProp, zIndex = 1000, ...restProps }: PopupProps) { @@ -221,13 +223,17 @@ export function Popup({ ], }); + const role = useRole(context, { + enabled: Boolean(roleProp), + role: roleProp, + }); const dismiss = useDismiss(context, { enabled: !disableOutsideClick || !disableEscapeKeyDown, outsidePress: !disableOutsideClick, escapeKey: !disableEscapeKeyDown, }); - const {getReferenceProps, getFloatingProps} = useInteractions([dismiss]); + const {getReferenceProps, getFloatingProps} = useInteractions([role, dismiss]); React.useLayoutEffect(() => { setGetAnchorProps?.(getReferenceProps); @@ -281,7 +287,6 @@ export function Popup({ style={style} data-qa={qa} id={id} - role={role} {...filterDOMProps(restProps)} > {hasArrow && ( diff --git a/src/components/lab/Popover/Popover.tsx b/src/components/lab/Popover/Popover.tsx index f04b3e0ae..99da2a8ef 100644 --- a/src/components/lab/Popover/Popover.tsx +++ b/src/components/lab/Popover/Popover.tsx @@ -6,7 +6,6 @@ import { useFloatingRootContext, useHover, useInteractions, - useRole, } from '@floating-ui/react'; import type {UseInteractionsReturn} from '@floating-ui/react'; @@ -91,9 +90,8 @@ export function Popover({ handleClose: enableSafePolygon ? safePolygon() : undefined, }); const click = useClick(context, {enabled: !disabled}); - const role = useRole(context, {role: 'dialog'}); - const {getReferenceProps, getFloatingProps} = useInteractions([hover, click, role]); + const {getReferenceProps, getFloatingProps} = useInteractions([hover, click]); const anchorRef = useForkRef( setAnchorElement, @@ -121,6 +119,7 @@ export function Popover({ floatingProps={getFloatingProps()} autoFocus modalFocus + role="dialog" className={b(null, className)} > {content}