haiilo/catalyst

A11y - cat-tooltip on cat-icon

Closed this issue · 1 comments

klui commented

We are trying to achieve the following:
image

The code is looking like
<cat-tooltip [content]="'RESULT.FILTERS.DATE_RANGE.HELPER' | translate" placement="right" size="s"> <cat-icon icon="question-mark-circle-outlined" size="s" ></cat-icon> </cat-tooltip>

In the example above screenreaders completely ignore the icon and tooltip, so the info goes unnoticed by the user.
Adding a a11yLabel to the icon results in both the icon text and the cat-tooltip text to be read aloud, which are essentially the same.

Bildschirmaufnahme.2023-11-16.um.12.28.43.mov

I haven't found a way to get it read only once (except using the first version, and adding an additional text with class="cat-visually-hidden" below the actual tooltip.

What would be the way to go here?

I also tried using a cat-button, but this will first read the 'button a11yLabel' to the user and then only on interaction read the tooltip.

fynnfeldpausch commented

Hey Luise,

I have looked into it a bit and it is way more tricky than expected. The reason for all the mess is once again ShadowDOM and an open issue in the HTML spec. Problem is that ARIA references (such as describedby or labeledby) are references by ID, and those are not able to traverse ShadowDOM. Thus, all the describedby references we are setting via the tooltip are not (and never have been) working. There is no solution to this right now.

The most common workaround right now is to add an aria-live section, so that the tooltip is at least read out by the screen reader on focus. Not ideal, but the best we can do. I will / have now implemented this behaviour for our tooltips. This does not help with your problem though.

But I also tested your code and it is only read once by the screenreader for me if I use an aria label. Maybe it is related to the recent changes. So once a new version is built, I would highly appreciate if you could test it again. The code I am using right now is this:

<cat-tooltip content="This is a hint">
  <cat-icon icon="sparkle-filled" a11y-label="This is a hint"></cat-icon>
</cat-tooltip>
  • 👍1