Tooltip has some accessibility/screenreader issues around reading content

[ynotdraw]

Describe the bug

Hi 👋 ! First off, thanks a bunch for your work here - it's really great. I noticed a few a11y issues with sl-tooltip that I wanted to run by you. I figured I'd lump these into one issue since they're semi-related, but if you prefer separate, let me know and I can split them out.

Issue 1

When focusing an element that is wrapped with an sl-tooltip, the tooltip content is read twice by screenreaders.

The reason this happens is outlined by https://github.com/shoelace-style/shoelace/blob/next/src/components/tooltip/tooltip.component.ts#L244-L249. I'm mostly wondering if there are any plans to migrate to aria-describedby or aria-labelledby as mentioned in the comment? I understand there are some positioning issues when doing so, but I'm curious if this was a short-term tradeoff at the time? From what I understand, this is an item that would be brought up during an accessibility audit by the auditors.

Issue 2

Not being able to provide an id to tooltip that ultimately gets set on the content that consumers can reference is a bit problematic as well. For example, when building a custom form element with sl-tooltip, the content is not accessible to screenreaders when a user focuses the input element. This is normally accomplished by setting an id on the tooltip and then using that same id for aria-describedby on the input. I have a few workarounds in mind, but I was curious about your thoughts. Does this make sense to add? I'd be happy to contribute if it makes sense!

To Reproduce

Issue 1

Steps to reproduce the behavior:

1. Go to https://shoelace.style/components/tooltip with Voice Over or another screenreader ON
2. TAB to the button
3. See/Hear the tooltip content being read twice

Issue 2

1. Go to https://codepen.io/ynotdraw/pen/ExMYjYd with Voice Over or another screenreader ON
2. TAB to the input
3. Notice that the tooltip content is not announced

To get the info announced, you can roll the mouse over the tooltip, which triggers aria-live; however, that's not available for screenreaders.

Additional information

https://github.com/shoelace-style/shoelace/assets/8069555/f7c98e0b-1b37-41cd-b21b-00263436d272

[KonnorRogers]

Related: https://github.com/shoelace-style/shoelace/issues/1712

Thank you for the report! We've definitely noticed some inconsistencies around <sl-tooltip> and it's accessibility with screen readers. I'm not sure currently what our plan of action is for a refactoring, but these issues are definitely on our radar!

[claviska]

I'm going to consolidate this with #1712 so we can tackle them together. Thanks for the additional information!