Escape should dismiss tooltips; fixes #219

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

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 && (