Activate more a11y checks in ESLINT: Proposal

Created by: AlmeroSteyn

The plugin eslint-plugin-jsx-a11y is already loaded in the create-react-app configuration. Currently, only a number of rules have been activated by default.

The rules can be found here: https://github.com/evcohen/eslint-plugin-jsx-a11y

The purpose of this issue is to determine if more rules may be activated by default to assist with creating more accessible JSX.

Another request is if we can upgrade the version of the plugin to 4.0.0.

I have had a look at the rules available in the plugin and will propose which rules I think can be activated by default with no impact on current applications where no gross HTML errors exist, which rules should be activated but will require some effort on the part of the developer and which rules could be too disruptive if switched on at once.

Important to note that this does not reflect on the importance of the rules. They should really all be on but considering the nature of create-react-app and its prolific use some rules could have too much of an impact. Considering that these rules can still be activated to report in the IDE's by using the method described in the docs, developers are still able to make use of a more strict configuration should they need to.

The following rules are already enabled: 'jsx-a11y/aria-role' 'jsx-a11y/img-has-alt' - Changed to 'jsx-a11y/alt-text': Slightly larger impact than previous but easy fixes and users already used to this activated in CRA 'jsx-a11y/img-redundant-alt' 'jsx-a11y/no-access-key'

I believe that the following rules can be enabled without causing any untoward impact on existing applications. They will only report where there are gross HTML/ARIA misuse:

The following are only checked when ARIA is used and therefore only impact if a11y is already in scope 'jsx-a11y/aria-activedescendant-has-tabindex' 'jsx-a11y/aria-props' 'jsx-a11y/aria-proptypes' 'jsx-a11y/aria-unsupported-elements' 'jsx-a11y/role-has-required-aria-props' - as 'jsx-a11y/aria-role' is already applied 'jsx-a11y/role-supports-aria-props' 'jsx-a11y/scope'

Only triggers when the element is actually empty or ARIA is applied wrongly 'jsx-a11y/heading-has-content' 'jsx-a11y/anchor-has-content'

Other 'jsx-a11y/no-distracting-elements' 'jsx-a11y/no-redundant-roles'

The following rules should really be on but will require some developer interaction in many cases. But the fixes are relatively easy: 'jsx-a11y/accessible-emoji' - All emojis should be in a <span> with appropriate role. 'jsx-a11y/href-no-hash' - All anchors should have a proper target href. Could however have a large impact in apps where anchors are used as buttons. 'jsx-a11y/html-has-lang' - HTML page should have a language attribute. Very important to have but the html file falls outside the scope of ESLINT. 'jsx-a11y/iframe-has-title' - IFrames should have a title attribites. Very easy fix and incredibly helpful 'jsx-a11y/no-autofocus' - Autofocus should not be used. This is even flagged by the W3C. However apps heavily leaning on autofocus could have a hard time removing it. 'jsx-a11y/onclick-has-role' - Elements with an onClick event should have a role. Adding a role is an easy fix to mitigate a bigger problem. - Rule Removed 'jsx-a11y/tabindex-no-positive' - Tabindexes higher than zero should not be used. Removing this is easy, however apps leaning on this could break visually. 'jsx-a11y/interactive-supports-focus'- New Rule: Any clickable elements should be in the keyboard focus flow 'jsx-a11y/no-interactive-element-to-noninteractive-role' - New Rule: Although user is already busy with ARIA roles, they can be copied and pasted from examples such as bootstrap and cause warnings that require HTHML changes.

The following rules, although very helpful and important will probably add too much difficulty to fix, expecially if activated on existing projects: 'jsx-a11y/click-events-have-key-events', 'jsx-a11y/mouse-events-have-key-events' - Click and mouse events should have keyboard counterparts. However sometimes it is also possible to solve this on other elements contained in the element in question which seems not be taken into account by the metric. 'jsx-a11y/label-has-for' - All labels should be accessibly linked to form controls. Very VERY important but currently does not support implicit labelling so could be wrongly blocking. Will log an issue on the plugin. 'jsx-a11y/no-onchange' - Select boxes should not trigger a change of context with an onchange. Handy but too restrictive for all uses of select. 'jsx-a11y/no-static-element-interactions' - Divs should ideally not be clickable. Whereas this is very good to have the anti-pattern is too prolific to fail builds on. 'jsx-a11y/no-noninteractive-element-interaction' - New rule: Important check for non-interactive elements having interactions. Whereas this is very good to have the anti-pattern is too prolific to fail builds on. 'jsx-a11y/media-has-caption' - New Rule: Captions should be provided for media. Will required a lot of work on existing if not present 'jsx-a11y/no-noninteractive-tabindex'- New Rule: Due to rule config this can be hard to manage in a no config environment 'jsx-a11y/no-noninteractive-element-interactions' - New Rule: Whereas this is very good to have the anti-pattern is too prolific to fail builds on.

What are your opinions in this matter?

If we do extend the config, perhaps this could be highlighted a bit in the docs? Would be happy to submit a proposal for a doc section/page.

@evcohen, would love to hear your view on this if you have time? Would be much appreciated.