Add `aria-label` in addition to the `alt` prop about react

[rektdeckard]

Noted! Though, as our library docs mention, any and all valid SVG attributes you add to an icon will be applied to the rendered DOM node, so the real solution for you to just add that attribute to the icon yourself. Our title fix was specifically a convenience to address <svg> elements not respecting this attribute in the same way that HTML elements do, IE will not show a native tooltip on hover.

<House size={32} aria-label="An icon of a house" />

This will do you right. If you want both a tooltip and aria-label, add both, using alt for the title. Working example.

[rektdeckard]

That's a good shout-out. We'll add this to the upcoming 2.0 release. Thanks @brandonleboeuf!

[brandonleboeuf]

Thank you!

I think having the alt prop makes it feel like an <img> rather than an<svg> element, which would also make me think that the alt text would be all that's needed vs adding the aria-label?

It would be nice to have aria-label? added to Props section of the readme.md so that it eliminates that confusion since the docs currently state that the alt prop will "add accessible alt text to an icon".

[rektdeckard]

This is good by me 👍

[rektdeckard]

Wait, it looks like this attribute is for use when the element is labeled by visible text, which is not the case with icons. Are you sure there is an accessibility concern? I am pretty sure the <title> element achieves the desired effect for screen readers.

[brandonleboeuf]

Good catch @rektdeckard ! I did mean aria-label, not aria-labelledby.

It is needed, as the icons are currently being skipped by the screen reader, even when there is something passed via the phosphor alt prop. As a work around, I have been adding a wrapper div with the aria-label around any phosphor icon that needs to be read by the screen reader.

From MDN on the title not being read by screen readers: "Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an aria-labelledby attribute rather than using the <title> element."

Though, looking at aria-labelledby, it does state to use aria-label instead if there is no visible text to reference, as you pointed out.

[benface]

I am a bit confused by the resolution here. What is the point of the alt prop if it's not to provide an accessible label to screen readers? 🤔 I feel pretty strongly that it should set aria-label on the <svg>, not a <title> (which is accessible in some browsers but not all, e.g. Safari based on my tests). Would you please reconsider @rektdeckard? 🙏 Happy to submit a PR.