Fix tooltip behavior (#2452)

primer · Dec 13, 2023 · 87e03ea · 87e03ea
1 parent dc87edf
commit 87e03ea
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/.changeset/breezy-jobs-report.md b/.changeset/breezy-jobs-report.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Ensure tooltip does not reopen errantly unless focus is visible
diff --git a/app/components/primer/alpha/tool_tip.ts b/app/components/primer/alpha/tool_tip.ts
@@ -291,7 +291,11 @@ class ToolTipElement extends HTMLElement {
 
     // Ensures that tooltip stays open when hovering between tooltip and element
     // WCAG Success Criterion 1.4.13 Hoverable
-    const shouldShow = event.type === 'mouseenter' || event.type === 'focus'
+    const shouldShow =
+      event.type === 'mouseenter' ||
+      // Only show tooltip on focus if running in headless browser (for tests) or if focus ring
+      // is visible (i.e. if user is using keyboard navigation)
+      (event.type === 'focus' && (navigator.webdriver || this.control.matches(':focus-visible')))
     const isMouseLeaveFromButton =
       event.type === 'mouseleave' &&
       (event as MouseEvent).relatedTarget !== this.control &&