always close on escape, even when not focused; #1734

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]

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() });