Feature Request: Accessibility improvement / tooltip support

[nitelite]

I have been using react-feather for a lot of my internal administration apps over the last year or so. It's very straight forward to work with and works well on all the devices that I develop for. Lately, we have been doing an accessibility audit on some of the applications and one of the things came up is the fact that when icons are used as "buttons" they are missing "alt text" / helpful info on what will happen.

I have been reading up on what seems to be the common way to achieve this with the inline SVGs as those react-feather produces. The most common option seems to be using a <title>-tag inside the element with the alt text that you want to show. I would love it if it was possible to set the "alt" attribute (like that used for

If the user does not specify the alt attribute, the icon should render as it always has to make sure it's backward compatible.

If the alt attribute is specified, I imagine that using, for example, the File icon like this:

<File alt="Navigate to report" />

should produce HTML along the following, the change being the <title>-tag inserted:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <title>Navigate to report</title>
    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
    <polyline points="14 2 14 8 20 8"></polyline>
    <line x1="16" y1="13" x2="8" y2="13"></line>
    <line x1="16" y1="17" x2="8" y2="17"></line>
    <polyline points="10 9 9 9 8 9"></polyline>
</svg>

This will allow Chrome to display a tooltip when you mouse over the icon, just like the alt text of img tags:

Do you think this sounds like a reasonable change?

[MoltenCoffee]

I'd also be a big supporter of this!

An option would also be to allow passing children props to icons, enabling one to pass both <title> and <desc>.

[rupeshbhatti]

Is it possible to confirm if support for title / desc / aria-labelledby is planned? We have started using react-feather-icons but as a11y is a hard requirement for us; without this we may have to explore other accessible versions instead. Be grateful for any info / guidance on this

[MoltenCoffee]

I believe attributes such as aria-labelledby, title etc already work, as additional props just get passed to the SVG element:

import { Trash } from "react-feather";

const Component = () => {
  return (
    <Trash title="Delete" />
  );
};

Additional child elements don't, however.

[rupeshbhatti]

I'm using TS in my project, trying the above gives: Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & IconProps & { children?: ReactNode; }'. Property 'title' does not exist on type 'IntrinsicAttributes & IconProps & { children?: ReactNode; }'.ts(2322)

[MoltenCoffee]

That might be a problem indeed.

The list of allowed attributes and types can be found here:

react-feather/src/index.d.ts

Lines 4 to 7 in c9698fa

	export interface IconProps extends SVGAttributes<SVGElement> {
	color?: string;
	size?: string | number;
	}

and here:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/1349b640d4d07f40aa7c1c6931f18e3fbf667f3a/types/react/index.d.ts#L2341-L2607

Unfortunately, this library doesn't seem to be actively maintained, so if you want a response you might try the fork, Lucide Icons

[rupeshbhatti]

I dug into the above types some more. The type of IconProps extends SVGAttributes<SVGElement> and SVGAttributes in turn extends AriaAttributes. Therefore can use aria-label instead. I'm hoping this will suffice in the meantime but not totally sure of the impact of using aria-label in this way instead of title / desc

[ikapoura]

Another way I added a tooltip to those icons is by wrapping them in a <span title="tooltip-text"><Icon /></span>.

[damariis13]

In case you're here wondering how to add the tooltip-text, I did what Ikapoura suggested, I added a span wrapping my icon component like here:

<span title="Edit">
     <Pencil className="cursor-pointer hover:text-green-500" />
</span>

[thom4parisot]

I confirm @rupeshbhatti suggestion, an accessible way to do is to add directly an aria-label HTML attribute to the icon:

import { Trash } from "react-feather";

const Component = () => {
  return (
    <Trash aria-label="Delete" />
  );
};

The label is attached to the graphic element by the screen reader, which is what we expect:

In other aforementioned solutions, a label is added but the graphic element itself is still considered as not being described/labed.