From 523aa6cdf6220d0a699878c4f94967efa548add7 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 22 Dec 2020 14:40:37 -0500
Subject: [PATCH] Escape should dismiss tooltips; fixes #219

---
 docs/getting-started/changelog.md  |  1 +
 src/components/tooltip/tooltip.tsx | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md
index 5a0e5e44a5..e18daa265b 100644
--- a/docs/getting-started/changelog.md
+++ b/docs/getting-started/changelog.md
@@ -26,6 +26,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug where removing an icon's `name` or `src` wouldn't remove the previously rendered SVG [#285](https://github.com/shoelace-style/shoelace/issues/285)
 - Fixed a bug where disabled link buttons didn't appear disabled
 - Improved elevation tokens in dark theme
+- Improved accessibility in `sl-tooltip` by allowing escape to dismiss it [#219](https://github.com/shoelace-style/shoelace/issues/219)
 - Removed `sl-blur` and `sl-focus` events from `sl-menu` since menus can't have focus as of 2.0.0-beta.22
 - Updated `sl-spinner` so the indicator is more obvious 
 - Updated to Bootstrap Icons 1.2.1
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index 1c2bc531b4..8edc03e88a 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -88,6 +88,7 @@ export class Tooltip {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleClick = this.handleClick.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleMouseOver = this.handleMouseOver.bind(this);
     this.handleMouseOut = this.handleMouseOut.bind(this);
     this.handleSlotChange = this.handleSlotChange.bind(this);
@@ -186,6 +187,14 @@ export class Tooltip {
     }
   }
 
+  handleKeyDown(event: KeyboardEvent) {
+    // Pressing escape when the target element has focus should dismiss the tooltip
+    if (this.open && event.key === 'Escape') {
+      event.stopPropagation();
+      this.hide();
+    }
+  }
+
   handleMouseOver() {
     if (this.hasTrigger('hover')) {
       this.show();
@@ -228,7 +237,7 @@ export class Tooltip {
 
   render() {
     return (
-      <Host onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+      <Host onKeyDown={this.handleKeyDown} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
         <slot onSlotchange={this.handleSlotChange} />
 
         {!this.disabled && (