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

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.

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