Skip to content

Commit f9d75e8

Browse files
authored
fix(Popover): use visible title for popup a11y label (#1941)
1 parent b5de671 commit f9d75e8

File tree

1 file changed

+9
-1
lines changed

1 file changed

+9
-1
lines changed

src/components/Popover/Popover.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React from 'react';
44

55
import {Xmark} from '@gravity-ui/icons';
66

7+
import {useUniqId} from '../../hooks/useUniqId';
78
import {Button} from '../Button';
89
import {Icon} from '../Icon';
910
import type {PopupPlacement} from '../Popup';
@@ -115,6 +116,8 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
115116

116117
const hasTitle = Boolean(title);
117118

119+
const popoverTitleId = `popover-${tooltipId ?? ''}-title-${useUniqId()}`;
120+
118121
const tooltip = (
119122
<Popup
120123
id={tooltipId}
@@ -144,9 +147,14 @@ export const Popover = React.forwardRef<PopoverInstanceProps, PopoverProps & QAP
144147
restoreFocus={true}
145148
restoreFocusRef={restoreFocusRef || controlRef}
146149
modifiers={modifiers}
150+
aria-labelledby={title ? popoverTitleId : undefined}
147151
>
148152
<React.Fragment>
149-
{title && <h3 className={cnPopover('tooltip-title')}>{title}</h3>}
153+
{title && (
154+
<h3 id={popoverTitleId} className={cnPopover('tooltip-title')}>
155+
{title}
156+
</h3>
157+
)}
150158
<Content
151159
secondary={hasTitle ? theme !== 'announcement' : false}
152160
content={content}

0 commit comments

Comments
 (0)