react-feather Feature Request: Accessibility improvement / tooltip support

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

-tag inside the <svg> 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 <img>-tags in the HTML standard) to set the alternative text for the icons. <p>If the user does not specify the alt attribute, the icon should render as it always has to make sure it's backward compatible.</p> <p>If the alt attribute is specified, I imagine that using, for example, the File icon like this:</p> <p><code><File alt="Navigate to report" /></code></p> <p>should produce HTML along the following, the change being the </p><title>-tag inserted: <pre><code><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> </code></pre> <p>This will allow Chrome to display a tooltip when you mouse over the icon, just like the alt text of img tags: <img src="https://user-images.githubusercontent.com/1143814/89122580-7766e080-d4c8-11ea-9652-ace922a02d7c.png" alt="image"></p> <p>Do you think this sounds like a reasonable change?</p>

Aug 02 '20 12:08 nitelite

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>.

Nov 12 '20 16:11 MoltenCoffee

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

Jul 02 '21 14:07 rupeshbhatti

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.

Jul 02 '21 15:07 MoltenCoffee

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)

Jul 05 '21 10:07 rupeshbhatti

That might be a problem indeed.

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

https://github.com/feathericons/react-feather/blob/c9698fa53e4bd577cdeffce18b054b97a3d765fc/src/index.d.ts#L4-L7

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

Jul 05 '21 12:07 MoltenCoffee

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

Jul 05 '21 13:07 rupeshbhatti

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

Jun 23 '23 06:06 ikapoura