Icon link without text eslint error

Question

I have a React project that shows a bunch of social media links that are just icons to their respective sites. I use icomoon fonts and whatnot to provide the icon-* classes to show the social media icons.

The error I get, understandably, is:

Anchors must have content and the content must be accessible by a screen reader

What should I do in this scenario where I don't want anything but the icon and no text? I'm not sure how to properly do this so everyone's happy.

Edit

I didn't think code was necessary since it doesn't pertain to anything really.

Here's the mapping that spits out the links. As you can see, no text. Just font-icons for whatever social media site is being linked to:

{this.props.siteInfo.social.map(function(item, i){
    return <a key={i} className={`nav_item icon-${item.social_media_type}-square`} href={item.url} target="_blank" rel="noopener noreferrer"></a>
})}

Which results in:

<a key="0" class="nav_item icon-facebook-square" href="facebook.com/someprofile" target="_blank" rel="noopener noreferrer"></a>

Answer 1

I got the same problem and I solved it by just adding one white space

<a><i class="fa fa-phone" aria-hidden="true"></i> </a>