Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 5424fd6

Browse filesBrowse files
committed
refactor(CTooltip): improve accessibility
1 parent 57eeaa9 commit 5424fd6
Copy full SHA for 5424fd6

File tree

1 file changed

+6
-1
lines changed
Filter options

1 file changed

+6
-1
lines changed

‎packages/coreui-react/src/components/tooltip/CTooltip.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/tooltip/CTooltip.tsx
+6-1Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,10 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
9090
},
9191
ref,
9292
) => {
93-
const tooltipRef = useRef(null)
93+
const tooltipRef = useRef<HTMLDivElement>(null)
9494
const togglerRef = useRef(null)
9595
const forkedRef = useForkedRef(ref, tooltipRef)
96+
const uID = useRef(`tooltip${Math.floor(Math.random() * 1_000_000)}`)
9697

9798
const { initPopper, destroyPopper } = usePopper()
9899
const [_visible, setVisible] = useState(visible)
@@ -149,6 +150,9 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
149150
return (
150151
<>
151152
{React.cloneElement(children as React.ReactElement<any>, {
153+
...(_visible && {
154+
'aria-describedby': uID.current,
155+
}),
152156
ref: togglerRef,
153157
...((trigger === 'click' || trigger.includes('click')) && {
154158
onClick: () => toggleVisible(!_visible),
@@ -188,6 +192,7 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
188192
},
189193
className,
190194
)}
195+
id={uID.current}
191196
ref={forkedRef}
192197
role="tooltip"
193198
{...rest}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.