Eslint-plugin-jsx-a11y: control-has-associated-label false positive on link elements

Created on 11 Feb 2019  路  2Comments  路  Source: jsx-eslint/eslint-plugin-jsx-a11y

Greetings!

The website I am working on uses Next.js as a framework, and as such all html, including the page header, is defined in JSX. I've found that the rule control-has-associated-label is incorrectly flagging link elements in our header as interactive, and expecting labels.

For example:

<html lang="en">
  <NextHead>
    ...
    // ERROR: A control must be associated with a text label.
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/static/favicon/apple-touch-icon-120x120.png" /> 
    ...
  </NextHead>
  ...
</html>

I can get around this by adding "ignoreElements": ["link"], to my eslint config for now, but I don't think this should be default behavior.

Thanks for the great plugin btw 鉁岋笍

picture UncleClapton

Most helpful comment

@ljharb yes, me too. It's probably a bug in axobject-query.

@UncleClapton thank you for the report!

picture jessebeach on 11 Feb 2019
👍2 ❤1

All 2 comments

I'm also surprised to see link considered a form control.

ljharb picture ljharb on 11 Feb 2019

@ljharb yes, me too. It's probably a bug in axobject-query.

@UncleClapton thank you for the report!

jessebeach picture jessebeach on 11 Feb 2019
👍2 ❤1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

caub picture caub  路  14Comments
virtualstyle picture virtualstyle  路  15Comments
roman-holovin picture roman-holovin  路  23Comments
callumlocke picture callumlocke  路  23Comments
jessebeach picture jessebeach  路  14Comments