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?