search

danawoodman / react-fontawesome

A React Font Awesome component.
https://www.npmjs.com/package/react-fontawesome
MIT License
668 stars 72 forks source link

AriaLabel Prop is Effectively Broken #61

Closed JustinNusca closed 4 years ago

JustinNusca commented 6 years ago

React-fontawesome provides an ariaLabel prop, which provides a fallback label for the visual icon that screenreaders should announce (instead of the unicode character that is rendered).

The current implementation attempts to accomplish this by adding a visually hidden <span> for screenreaders will find and read.

This does not work, however, as said span is nested within a parent element that has a non-configurable aria-hidden attribute on it. As aria-hidden hides the element and all of its contents from screenreaders, this visually hidden span will never be found.

This can be seen by running a project that uses react-fontawesome, turning on a screenreader (on macOS, this can be done by pressing command + F5 to turn on Voiceover) and navigating through page content to reach instances of this component’s usage (eg. If using Voiceover, pressing tab or ctrl + alt + ←/→).

JustinNusca commented 6 years ago

In case you don't mind PRs, I've opened one that should address this issue, by removing hidden span in favour of using an actual aria-label attribute on the parent element.

danawoodman commented 6 years ago

@JustinNusca I'm terrible. So sorry for the looooooong delay here. Was a combination of me being out of the country and then playing catchup. Anyways... I'm going to look at this within the next week and try and merge it in. I've been meaning to do a cleanup anyways and this would be a good opportunity. Thanks for your patience

roblevintennis commented 4 years ago

Any updates on this one @danawoodman ?

danawoodman commented 4 years ago

@JustinNusca @roblevintennis the PR for this was merged a while back in v1.7.0, sorry should have closed this earlier!