core-lead/molecule-core
1
0
Fork 0
forked from molecule-ai/molecule-core
Code Pull Requests Activity

Merge pull request #2630 from Molecule-AI/a11y/canvas-tooltip-esc-dismiss

Browse Source 
a11y(canvas): Tooltip Esc-to-dismiss (WCAG 1.4.13)
This commit is contained in:
Hongming Wang 2026-05-03 20:36:44 +00:00 committed by GitHub
commit 18e88e7039
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
canvas/src/components/Tooltip.tsx
View File

@ -22,6 +22,24 @@ export function Tooltip({ text, children }: Props) {
useEffect(() => () => clearTimeout(timerRef.current), []);
// WCAG 1.4.13 (Content on Hover or Focus) — Dismissible: a mechanism
// is available to dismiss the additional content WITHOUT moving
// pointer hover or keyboard focus. Esc dismisses while the trigger
// stays focused/hovered, so a screen-magnifier user can read what
// the tooltip was covering without losing their place.
useEffect(() => {
if (!show) return;
const onKey = (e: KeyboardEvent) => {
if (e.key === "Escape") {
e.stopPropagation();
clearTimeout(timerRef.current);
setShow(false);
}
};
window.addEventListener("keydown", onKey, true);
return () => window.removeEventListener("keydown", onKey, true);
}, [show]);
const enter = useCallback(() => {
timerRef.current = setTimeout(() => {
if (triggerRef.current) {