[new] Add basic suggestions for interactive-supports-focus

Add basic support for ESlint rule suggestions for the `interactive-supports-focus` for tabIndex values when elements are interactive but do not have implicit focusable browser behaviour.
These are intentionally not auto-fix but simply optional suggestions to help developers resolve their issue.

Fixes jsx-eslint#952
See also jsx-eslint#951

Author: lb-

.npmrc

@@ -1,3 +1,3 @@
-package-lock=false
+# package-lock=false
 allow-same-version=true
 message=v%s

__tests__/src/rules/interactive-supports-focus-test.js

@@ -35,6 +35,7 @@ function template(strings, ...keys) {
 const ruleName = 'interactive-supports-focus';
 const type = 'JSXOpeningElement';
 const codeTemplate = template`<${0} role="${1}" ${2}={() => void 0} />`;
+const fixedTemplate = template`<${0} tabIndex={${1}} role="${2}" ${3}={() => void 0} />`;
 const tabindexTemplate = template`<${0} role="${1}" ${2}={() => void 0} tabIndex="0" />`;
 const tabbableTemplate = template`Elements with the '${0}' interactive role must be tabbable.`;
 const focusableTemplate = template`Elements with the '${0}' interactive role must be focusable.`;
@@ -47,7 +48,14 @@ const componentsSettings = {
   },
 };
 
-const buttonError = { message: tabbableTemplate('button'), type };
+const buttonError = {
+  message: tabbableTemplate('button'),
+  suggestions: [{
+    desc: 'Add `tabIndex={0}` to make the element focusable in sequential keyboard navigation.',
+    output: '<Div tabIndex={0} onClick={() => void 0} role="button" />',
+  }],
+  type,
+};
 
 const recommendedOptions = configs.recommended.rules[`jsx-a11y/${ruleName}`][1] || {};
 
@@ -202,6 +210,13 @@ const failReducer = (roles, handlers, messageTemplate) => (
         errors: [{
           type,
           message: messageTemplate(role),
+          suggestions: [{
+            desc: 'Add `tabIndex={0}` to make the element focusable in sequential keyboard navigation.',
+            output: fixedTemplate(element, '0', role, handler),
+          }].concat(messageTemplate === focusableTemplate ? [{
+            desc: 'Add `tabIndex={-1}` to make the element focusable but not reachable via sequential keyboard navigation.',
+            output: fixedTemplate(element, '-1', role, handler),
+          }] : []),
         }],
       })))
     ), []))

docs/rules/label-has-associated-control.md

@@ -104,9 +104,13 @@ This rule takes one optional object argument of type object:
 ```
 
 `labelComponents` is a list of custom React Component names that should be checked for an associated control.
+
 `labelAttributes` is a list of attributes to check on the label component and its children for a label. Use this if you have a custom component that uses a string passed on a prop to render an HTML `label`, for example.
+
 `controlComponents` is a list of custom React Components names that will output an input element. [Glob format](https://linuxhint.com/bash_globbing_tutorial/) is also supported for specifying names (e.g., `Label*` matches `LabelComponent` but not `CustomLabel`, `????Label` matches `LinkLabel` but not `CustomLabel`).
+
 `assert` asserts that the label has htmlFor, a nested label, both or either. Available options: `'htmlFor', 'nesting', 'both', 'either'`.
+
 `depth` (default 2, max 25) is an integer that determines how deep within a `JSXElement` label the rule should look for text content or an element with a label to determine if the `label` element will have an accessible label.
 
 ### Fail

src/rules/interactive-supports-focus.js

@@ -54,6 +54,11 @@ export default ({
       url: 'https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/HEAD/docs/rules/interactive-supports-focus.md',
       description: 'Enforce that elements with interactive handlers like `onClick` must be focusable.',
     },
+    hasSuggestions: true,
+    messages: {
+      'tabIndex=0': 'Add `tabIndex={0}` to make the element focusable in sequential keyboard navigation.',
+      'tabIndex=-1': 'Add `tabIndex={-1}` to make the element focusable but not reachable via sequential keyboard navigation.',
+    },
     schema: [schema],
   },
 
@@ -100,12 +105,34 @@ export default ({
             context.report({
               node,
               message: `Elements with the '${role}' interactive role must be tabbable.`,
+              suggest: [
+                {
+                  messageId: 'tabIndex=0',
+                  fix(fixer) {
+                    return fixer.insertTextAfter(node.name, ' tabIndex={0}');
+                  },
+                },
+              ],
             });
           } else {
             // Focusable, tabIndex = -1 or 0
             context.report({
               node,
               message: `Elements with the '${role}' interactive role must be focusable.`,
+              suggest: [
+                {
+                  messageId: 'tabIndex=0',
+                  fix(fixer) {
+                    return fixer.insertTextAfter(node.name, ' tabIndex={0}');
+                  },
+                },
+                {
+                  messageId: 'tabIndex=-1',
+                  fix(fixer) {
+                    return fixer.insertTextAfter(node.name, ' tabIndex={-1}');
+                  },
+                },
+              ],
             });
           }
         }