feat(Popover): move role hook into Popup

gravity-ui · Dec 5, 2024 · b6f7912 · b6f7912
1 parent 8a53684
commit b6f7912
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git 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
@@ -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}