[ux-icons] title attribute to handle differently

[Nayte91]

Hello all,

Let's consider a random icon with a title attribute:

<twig:UX:Icon name="foo" title="Hello!" />

It will render with a correct title attribute, but nothing will happen on your browser.

The reason is that using a title attribute seems to be discouraged by W3C, for SVGs but also any other HTML elements.

On the SVG side, the best practice is to use a title tag at the beginning of the svg tag content. That's for example what font awesome do, here's a random icon rendering when I put a title="whatever" in the i tag:

<svg class="svg-inline--fa fa-star" data-replay-favorite-target="icon" aria-labelledby="svg-inline--fa-title-GKRKa00WHbm5" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><title id="svg-inline--fa-title-GKRKa00WHbm5">Whatever</title><path fill="currentColor" d="M316.9 svg stuff"></path></svg>
<!-- <i class="fa-solid fa-star" title="Whatever" data-replay-favorite-target="icon"></i> Font Awesome fontawesome.com -->

And this title is correctly displayed on browser.

So it seems that the iconRenderer should process the title attribute a bit differently than the other ones, by prepending a <title>$value</title> element inside the rendered SVGs, otherwise it will not work/shoot in the foot of accessibility.

[smnandre]

For now we only touch the attributes and not the content of the SVG.

In term of accessibility, depending on your usage of icons, aria-hidden / aria-label are both great solutions too.

[smnandre]

If we start to handle title, we then will handle paths, or styles, or comments... and that will slow down terribly the performances for everyone.

[smnandre]

(sorry if i answer too quickly, i have a lot to do 😅 )

[kbond]

I was not aware of the <title> tag. Is it handled the same as the aria-label attribute? If so, I would prefer this over adding content for the perf reasons Simon mentioned.

The reason is that using a title attribute seems to be discouraged by W3C, for SVGs but also any other HTML elements.

@smnandre, I thought we convert title to aria-label?

[Nayte91]

I checked on the documentation, and there is no mention of title attribute; So I feel like you are right, and the library should not alter how any random attribute should or should not be used.

There is a mention of the title attribute in here: why for?

I feel like it's a non issue here. If this mention is coherent, then we can close this one.

[kbond]

and the library should not alter how any random attribute should or should not be used.

Good point.

I thought we convert title to aria-label?

And probably why we didn't do this.

There is a mention of the title attribute in here: why for?

I think if someone was using the title attribute, we don't want to render aria-hidden.

[smnandre]

Yep !

[kbond]

@Nayte91, if you don't feel this issue is sufficiently resolved, ping me and I'll reopen.

[smnandre]

@smnandre, I thought we convert title to aria-label?

Nope in the end we said "don't switch attributes from the user" ... we can add one or set a value, but as soon as we switch some, this will be a mess :)