feathericons / feathericons/react-feather

Feature Request: Accessibility improvement / tooltip support

Open
#67 9 comments 9 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2k
Forks
124
PR merge metrics
No merged PRs in 30d

Description

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.

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




```

This will allow Chrome to display a tooltip when you mouse over the icon, just like the alt text of img tags:
![image](https://user-images.githubusercontent.com/1143814/89122580-7766e080-d4c8-11ea-9652-ace922a02d7c.png)

Do you think this sounds like a reasonable change?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.