You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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!
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!
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
oraria-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 withsl-tooltip
, the content is not accessible to screenreaders when a user focuses the input element. This is normally accomplished by setting anid
on the tooltip and then using that sameid
foraria-describedby
on theinput
. 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:
TAB
to the buttonIssue 2
TAB
to the inputTo 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
Screen.Recording.2023-12-20.at.12.00.52.PM.mov
The text was updated successfully, but these errors were encountered: