Merge pull request desktop#17823 from desktop/escape-should-close-our-tooltips

Hide tooltip on escape and stop escape from further action

Author: tidy-dev

app/src/ui/changes/commit-message.tsx

@@ -1258,6 +1258,7 @@ export class CommitMessage extends React.Component<
         onClick={this.onSubmit}
         disabled={!buttonEnabled}
         tooltip={tooltip}
+        tooltipDismissable={false}
         onlyShowTooltipWhenOverflowed={buttonEnabled}
       >
         <>

app/src/ui/lib/button.tsx

@@ -180,6 +180,15 @@ export interface IButtonProps {
    * Default: true
    * */
   readonly applyTooltipAriaDescribedBy?: boolean
+
+  /**
+   * Whether or not the tooltip should be dismissable via the escape key. This
+   * is generally true, but if the tooltip is communicating something important
+   * to the user, such as an input error, it should not be dismissable.
+   *
+   * Defaults to true
+   */
+  readonly tooltipDismissable?: boolean
 }
 
 /**
@@ -251,6 +260,7 @@ export class Button extends React.Component<IButtonProps, {}> {
             onlyWhenOverflowed={this.props.onlyShowTooltipWhenOverflowed}
             openOnTargetClick={this.props.openTooltipOnClick}
             applyAriaDescribedBy={this.props.applyTooltipAriaDescribedBy}
+            dismissable={this.props.tooltipDismissable}
           >
             {tooltip}
           </Tooltip>

app/src/ui/lib/tooltip.tsx

@@ -53,6 +53,15 @@ export interface ITooltipProps<T> {
    */
   readonly interactive?: boolean
 
+  /**
+   * Whether or not the tooltip should be dismissable via the escape key. This
+   * is generally true, but if the tooltip is communicating something important
+   * to the user, such as an input error, it should not be dismissable.
+   *
+   * Defaults to true
+   */
+  readonly dismissable?: boolean
+
   /**
    * The amount of time to wait (in milliseconds) while a user hovers over the
    * target before displaying the tooltip. There's typically no reason to
@@ -377,6 +386,13 @@ export class Tooltip<T extends TooltipTarget> extends React.Component<
     }
   }
 
+  private onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && this.state.show && this.props.dismissable) {
+      event.preventDefault()
+      this.beginHideTooltip()
+    }
+  }
+
   private installTooltip(elem: TooltipTarget) {
     elem.addEventListener('mouseenter', this.onTargetMouseEnter)
     elem.addEventListener('mouseleave', this.onTargetMouseLeave)
@@ -389,6 +405,7 @@ export class Tooltip<T extends TooltipTarget> extends React.Component<
     elem.addEventListener('tooltip-shown', this.onTooltipShown)
     elem.addEventListener('tooltip-hidden', this.onTooltipHidden)
     elem.addEventListener('click', this.onTargetClick)
+    elem.addEventListener('keydown', this.onKeyDown)
   }
 
   private removeTooltip(prevTarget: TooltipTarget | null) {
@@ -405,6 +422,7 @@ export class Tooltip<T extends TooltipTarget> extends React.Component<
       prevTarget.removeEventListener('focusout', this.onTargetBlur)
       prevTarget.removeEventListener('blur', this.onTargetBlur)
       prevTarget.removeEventListener('click', this.onTargetClick)
+      prevTarget.removeEventListener('keydown', this.onKeyDown)
     }
   }