From 87e03ea4dd41822454c72ddb7e55b0aa9294c69c Mon Sep 17 00:00:00 2001 From: Nicolle Romero Date: Wed, 13 Dec 2023 11:29:52 -0800 Subject: [PATCH] Fix tooltip behavior (#2452) --- .changeset/breezy-jobs-report.md | 5 +++++ app/components/primer/alpha/tool_tip.ts | 6 +++++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 .changeset/breezy-jobs-report.md diff --git a/.changeset/breezy-jobs-report.md b/.changeset/breezy-jobs-report.md new file mode 100644 index 0000000000..3c1b0e9f42 --- /dev/null +++ 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 index a01d0b1d59..96dd38931a 100644 --- 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 &&