Eslint-plugin-jsx-a11y: no-static-element-interactions - false positive

[javaherian]

no-static-element-interactions correctly throws with the following code:

  <div styleName="container" onClick={this.props.onClick}>

But still fails once I add role="button"

  <div styleName="container" onClick={this.props.onClick} role="button">

According to https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md , it should succeed once I add the role attribute.

[jessebeach]

Thank you for the report. I'll look into it!

[jessebeach]

I reproduced it.

This passes.

{ code: '<input type="button" onClick={() => void 0} />' },

This fails

{ code: '<div styleName="container" onClick={this.props.onClick} role="button">' },

Looking into why.

[jessebeach]

@javaherian, is the tag closed correctly in your file?

[jessebeach]

@javaherian Also, what version of the plugin are you using?

[jessebeach]

{ code: '<div styleName="container" onClick={this.props.onClick} role="button">' },

Turns out this is an invalid template for testing. it needs to be closed. @javaherian I need some more info from you to proceed. Are you sure that the rule being triggered after you add role="button" isn't interactive-supports-focus?

[javaherian]

    <div styleName="container" onClick={this.props.onClick} role="button">
    </div>

fails with this error

99:9  error  Visible, non-interactive elements should not have mouse or keyboard event listeners  jsx-a11y/no-static-element-interactions

[javaherian]

@jessebeach I'm not sure how to find the version of the plugin

[jessebeach]

@javaherian no worries. If you look in the node_modules folder for your project, you'll find this plugin. Look in the package.json file for the version field. That path is probably:

./node_modules/eslint-plugin-jsx-a11y/package.json

[javaherian]

Cool. It's ver. 2.2.3

Dara

On 6 July 2017 at 01:54, J. Renée Beach [e-mail] wrote:

@javaherian https://github.com/javaherian no worries. If you look in
the node_modules folder for your project, you'll find this plugin. Look in
the package.json file for the version field. That path is probably:

./node_modules/eslint-plugin-jsx-a11y/package.json

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/272#issuecomment-313265810,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMh4_voh7S4Be6LnZfMSrjtwhOMUF-KVks5sLDBPgaJpZM4OFLSI
.

[javaherian]

Can you reproduce this issue?

Dara

On 6 July 2017 at 10:02, Dara Javaherian [e-mail] wrote:

Cool. It's ver. 2.2.3

Dara

On 6 July 2017 at 01:54, J. Renée Beach [e-mail] wrote:

@javaherian https://github.com/javaherian no worries. If you look in
the node_modules folder for your project, you'll find this plugin. Look in
the package.json file for the version field. That path is probably:

./node_modules/eslint-plugin-jsx-a11y/package.json

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/272#issuecomment-313265810,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AMh4_voh7S4Be6LnZfMSrjtwhOMUF-KVks5sLDBPgaJpZM4OFLSI
.

[johnpbloch]

I'm also experiencing this issue on v4.0.0. Here's the relevant code:

                        <div
                            className="select-tags"
                            onClick={this.toggleTagSelector}
                            role="button">
                            <select>
                                <option>Select Tags</option>
                            </select>
                            <div
                                className="over-select"
                                onClick={e => e.preventDefault()}
                                role="presentation">
                            </div>
                        </div>

And the error when I run ./node_modules/.bin/eslint --fix <path/to/script>:

  222:25  error    Visible, non-interactive elements should not have mouse or keyboard event listeners  jsx-a11y/no-static-element-interactions
  229:29  error    Visible, non-interactive elements should not have mouse or keyboard event listeners  jsx-a11y/no-static-element-interactions

[johnpbloch]

Upgrading to v5.1.1 resolved the issue, FWIW. There are now a lot more errors, but they seem to be true positives, rather than this issue, which was a false positive. :)

[johnpbloch]

😥 looks like ^5.0.0 isn't supported by the version of eslint-config-airbnb I'm using, so I can't upgrade this package past ^4.0.0 yet...

[jessebeach]

@johnpbloch bummer :( I'd recommend putting a suppression comment about the false positive and indicate in the comment that it should be removed once this dependency has moved past version 5.

https://stackoverflow.com/questions/27732209/turning-off-eslint-rule-for-a-specific-line

[jessebeach]

😥 looks like ^5.0.0 isn't supported by the version of eslint-config-airbnb I'm using, so I can't upgrade this package past ^4.0.0 yet...

That is a bummer :( This is personal preference of course...I don't like including configuration as a dependency. Config is often unique to a project. You could untethered your system from this dependency; just copy-paste the config into your system and then treat it as a local file from then on.

[ljharb]

Note that this hasn't been the case for awhile now; eslint-config-airbnb has supported v5 for awhile, and v16 of the config supports v6 of this plugin.