fix!: enable some jsx-a11y rules (#540)

BREAKING CHANGE: we have enabled some rules of `jsx-a11y`

* fix a11y rules

* formatted

Co-authored-by: Toru Kobayashi <[email protected]>

Author: blindsoup

index.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ["./lib/base.js"]
+  extends: ["./lib/base.js"],
 };

lib/react.js

@@ -161,19 +161,83 @@ module.exports = {
     "jsx-a11y/no-autofocus": "error",
     "jsx-a11y/no-distracting-elements": "error",
     "jsx-a11y/no-interactive-element-to-noninteractive-role": "error",
-    "jsx-a11y/no-noninteractive-element-to-interactive-role": "error",
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": [
+      "error",
+      /** Overwrite prohibited.
+       * Add the following whitelist to address W3C best practices. For example, the dropdown sample used <ul role="listbox">, <li role="option">.
+       * See: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+       */
+      {
+        ul: [
+          "listbox",
+          "menu",
+          "menubar",
+          "radiogroup",
+          "tablist",
+          "tree",
+          "treegrid",
+        ],
+        ol: [
+          "listbox",
+          "menu",
+          "menubar",
+          "radiogroup",
+          "tablist",
+          "tree",
+          "treegrid",
+        ],
+        li: ["option", "menuitem", "row", "tab", "treeitem"],
+        table: ["grid"],
+        td: ["gridcell"],
+      },
+    ],
+    "jsx-a11y/no-noninteractive-element-interactions": [
+      "error",
+      /** We must not assign the following events to non-interactive elements (eg img, h1, li ...) because avoid creating parts that cannot be handled with keyboards and mobile terminals. */
+      {
+        handlers: [
+          "onClick",
+          "onMouseDown",
+          "onMouseUp",
+          "onKeyPress",
+          "onKeyDown",
+          "onKeyUp",
+        ],
+      },
+    ],
+    "jsx-a11y/no-static-element-interactions": [
+      "error",
+      /** We must not assign the following events to static elements because avoid creating parts that cannot be handled with keyboards and mobile terminals. */
+      {
+        handlers: [
+          "onClick",
+          "onMouseDown",
+          "onMouseUp",
+          "onKeyPress",
+          "onKeyDown",
+          "onKeyUp",
+        ],
+      },
+    ],
     "jsx-a11y/anchor-has-content": "error",
     "jsx-a11y/anchor-is-valid": "error",
+    "jsx-a11y/role-supports-aria-props": "error",
     "jsx-a11y/role-has-required-aria-props": "error",
     "jsx-a11y/autocomplete-valid": "error",
-    "jsx-a11y/img-redundant-alt": [
+    "jsx-a11y/scope": "error",
+    "jsx-a11y/tabindex-no-positive": "error",
+    "jsx-a11y/img-redundant-alt": "error",
+    "jsx-a11y/no-noninteractive-tabindex": [
       "error",
+      /** Overwrite prohibited.
+       * We add a whitelist to allow focus on tab panels and dialogs.
+       * See: https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
+       */
       {
-        components: ["Icon", "Image"],
-        words: ["Image", "image", "Icon", "icon", "アイコン", "画像"],
+        tags: [],
+        roles: ["dialog", "tabpanel"],
       },
     ],
-    "jsx-a11y/no-noninteractive-tabindex": ["error"],
     /** We disable this rule because this cannot detect patterns like <main role=“main” />. */
     "jsx-a11y/no-redundant-roles": "off",
     /** There are unnecessary patterns such as dialog overlays.*/

test/lib/runLintWithFixtures.js

@@ -13,7 +13,7 @@ const runLintWithFixtures = async (type, configFile = `lib/${type}.js`) => {
     overrideConfigFile: path.resolve(process.cwd(), configFile),
     ignore: false,
     useEslintrc: false,
-    extensions: [".js", ".jsx", ".ts", ".tsx"]
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
   });
   const targetDir = path.resolve(__dirname, "..", "fixtures", type);
   const lintResult = await eslint.lintFiles([targetDir]);
@@ -43,7 +43,7 @@ const runLintWithFixtures = async (type, configFile = `lib/${type}.js`) => {
             throw new Error(`Got an unknown severity: ${severity}(${ruleId})`);
         }
         return resultPerFile;
-      }, {})
+      }, {}),
     });
   }, {});
 };