Merge pull request #891 from MyPureCloud/feature/COMUI-3420

fix(tooltip): improved accessibility
MyPureCloud · Feb 13, 2025 · da2643d · da2643d
2 parents 4500e34 + c42ab86
commit da2643d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 13 deletions.
diff --git a/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.scss b/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.scss
@@ -4,7 +4,6 @@
   display: none;
   inline-size: max-content;
   max-inline-size: 250px;
-  pointer-events: none;
   border-radius: var(--gse-ui-tooltip-borderRadius);
   box-shadow: var(--gse-ui-tooltip-boxShadow);
   opacity: 0;
@@ -14,7 +13,6 @@
   display: block;
   animation-name: fade-in;
   animation-duration: 250ms;
-  animation-delay: 350ms;
   animation-fill-mode: forwards;
 }
 
@@ -30,6 +28,7 @@
   font-weight: var(--gse-ui-tooltip-text-fontWeight);
   line-height: var(--gse-ui-tooltip-text-lineHeight);
   color: var(--gse-ui-tooltip-light-foregroundColor);
+  pointer-events: none;
   background-color: var(--gse-ui-tooltip-light-backgroundColor);
   border: var(--gse-ui-tooltip-light-border-width)
     var(--gse-ui-tooltip-light-border-style)

diff --git a/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.tsx b/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.tsx
@@ -50,6 +50,7 @@ export class GuxTooltipBase {
 
   private cleanupUpdatePosition: () => void;
   private id: string = randomHTMLId('gux-tooltip-base');
+  private hideDelayTimeout: ReturnType<typeof setTimeout>;
 
   @Element()
   private root: HTMLElement;
@@ -98,6 +99,16 @@ export class GuxTooltipBase {
     }
   }
 
+  @Listen('pointerenter')
+  handlePointerenter() {
+    this.show();
+  }
+
+  @Listen('pointerleave')
+  handlePointerleave() {
+    this.hide();
+  }
+
   /*
    * Show tooltip
    */
@@ -156,17 +167,21 @@ export class GuxTooltipBase {
     });
   }
   private show(): void {
+    clearTimeout(this.hideDelayTimeout);
     this.isShown = true;
     afterNextRender(() => {
       this.runUpdatePosition();
     });
   }
 
   private hide(): void {
-    if (this.cleanupUpdatePosition) {
-      this.cleanupUpdatePosition();
-    }
-    this.isShown = false;
+    this.hideDelayTimeout = setTimeout(() => {
+      this.isShown = false;
+
+      if (this.cleanupUpdatePosition) {
+        this.cleanupUpdatePosition();
+      }
+    }, 350);
   }
 
   private setForElement(): void {

diff --git a/packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.scss b/packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.scss
@@ -4,7 +4,6 @@
   display: none;
   inline-size: max-content;
   max-inline-size: 250px;
-  pointer-events: none;
   border-radius: var(--gse-ui-tooltip-borderRadius);
   box-shadow: var(--gse-ui-tooltip-boxShadow);
   opacity: 0;
@@ -14,7 +13,6 @@
   display: block;
   animation-name: fade-in;
   animation-duration: 250ms;
-  animation-delay: 350ms;
   animation-fill-mode: forwards;
 }
 
@@ -30,6 +28,7 @@
   font-weight: var(--gse-ui-tooltip-text-fontWeight);
   line-height: var(--gse-ui-tooltip-text-lineHeight);
   color: var(--gse-ui-tooltip-light-foregroundColor);
+  pointer-events: none;
   background-color: var(--gse-ui-tooltip-light-backgroundColor);
   border: var(--gse-ui-tooltip-light-border-width)
     var(--gse-ui-tooltip-light-border-style)

diff --git a/packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.tsx b/packages/genesys-spark-components/src/components/stable/gux-tooltip/gux-tooltip.tsx
@@ -51,8 +51,9 @@ export class GuxTooltip {
       ['focusout', this.focusoutHandler]
     ]);
 
-  private id: string = randomHTMLId('gux-tooltip');
   private cleanupUpdatePosition: () => void;
+  private id: string = randomHTMLId('gux-tooltip');
+  private hideDelayTimeout: ReturnType<typeof setTimeout>;
 
   @Element()
   private root: HTMLElement;
@@ -85,6 +86,16 @@ export class GuxTooltip {
     }
   }
 
+  @Listen('pointerenter')
+  handlePointerenter() {
+    this.show();
+  }
+
+  @Listen('pointerleave')
+  handlePointerleave() {
+    this.hide();
+  }
+
   /*
    * Show tooltip
    */
@@ -141,17 +152,20 @@ export class GuxTooltip {
     });
   }
   private show(): void {
+    clearTimeout(this.hideDelayTimeout);
     this.isShown = true;
     afterNextRender(() => {
       this.runUpdatePosition();
     });
   }
 
   private hide(): void {
-    if (this.cleanupUpdatePosition) {
-      this.cleanupUpdatePosition();
-    }
-    this.isShown = false;
+    this.hideDelayTimeout = setTimeout(() => {
+      if (this.cleanupUpdatePosition) {
+        this.cleanupUpdatePosition();
+      }
+      this.isShown = false;
+    }, 350);
   }
 
   private getForElement(): HTMLElement {