fix(core/tooltip): remove direct constructor access (#1118)

siemens · Feb 23, 2024 · 63dd48c · 63dd48c
1 parent cd3d033
commit 63dd48c
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 1,025 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/tooltip.html b/packages/angular-test-app/src/preview-examples/tooltip.html
@@ -1,9 +1,9 @@
 <div style="padding: 4rem">
-  <ix-button class="any-class" style="margin-right: 4rem">Hover me</ix-button>
-  <ix-tooltip for=".any-class">Simple selector</ix-tooltip>
+  <ix-button class="any-class" aria-describedby="tooltip-1">Hover me</ix-button>
+  <ix-tooltip id="tooltip-1" for=".any-class">Simple selector</ix-tooltip>
 
-  <ix-button my-custom-special-selector="any-value">Also hover me</ix-button>
-  <ix-tooltip for="[my-custom-special-selector='any-value']">
+  <ix-button my-custom-special-selector="any-value" aria-describedby="tooltip-2">Also hover me</ix-button>
+  <ix-tooltip id="tooltip-2" for="[my-custom-special-selector='any-value']">
     Custom selector
   </ix-tooltip>
 </div>
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -2,7 +2,7 @@
   "timestamp": "",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.0",
+    "version": "4.12.3",
     "typescriptVersion": "5.3.3"
   },
   "components": [

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
-    "@stencil/core": "^4.12.0",
+    "@stencil/core": "^4.12.3",
     "@types/luxon": "^3.3.7",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",

diff --git a/packages/core/src/components/tooltip/test/tooltip.ct.ts b/packages/core/src/components/tooltip/test/tooltip.ct.ts
@@ -24,29 +24,6 @@ test('renders', async ({ mount, page }) => {
 });
 
 test.describe('a11y', () => {
-  test('append to aria-describedby', async ({ mount, page }) => {
-    await mount(`
-      <ix-tooltip for=".test">tooltip</ix-tooltip>
-      <ix-button class="test" aria-describedby="info">button</ix-button>
-      <div id="info">Info</div>
-    `);
-    const button = page.locator('ix-button');
-    await expect(button).toHaveAttribute(
-      'aria-describedby',
-      'info ix-tooltip-1'
-    );
-  });
-
-  test('handle custom ID in aria-describedby', async ({ mount, page }) => {
-    await mount(`
-      <ix-tooltip id="custom-id" for=".test">tooltip</ix-tooltip>
-      <ix-button class="test" aria-describedby="info">button</ix-button>
-      <div id="info">Info</div>
-    `);
-    const button = page.locator('ix-button');
-    await expect(button).toHaveAttribute('aria-describedby', 'info custom-id');
-  });
-
   test('closes on ESC', async ({ mount, page }) => {
     await mount(`
       <ix-tooltip for=".test">tooltip</ix-tooltip>

diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
@@ -34,8 +34,6 @@ type ArrowPosition = {
 
 const numberToPixel = (value: number) => (value != null ? `${value}px` : '');
 
-let sequentialInstanceId = 0;
-
 /**
  * @slot title-icon - Icon of tooltip title
  * @slot title-content - Content of tooltip title
@@ -78,14 +76,15 @@ export class Tooltip {
 
   @Element() hostElement: HTMLIxTooltipElement;
 
-  private id = ++sequentialInstanceId;
   private observer: MutationObserver;
   private hideTooltipTimeout: NodeJS.Timeout;
   private onEnterElementBind = this.onTooltipShow.bind(this);
   private onLeaveElementBind = this.onTooltipHide.bind(this);
   private disposeAutoUpdate?: () => void;
   private tooltipCloseTimeInMS = 50;
 
+  private disposeListener: Function;
+
   private get arrowElement() {
     return this.hostElement.shadowRoot.querySelector('.arrow') as HTMLElement;
   }
@@ -221,29 +220,25 @@ export class Tooltip {
     return Array.from(document.querySelectorAll(this.for));
   }
 
-  private updateAriaDescribedBy(element: Element, describedBy: string) {
-    const oldDescribedBy = element.getAttribute('aria-describedby');
+  private registerTriggerListener() {
+    const triggerElementList = this.queryAnchorElements();
 
-    if (oldDescribedBy?.indexOf(describedBy) != -1) {
-      return;
+    if (this.disposeListener) {
+      this.disposeListener();
     }
 
-    const newDescribedBy = `${oldDescribedBy} ${describedBy}`;
-    element.setAttribute('aria-describedby', newDescribedBy);
-  }
-
-  private getTooltipId() {
-    return this.hostElement.id || 'ix-tooltip-' + this.id;
-  }
-
-  private registerTriggerListener() {
-    const elements = this.queryAnchorElements();
-    elements.forEach((e) => {
-      e.addEventListener('mouseenter', this.onEnterElementBind);
-      e.addEventListener('mouseleave', this.onLeaveElementBind);
-      e.addEventListener('focusin', this.onEnterElementBind);
-      e.addEventListener('focusout', this.onLeaveElementBind);
-      this.updateAriaDescribedBy(e, this.getTooltipId());
+    triggerElementList.forEach((element) => {
+      element.addEventListener('mouseenter', this.onEnterElementBind);
+      element.addEventListener('mouseleave', this.onLeaveElementBind);
+      element.addEventListener('focusin', this.onEnterElementBind);
+      element.addEventListener('focusout', this.onLeaveElementBind);
+
+      this.disposeListener = () => {
+        element.removeEventListener('mouseenter', this.onEnterElementBind);
+        element.removeEventListener('mouseleave', this.onLeaveElementBind);
+        element.removeEventListener('focusin', this.onEnterElementBind);
+        element.removeEventListener('focusout', this.onLeaveElementBind);
+      };
     });
   }
 
@@ -300,7 +295,6 @@ export class Tooltip {
         class={{
           visible: this.visible,
         }}
-        id={this.getTooltipId()}
         role="tooltip"
       >
         <div class={'tooltip-title'}>

diff --git a/packages/documentation/docs/controls/tooltip.md b/packages/documentation/docs/controls/tooltip.md
@@ -22,15 +22,7 @@ import Playground from '@site/src/components/Playground'
 <Playground
 name="tooltip"
 height="16rem"
-frameworks={{
-    react: SourceReact,
-    angular: {
-        "tooltip.html": SourceAngularHtml,
-        "tooltip.ts": SourceAngularTs
-    },
-    javascript: SourceJavascript,
-    vue: SourceVue
-}}>
+examplesByName>
 </Playground>
 
 ## Properties
@@ -42,3 +34,12 @@ frameworks={{
 ### Slots
 
 <Slots />
+
+## A11y
+
+Set the `aria-describedby` attribute on the trigger element to the tooltip `id` attribute. This allows assistive technologies to establish a logical connection between the trigger and the tooltip. 
+
+See examples [above](#usage). 
+
+[More information](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)
+
diff --git a/packages/html-test-app/src/preview-examples/tooltip.html b/packages/html-test-app/src/preview-examples/tooltip.html
@@ -13,19 +13,23 @@
   <body class="theme-brand-dark">
     <!-- Preview code -->
     <div style="padding: 4rem">
-      <ix-button class="any-class" style="margin-right: 4rem"
-        >Hover me</ix-button
+      <ix-button class="any-class" aria-describedby="tooltip-1">Hover me</ix-button
       >
-      <ix-tooltip for=".any-class">Simple selector</ix-tooltip>
+      <ix-tooltip id="tooltip-1" for=".any-class">Simple selector</ix-tooltip>
 
-      <ix-button my-custom-special-selector="any-value"
+      <ix-button my-custom-special-selector="any-value" aria-describedby="tooltip-2"
         >Also hover me</ix-button
       >
-      <ix-tooltip for="[my-custom-special-selector='any-value']">
+      <ix-tooltip id="tooltip-2" for="[my-custom-special-selector='any-value']">
         Custom selector
       </ix-tooltip>
     </div>
     <!-- Preview code -->
+    <style>
+      ix-button:first-child {
+        margin-right: 4rem;
+      }
+    </style>
     <script type="module" src="./init.js"></script>
   </body>
 </html>
diff --git a/packages/react-test-app/src/preview-examples/tooltip.tsx b/packages/react-test-app/src/preview-examples/tooltip.tsx
@@ -13,13 +13,20 @@ import React from 'react';
 export default () => {
   return (
     <div style={{ padding: '4rem' }}>
-      <IxButton class="any-class" style={{ 'margin-right': '4rem' }}>
+      <IxButton class="any-class" aria-describedby="tooltip-1">
         Hover me
       </IxButton>
-      <IxTooltip for=".any-class">Simple selector</IxTooltip>
+      <IxTooltip id="tooltip-1" for=".any-class">
+        Simple selector
+      </IxTooltip>
 
-      <IxButton my-custom-special-selector="any-value">Also hover me</IxButton>
-      <IxTooltip for="[my-custom-special-selector='any-value']">
+      <IxButton
+        my-custom-special-selector="any-value"
+        aria-describedby="tooltip-2"
+      >
+        Also hover me
+      </IxButton>
+      <IxTooltip id="tooltip-2" for="[my-custom-special-selector='any-value']">
         Custom selector
       </IxTooltip>
     </div>

diff --git a/packages/vue-test-app/src/preview-examples/tooltip.vue b/packages/vue-test-app/src/preview-examples/tooltip.vue
@@ -13,13 +13,13 @@ import { IxButton, IxTooltip } from '@siemens/ix-vue';
 
 <template>
   <div :style="{ padding: '4rem' }">
-    <IxButton class="any-class" :style="{ 'margin-right': '4rem' }">
+    <IxButton class="any-class" aria-describedby="tooltip-1">
       Hover me
     </IxButton>
-    <IxTooltip for=".any-class">Simple selector</IxTooltip>
+    <IxTooltip id="tooltip-1" for=".any-class">Simple selector</IxTooltip>
 
-    <IxButton my-custom-special-selector="any-value">Also hover me</IxButton>
-    <IxTooltip for="[my-custom-special-selector='any-value']">
+    <IxButton my-custom-special-selector="any-value" aria-describedby="tooltip-2">Also hover me</IxButton>
+    <IxTooltip id="tooltip-2" for="[my-custom-special-selector='any-value']">
       Custom selector
     </IxTooltip>
   </div>