fix(tooltip): adjust focus to div within tooltip-body (#10217)

* fix(tooltip): have tooltip appear on safari * fix(tooltip): adjust tooltip focus to content div --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 10, 2023 · 9d4a326 · 9d4a326
1 parent 2e8caca
commit 9d4a326
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 30 deletions.
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-body.ts b/packages/carbon-web-components/src/components/tooltip/tooltip-body.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -130,17 +130,13 @@ class BXTooltipBody extends BXFloatingMenu {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'menu');
     }
-    if (!this.hasAttribute('tabindex')) {
-      // TODO: Should we use a property?
-      this.setAttribute('tabindex', '-1');
-    }
     super.connectedCallback();
   }
 
   render() {
     return html`
       <span class="${prefix}--tooltip__caret"></span>
-      <div class="${prefix}--tooltip__content"><slot></slot></div>
+      <div tabindex="0" class="${prefix}--tooltip__content"><slot></slot></div>
     `;
   }
 

diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip.ts b/packages/carbon-web-components/src/components/tooltip/tooltip.ts
@@ -42,50 +42,34 @@ 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 (
-    forceState: undefined | boolean = undefined
-  ) => {
-    if (forceState === undefined) {
-      this.open = !this.open;
-    } else {
-      this.open = Boolean(forceState);
-    }
+  private _handleClick = async () => {
+    this.open = !this.open;
     const { open, updateComplete } = this;
     if (open) {
       await updateComplete;
       const { _menuBody: menuBody } = this;
-      menuBody?.focus();
+      (
+        menuBody?.shadowRoot?.querySelector(
+          BXTooltip.selectorTooltipBody
+        ) as HTMLElement
+      )?.focus();
     }
   };
 
   /**
    * 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 ([' ', 'Enter'].includes(event.key)) {
+    if (event.key === ' ' || event.key === 'Enter') {
       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.
    */
@@ -145,6 +129,10 @@ class BXTooltip
     `;
   }
 
+  static get selectorTooltipBody() {
+    return `.${prefix}--tooltip__content`;
+  }
+
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }