From eb7ea53e1dfbb127587924f5eb068ca075774162 Mon Sep 17 00:00:00 2001 From: Nicolle Romero Date: Tue, 12 Dec 2023 21:49:57 -0800 Subject: [PATCH 1/3] Fix tooltip behavior --- app/components/primer/alpha/tool_tip.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/primer/alpha/tool_tip.ts b/app/components/primer/alpha/tool_tip.ts index a01d0b1d59..329f72eedd 100644 --- a/app/components/primer/alpha/tool_tip.ts +++ b/app/components/primer/alpha/tool_tip.ts @@ -291,7 +291,7 @@ 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' || (event.type === 'focus' && this.control.matches(':focus-visible')) const isMouseLeaveFromButton = event.type === 'mouseleave' && (event as MouseEvent).relatedTarget !== this.control && From 3af5a2a4d8990ddab6873afd1176aa3f07d78816 Mon Sep 17 00:00:00 2001 From: Nicolle Romero Date: Tue, 12 Dec 2023 22:05:29 -0800 Subject: [PATCH 2/3] Add changeset --- .changeset/breezy-jobs-report.md | 5 +++++ 1 file changed, 5 insertions(+) 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 From 3a5e2cd3d739c8266c20159cec0a07808d69144f Mon Sep 17 00:00:00 2001 From: Nicolle Romero Date: Wed, 13 Dec 2023 10:36:02 -0800 Subject: [PATCH 3/3] Handle headless browser tests --- app/components/primer/alpha/tool_tip.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/components/primer/alpha/tool_tip.ts b/app/components/primer/alpha/tool_tip.ts index 329f72eedd..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' && this.control.matches(':focus-visible')) + 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 &&