From c42ab8641755845aa128780d4529eec36bbdf80d Mon Sep 17 00:00:00 2001 From: Daragh King Date: Wed, 5 Feb 2025 11:10:22 +0000 Subject: [PATCH] fix(tooltip): improved accessibility MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit improved accessibility ✅ Closes: COMUI-3420 --- .../gux-tooltip-base/gux-tooltip-base.scss | 3 +-- .../gux-tooltip-base/gux-tooltip-base.tsx | 23 ++++++++++++++---- .../stable/gux-tooltip/gux-tooltip.scss | 3 +-- .../stable/gux-tooltip/gux-tooltip.tsx | 24 +++++++++++++++---- 4 files changed, 40 insertions(+), 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 index 783bebfc1b..9d9d565815 100644 --- 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 index c505106970..3786628e1f 100644 --- 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; @Element() private root: HTMLElement; @@ -98,6 +99,16 @@ export class GuxTooltipBase { } } + @Listen('pointerenter') + handlePointerenter() { + this.show(); + } + + @Listen('pointerleave') + handlePointerleave() { + this.hide(); + } + /* * Show tooltip */ @@ -156,6 +167,7 @@ export class GuxTooltipBase { }); } private show(): void { + clearTimeout(this.hideDelayTimeout); this.isShown = true; afterNextRender(() => { this.runUpdatePosition(); @@ -163,10 +175,13 @@ export class GuxTooltipBase { } 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 index 783bebfc1b..9d9d565815 100644 --- 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 index 9822b50182..9a47b4c2ab 100644 --- 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; @Element() private root: HTMLElement; @@ -85,6 +86,16 @@ export class GuxTooltip { } } + @Listen('pointerenter') + handlePointerenter() { + this.show(); + } + + @Listen('pointerleave') + handlePointerleave() { + this.hide(); + } + /* * Show tooltip */ @@ -141,6 +152,7 @@ export class GuxTooltip { }); } private show(): void { + clearTimeout(this.hideDelayTimeout); this.isShown = true; afterNextRender(() => { this.runUpdatePosition(); @@ -148,10 +160,12 @@ export class GuxTooltip { } 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 {