From 7364fa1e752cca34d16368e7a06ddd0202cf6030 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 29 Nov 2023 10:27:30 -0500
Subject: [PATCH] always close on escape, even when not focused; #1734

---
 docs/pages/resources/changelog.md           | 4 ++++
 src/components/tooltip/tooltip.component.ts | 9 +++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
index c874cadf..1796d2ab 100644
--- a/docs/pages/resources/changelog.md
+++ b/docs/pages/resources/changelog.md
@@ -12,6 +12,10 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- Improved the accessibility of `<sl-tooltip>` so they get dismissed when [[Esc]] is pressed even when the target isn't focused [#1734]
+
 ## 2.12.0
 
 - Added the Italian translation [#1727]
diff --git a/src/components/tooltip/tooltip.component.ts b/src/components/tooltip/tooltip.component.ts
index 742de740..9922cc6f 100644
--- a/src/components/tooltip/tooltip.component.ts
+++ b/src/components/tooltip/tooltip.component.ts
@@ -102,7 +102,6 @@ export default class SlTooltip extends ShoelaceElement {
     this.addEventListener('blur', this.handleBlur, true);
     this.addEventListener('focus', this.handleFocus, true);
     this.addEventListener('click', this.handleClick);
-    this.addEventListener('keydown', this.handleKeyDown);
     this.addEventListener('mouseover', this.handleMouseOver);
     this.addEventListener('mouseout', this.handleMouseOut);
   }
@@ -143,9 +142,9 @@ export default class SlTooltip extends ShoelaceElement {
     }
   };
 
-  private handleKeyDown = (event: KeyboardEvent) => {
-    // Pressing escape when the target element has focus should dismiss the tooltip
-    if (this.open && !this.disabled && event.key === 'Escape') {
+  private handleDocumentKeyDown = (event: KeyboardEvent) => {
+    // Pressing escape when a tooltip is open should dismiss it
+    if (event.key === 'Escape') {
       event.stopPropagation();
       this.hide();
     }
@@ -181,6 +180,7 @@ export default class SlTooltip extends ShoelaceElement {
 
       // Show
       this.emit('sl-show');
+      document.addEventListener('keydown', this.handleDocumentKeyDown);
 
       await stopAnimations(this.body);
       this.body.hidden = false;
@@ -192,6 +192,7 @@ export default class SlTooltip extends ShoelaceElement {
     } else {
       // Hide
       this.emit('sl-hide');
+      document.removeEventListener('keydown', this.handleDocumentKeyDown);
 
       await stopAnimations(this.body);
       const { keyframes, options } = getAnimation(this, 'tooltip.hide', { dir: this.localize.dir() });