[Feature Request] Accessibility Improvement / Tooltip Support

[veeru153]

I shifted to Lucide from Feather after having no way to add tooltips directly. A similar issue (https://github.com/feathericons/react-feather/issues/67) exists for Feather which references this project but I didn't see any request or any implementation here yet. The gist of this issue/request is the ability to add alternative text like this:

<Icon alt="Navigate to Report" />

This would allow browsers to display a tooltip when you hover the cursor over the icon like this:

The linked issue goes into more detail. The icons work really well as buttons and this addition could improve the accessibility of the websites using these icons directly.

[ericfennis]

@veeru153 Thanks for opening. Is <Icon title="Delete" /> not working mentioned in that issue?

[veeru153]

Thank you for the quick response.

No this does not work. After some devtooling, the reason seems to be that when we add a title prop to the icon, it gets passed as an attribute to the SVG element like this:

<svg ... title="Delete">...</svg>

In order to render the tooltip, the text should be a Title element nested inside the SVG element like this:

<svg ...>
  <title>Delete</title>
  ...
</svg>

[ericfennis]

@veeru153 Allrighty I get it. Also read some more about it. It is also good to increase accessibility.

My proposal to accomplish this, is that we make it possible to pass children in icons. That creates also new possibilities to render something "over" the icon. This also keeps it really flexible and easy to implement.

Example title and description

<Icon>
  <title>My awesome text</title>
  <desc>More detailed description about the icon</desc>
</Icon>

Example rendering something over the icon, for example amount of items.

<ShoppingCart>
  <text>5</text>
</ShoppingCart>

[veeru153]

Ooh yes! While this is different from the traditional image alt attribute, this seems to be a better approach for the reasons you mentioned. I am assuming this would allow nesting icons inside icons too? Something like:

<Book>
  <Code />
</Book>

[ericfennis]

@veeru153 Yess correct!

[ericfennis]

Wanted to release this feature, but with a final test it doesn't work as expected. I tested it wrong before, I tested it by using the browser inspector and changed the position of the title element below the children in the DOM. That worked for some reason, the tooltip showed when hovering. A bit stupid but lesson learned, always test on initial render. So @veeru153 you were right, <title> and <desc> need to be placed before the children to make it work.

Here a test environment: https://codesandbox.io/s/tooltip-does-not-work-5jjh2e?file=/App.svelte

TLDR: Current implementation doesn't work, we need to have a new solution.

[TheodorRene]

So there is currently no way to make the icons accessible to screen readers?

[tommy4st]

So there is currently no way to make the icons accessible to screen readers?

It's actually possible by using the aria attributes. For example, you can use aria-label instead of alt or for decorative icons you can use aria-hidden. But I would still prefer to set the alt attribute.

[eloiqs]

@tommy4st Can you share the aria-label solution you mentionned? I just came from reading this article and they don't seem to mention aria-label as an option. They mostly refer to title, desc, aria-labelledby, and role="image". I'm currious if you tested it with screen-readers?

@ericfennis I'm a bit confused about that statement:

So @veeru153 you were right,

Currently if we pass a