fix(web-components): remove tooltip id from target’s aria-describedby attribute when the t… (#36241)

Author: marchbox

change/@fluentui-web-components-a2f01802-9f4b-483a-b2f1-b32511fd368c.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "remove tooltip id from target’s aria-describedby attribute when the tooltip is removed from DOM",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/tooltip/tooltip.spec.ts

@@ -71,6 +71,45 @@ test.describe('Tooltip', () => {
     await expect(button).toHaveAttribute('aria-describedby', id);
   });
 
+  test('should remove the tooltip id from `aria-describedby` attribute when tooltip is removed', async ({
+    fastPage,
+  }) => {
+    const { element, page } = fastPage;
+    const button = page.locator('button');
+
+    await fastPage.setTemplate(/* html */ `
+      <div style="position: absolute; inset: 200px">
+        <button id="target">Target</button>
+        <${tagName} anchor="target">This is a tooltip</${tagName}>
+        <${tagName} anchor="target">This is another tooltip</${tagName}>
+      </div>
+    `);
+
+    const id1 = await element.nth(0).evaluate((node: Tooltip) => node.id);
+    const id2 = await element.nth(1).evaluate((node: Tooltip) => node.id);
+
+    await expect(button).toHaveAttribute('aria-describedby', [id1, id2].join(' '));
+
+    await element.nth(0).evaluate(node => {
+      node.remove();
+    });
+
+    await expect(button).toHaveAttribute('aria-describedby', id2);
+
+    await button.evaluate(
+      (node, [tagName, id]) => {
+        const tooltip = document.createElement(tagName);
+        tooltip.id = id;
+        tooltip.setAttribute('anchor', 'target');
+        tooltip.textContent = 'New tooltip';
+        node.after(tooltip);
+      },
+      [tagName, id1],
+    );
+
+    await expect(button).toHaveAttribute('aria-describedby', [id2, id1].join(' '));
+  });
+
   test('should not be visible by default', async ({ fastPage }) => {
     const { element } = fastPage;
 

packages/web-components/src/tooltip/tooltip.ts

@@ -115,11 +115,25 @@ export class Tooltip extends FASTElement {
   }
 
   public disconnectedCallback(): void {
-    super.disconnectedCallback();
     this.anchorElement?.removeEventListener('focus', this.focusAnchorHandler);
     this.anchorElement?.removeEventListener('blur', this.blurAnchorHandler);
     this.anchorElement?.removeEventListener('mouseenter', this.mouseenterAnchorHandler);
     this.anchorElement?.removeEventListener('mouseleave', this.mouseleaveAnchorHandler);
+
+    if (this.anchorElement) {
+      const describedBy = this.anchorElement.getAttribute('aria-describedby') ?? '';
+      const ids = describedBy
+        .trim()
+        .split(/\s+/)
+        .filter(id => id !== this.id);
+      if (ids.length) {
+        this.anchorElement.setAttribute('aria-describedby', ids.join(' '));
+      } else {
+        this.anchorElement.removeAttribute('aria-describedby');
+      }
+    }
+
+    super.disconnectedCallback();
   }
 
   /**