ESlint jsx-a11y/anchor-is-valid warning

Question

ESlint seems to be very clear; it wants a valid link to be used inside the anchor tag. But I want to use it this way and I don't want to replace this anchor with a button or something else.

Also, the warning is not persistent. Sometimes it disappears. What I want to know is why is this happening? What is wrong with using an anchor without a reference actually ?

Warning comes from the following piece of code.

 <a
   key={randKey}
   className="list-icons-item"
   data-action={this.props.headerElements[i]}>
 </a>

How can I disable this warning or what is the best practice ?

Answer 1

The question poses a simple example of a complex problem. If the intent of the code is to focus this.props.headerElements[i] , then give this.props.headerElements[i] an ID and reference that id in the href of the link. Let the default behavior do its job. No further script logic is required.

If there is no navigation involved, then, as @Andy points out, the anchor is not suitable. Use a button as the documentation for the rule emphatically recommends.

When a control looks like a link and navigates off the page or changes focus on the page , a link is the semantically correct choice, per WAI ARIA specifications . If what you need to focus will be shown as part of your click handler logic, then you may find the ESlint jsx-a11y anchor-is-valid warning counterproductive. In that case, you are best served using an anchor with explicit role and tabindex attributes and suppressing the rule or turning it off in your .eslintrc file as @Andy also mentions above.

<a
   role="link"
   tabIndex="0"
   key={randKey}
   className="list-icons-item"
   data-action={this.props.headerElements[i]}>

There are costs when semantics diverge from appearance. Consider a blind user calling your web application's help desk and being directed to click a link but hearing only a button announced in the screen reader. Consider a user who has only partial sight encountering a control which looks like a link and functions like a link but is marked up as a button. The user will hear one thing announced in the screen reader and see something else.

These trade offs need to be considered early in life cycle of your project so you can be consistent with your treatment throughout your application.