fix(tooltip): an attempt at fixing aria-describedby

[olaf-k]

Pull Request

📖 Description

This is an attempt at fixing the following:

1. updating the anchor's aria-describedby even when the attribute does not exist in the first place
2. updating the anchor's aria-describedby when the tooltip is disconnected
3. removing event handlers when the tooltip is disconnected
4. making screen readers pick up aria-describedby

🎫 Issues

4 is a fix for #6442

👩‍💻 Reviewer Notes

1 to 3 are straightforward and should not pose any issue hopefully.

to "solve" 4, moving aria-describedby to the custom element itself and adding role="button" seems to make the tooltip's text content picked up by screen readers.

Caveat:

• [minor] NVDA will indeed read the tooltip's content but will say "button" twice.
• [more annoying] VoiceOver picks up the tooltip's content but... hides it behind a unnecessarily complex UI:

once you press Control-Option-Command-Slash as instructed, you are presented with a list of additional data:

there is a Safari ticket that discusses the issue but nothing Fast can do at this point: it is a VO limitation.

✅ Checklist

General

• I have included a change request file using $ yarn change
• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have modified an existing component
• I have updated the definition file
• I have updated the configuration file

[chrisdholt]

This will have much more wide ranging effects when fixing this. If the proposal is to do this, which is certainly one thing which could be done, I would suggest a wholesale move to remove the internal button.

[olaf-k]

I thought about doing that but found it too extreme.
having a button inside a role="button" is not great though, I agree. what other "wide ranging effects" are you thinking of?

[janechu]

Closing this due to #6951. As mentioned by @chrisdholt this will have wide ranging effects I believe in how attributes are reflected on the host element from the template element, in the Fluent UI web components we are working on better accessibility solutions, since cross root aria is such an issue I believe our solution there is to have the developer put a <button> element into the default slot so that any aria attributes are exposed as part of the light DOM.