[Bug]: Tooltip causes Narrator to announce multiple times

[p15martin]

Component

Other...

Package version

3.0.0-beta.114

@microsoft/fast-element version

2.5.0

Environment

n/a

Current Behavior

When disconnectedCallback() is called on a Tooltip, it does not remove its id from the anchor element. As a result, every time the Tooltip is connected to the DOM and connectedCallback() is invoked, it appends its id to the anchor element again. This causes the anchor element to contain the same id multiple times, for example:

aria-describedby="tooltip-0 tooltip-0 tooltip-0 tooltip-0".

When Narrator announces the anchor element, it will do so four times in this example—once for each occurrence of the id.

The problem is aggravated when using the FAST repeat and when directives as you immediately get multiple ids.

Expected Behavior

The id should only occur once in aria-describedby so Narrator will only announce once.

Workaround:

export class Tooltip extends FluentTooltip { public disconnectedCallback(): void { super.disconnectedCallback();

if (this.#anchorElement) {
  const describedBy = this.#anchorElement.getAttribute('aria-describedby');

  if (describedBy) {
    const ids = describedBy.split(/\s+/).filter(id => id !== this.id);

    if (ids.length > 0) {
      this.#anchorElement.setAttribute('aria-describedby', ids.join(' '));
    } else {
      this.#anchorElement.removeAttribute('aria-describedby');
    }
  }
}

}

get #anchorElement(): HTMLElement | null { const rootNode = this.getRootNode(); return (rootNode instanceof ShadowRoot ? rootNode : document).getElementById(this.anchor ?? ''); } }

Reproduction

https://stackblitz.com/

Steps to reproduce

Ensure the tooltip gets connected multiple times to the DOM Enable Narrator

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] The provided reproduction is a minimal reproducible example of the bug.