refactor: support clearing tooltip ariaTarget by setting null (#10039)

Author: web-padawan

packages/rich-text-editor/src/vaadin-rich-text-editor-mixin.js

@@ -412,9 +412,9 @@ export const RichTextEditorMixin = (superClass) =>
       // Set up tooltip to show when hovering or focusing toolbar buttons
       this._tooltip = document.createElement('vaadin-tooltip');
       this._tooltip.slot = 'tooltip';
-      // Create dummy aria target, as toolbar buttons already have aria-label, and also cannot be linked with the
-      // tooltip being in the light DOM
-      this._tooltip.ariaTarget = document.createElement('div');
+      // Set ariaTarget to null, as toolbar buttons already have aria-label,
+      // and also cannot be linked with the tooltip being in the light DOM
+      this._tooltip.ariaTarget = null;
       this.append(this._tooltip);
 
       const buttons = this.shadowRoot.querySelectorAll('[part~="toolbar-button"]');

packages/tooltip/src/vaadin-tooltip-mixin.d.ts

@@ -22,7 +22,7 @@ export declare class TooltipMixinClass {
    * attribute. Supports array of multiple elements.
    * When not set, defaults to `target`.
    */
-  ariaTarget: HTMLElement | HTMLElement[] | undefined;
+  ariaTarget: HTMLElement | HTMLElement[] | null | undefined;
 
   /**
    * Object with properties passed to `generator` and

packages/tooltip/src/vaadin-tooltip-mixin.js

@@ -675,7 +675,7 @@ export const TooltipMixin = (superClass) =>
     __computeAriaTarget(ariaTarget, target) {
       const isElementNode = (el) => el && el.nodeType === Node.ELEMENT_NODE;
       const isAriaTargetSet = Array.isArray(ariaTarget) ? ariaTarget.some(isElementNode) : ariaTarget;
-      return isAriaTargetSet ? ariaTarget : target;
+      return ariaTarget === null || isAriaTargetSet ? ariaTarget : target;
     }
 
     /** @private */

packages/tooltip/test/tooltip.test.js

@@ -218,18 +218,30 @@ describe('vaadin-tooltip', () => {
       expect(ariaTarget.getAttribute('aria-describedby')).to.equal(contentNode.id);
     });
 
-    it('should remove aria-describedby when the ariaTarget is cleared', async () => {
+    it('should remove aria-describedby and set it on the target when ariaTarget is set to undefined', async () => {
       tooltip.target = target;
       tooltip.ariaTarget = ariaTarget;
       await nextUpdate(tooltip);
 
-      tooltip.ariaTarget = null;
+      tooltip.ariaTarget = undefined;
       await nextUpdate(tooltip);
 
       expect(ariaTarget.hasAttribute('aria-describedby')).to.be.false;
       expect(target.getAttribute('aria-describedby')).to.equal(contentNode.id);
     });
 
+    it('should remove aria-describedby and not set it on the target when ariaTarget is set to null', async () => {
+      tooltip.target = target;
+      tooltip.ariaTarget = ariaTarget;
+      await nextUpdate(tooltip);
+
+      tooltip.ariaTarget = null;
+      await nextUpdate(tooltip);
+
+      expect(ariaTarget.hasAttribute('aria-describedby')).to.be.false;
+      expect(target.hasAttribute('aria-describedby')).to.be.false;
+    });
+
     it('should set aria-describedby when providing multiple elements', async () => {
       const ariaTarget2 = document.createElement('button');
       target.appendChild(ariaTarget2);

packages/tooltip/test/typings/tooltip.types.ts

@@ -13,7 +13,7 @@ assertType<ThemePropertyMixinClass>(tooltip);
 
 // Properties
 assertType<string | undefined>(tooltip.for);
-assertType<HTMLElement | HTMLElement[] | undefined>(tooltip.ariaTarget);
+assertType<HTMLElement | HTMLElement[] | null | undefined>(tooltip.ariaTarget);
 assertType<HTMLElement | undefined>(tooltip.target);
 assertType<string | null | undefined>(tooltip.text);
 assertType<Record<string, unknown>>(tooltip.context);