fix(Popover): use visible title for popup a11y label (#1941)

gravity-ui · Nov 11, 2024 · f9d75e8 · f9d75e8
1 parent b5de671
commit f9d75e8
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 
 import {Xmark} from '@gravity-ui/icons';
 
+import {useUniqId} from '../../hooks/useUniqId';
 import {Button} from '../Button';
 import {Icon} from '../Icon';
 import type {PopupPlacement} from '../Popup';
@@ -115,6 +116,8 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
 
     const hasTitle = Boolean(title);
 
+    const popoverTitleId = `popover-${tooltipId ?? ''}-title-${useUniqId()}`;
+
     const tooltip = (
         <Popup
             id={tooltipId}
@@ -144,9 +147,14 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
             restoreFocus={true}
             restoreFocusRef={restoreFocusRef || controlRef}
             modifiers={modifiers}
+            aria-labelledby={title ? popoverTitleId : undefined}
         >
             <React.Fragment>
-                {title && <h3 className={cnPopover('tooltip-title')}>{title}</h3>}
+                {title && (
+                    <h3 id={popoverTitleId} className={cnPopover('tooltip-title')}>
+                        {title}
+                    </h3>
+                )}
                 <Content
                     secondary={hasTitle ? theme !== 'announcement' : false}
                     content={content}