Icon - aria-hidden="true" applied when as="a" is specified

[jacknevitt]

Steps

<Icon
  name="point"
  as="a"
/>

OR

<Icon
  name="point"
  as="a"
  aria-hidden={false}
/>

<Icon
  name="point"
  as="a"
  aria-hidden="false"
/>

Expected Result

<a
  class="point icon"
>
</a>

Actual Result

<a
  aria-hidden="true"
  class="point icon"
>
</a>

Version

0.78.3

Testcase

https://codesandbox.io/s/qq2vr3x2qj

[fracmak]

This is an interesting problem, because there's no text content related to icons, they should be hidden, even if they are an anchor. What would probably be better is not to show aria-hidden if an aria-label is applied to the icon.

[jacknevitt]

I have recently learned that assistive technologies rely on aria attributes to explain to impaired users what the element does. As an anchor with no content used for an icon, an aria-label can be used to describe the link. Even with an aria-label, the aria-hidden is still true.
The attribute link can be applied but the icon still renders as an which provides no context to assistive technologies

[jacknevitt]

On mobile, sorry. *Renders as an <i>

[levithomason]

Looks like there is consensus on:

What would probably be better is not to show aria-hidden if an aria-label is applied to the icon.

PRs welcome!

[JakobJingleheimer]

I was actually coming to file an issue requesting a way to provide aria-label for icons so that they are not invisible to the blind, since they have real meaning. However, if aria-hidden is applied statically, it will not work.

I understand that i18n will need to be considered: We use react-intl, so we would want to do something like:

<Icon
    label={formatMessage({ id: 'icon.email' })}
    name="at"
/>

Yields

<i
    aria-label="email"
    class="icon at"
    title="email" // might as well help the sighted too whilst we're at it
></i>

[benbakhar]

Hey, would love to offer my help here. Just to make sure i understand the expected behaviour, the 'aria-hidden="true"' attribute should be applied unless aria-label attribute was passed.

[fracmak]

@benbakhar correct, I'm hesitant to recommend the label="" route because other components explicitly use aria-label and we should be consistent. It's also good documentation to place aria-label on a component so people reading it know what it's doing.