fix(tooltip): close tooltip on escape or focusout (carbon-design-syst…

…em#9871)

### Related Ticket(s)

Fixes carbon-design-system#8996 

### Description

Adds `Escape` logic to the `keydown` listener and a new `focusout` listener. Both will toggle the state of the tooltip only in the "closed" direction

### Changelog

**Changed**

- Accessibility improvements to tooltip

packages/carbon-web-components/src/components/tooltip/tooltip.ts

@@ -42,11 +42,19 @@ class BXTooltip
 
   /**
    * Handles `click` event on this element.
+   *
+   * @param {undefined|boolean} forceState if set, will be cast to boolean and force tooltip to open or close.
    */
   @HostListener('click')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleClick = async () => {
-    this.open = !this.open;
+  private _handleClick = async (
+    forceState: undefined | boolean = undefined
+  ) => {
+    if (forceState === undefined) {
+      this.open = !this.open;
+    } else {
+      this.open = Boolean(forceState);
+    }
     const { open, updateComplete } = this;
     if (open) {
       await updateComplete;
@@ -57,15 +65,27 @@ class BXTooltip
 
   /**
    * Handles `keydown` event on this element.
+   * Space & enter will toggle state, Escape will only close.
    */
   @HostListener('keydown')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleKeydown = async (event) => {
-    if (event.key === ' ' || event.key === 'Enter') {
+    if ([' ', 'Enter'].includes(event.key)) {
       this._handleClick();
+    } else if (event.key === 'Escape') {
+      this._handleClick(false);
     }
   };
 
+  /**
+   * Closes tooltip on `focusout` event
+   */
+  @HostListener('focusout')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleFocusout = async () => {
+    this._handleClick(false);
+  };
+
   /**
    * `true` if the dropdown should be open.
    */