Eslint-plugin-jsx-a11y: Discussion: Anchor is valid rule used in Create React App

Created on 2 Oct 2018 · 5Comments · Source: jsx-eslint/eslint-plugin-jsx-a11y

From a discussion I had with @gaearon.

Currently this rule is activated in Create React App. Which does a lot of good. However, due to the reach of the CLI tool it can sometimes cause confusion for developers who want to upgrade to newer versions. Developers lacking the a11y knowledge who suddenly get confronted by new errors on the console.

For example: https://github.com/facebook/create-react-app/issues/4141

I want to make a PR proposal to update the docs and, possibly, the error message of this rule to assist these developers to easily find the information in question.

But first I want to know how you feel about such a change.

Consider the situation where a developer HAS to have a clickable thing look like an anchor due to design forced upon them, would it be OK to add a paragraph in the docs on how to style a button to look like a link? I know that ideally we would not want that but what is happening now is that developers facing this situation just suppress the rule. Where instead a button element styled as a link would be a large improvement already instead of an anchor without an href.

Also the PR would suggested to change the error message of the noHref aspect to something along the lines of:
"The href attribute requires a valid value for the link to be keyboard accessible. Provide a valid, navigable address as the href value. Alternatively, change it to a

documentation help wanted

Source

AlmeroSteyn

Most helpful comment

I think better documentation is always better, and as long as they stress very heavily that such designs are subpar (giving devs ample ability to push back on design with an authoritative reference), providing instructions of how to have proper semantic elements with the aesthetics they’re required to impose seems like a much better outcome than having them disable the rule.