Add ARIA attribute to element that opens the Tooltip component

[julianguyen]

Description

In the Tooltip component (code), the element that opens the tooltip has an aria-labelledby attribute on it so that it can be associated with the element with role="tooltip". This element that opens the tooltip does not have a role itself. This will reduce the quality of the screen-reader experience.

This is a problem because the aria-labelledby attribute cannot be used on a div with no valid role attribute.

We don't want to assign a role to this div because it could contain an element of a different role. The ideal solution would be to add aria-labelledby={tooltipId} to the child that is rendered i.e. {Utils.renderContent(element)}.

---

Please assign yourself (via the Assignees dropdown), if you do want to work on this issue. Can't find yourself? You need to join our organization.

Check out our Picking Up Issues guide if you haven't already!

[ghost]

Hello, I would like to assign myself this issue

[julianguyen]

@PaxtonDevs Added you to our org! After accepting the invitation, you should be able to assign yourself to the issue.

[ghost]

Awesome, thank you!

[andomain]

Hi, if there is no further activity on this I'd like to contribute?

[a-camarillo]

Hi, I noticed this issue is still unresolved and would like to tackle it!

I took a look at [#2156] and suggest possibly breaking this issue up into two smaller issues depending on if we want to write custom functionality for rendering HTML as a React Element or use one of the other libraries recommended by the old react-render-html maintainers.

[reedjones]

Is this issue still unresolved? I'd like to contribute.