chore(tools): add jsx-a11y Eslint plugin (#38438)

* chore(tools): add a11y eslint plugin

* fix: use Gatsby's a11y eslint rules

* fix(search): remove unnecessary mouse listeners

.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
   "extends": ["@freecodecamp/eslint-config", "prettier", "prettier/react"],
-  "plugins": ["prettier", "react-hooks"],
+  "plugins": ["prettier", "react-hooks", "jsx-a11y"],
   "rules": {
     "max-len": [
       "error",
@@ -9,7 +9,40 @@
     ],
     "prettier/prettier": "error",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "error",
+    "jsx-a11y/accessible-emoji": "error",
+    "jsx-a11y/alt-text": "error",
+    "jsx-a11y/anchor-has-content": "error",
+    "jsx-a11y/anchor-is-valid": "error",
+    "jsx-a11y/aria-activedescendant-has-tabindex": "error",
+    "jsx-a11y/aria-props": "error",
+    "jsx-a11y/aria-proptypes": "error",
+    "jsx-a11y/aria-role": "error",
+    "jsx-a11y/aria-unsupported-elements": "error",
+    "jsx-a11y/click-events-have-key-events": "error",
+    "jsx-a11y/heading-has-content": "error",
+    "jsx-a11y/html-has-lang": "error",
+    "jsx-a11y/iframe-has-title": "error",
+    "jsx-a11y/img-redundant-alt": "error",
+    "jsx-a11y/interactive-supports-focus": "error",
+    "jsx-a11y/label-has-associated-control": "error",
+    "jsx-a11y/lang": "error",
+    "jsx-a11y/media-has-caption": "error",
+    "jsx-a11y/mouse-events-have-key-events": "error",
+    "jsx-a11y/no-access-key": "error",
+    "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-interactions": "error",
+    "jsx-a11y/no-noninteractive-element-to-interactive-role": "error",
+    "jsx-a11y/no-noninteractive-tabindex": "error",
+    "jsx-a11y/no-onchange": "error",
+    "jsx-a11y/no-redundant-roles": "error",
+    "jsx-a11y/no-static-element-interactions": "error",
+    "jsx-a11y/role-has-required-aria-props": "error",
+    "jsx-a11y/role-supports-aria-props": "error",
+    "jsx-a11y/scope": "error",
+    "jsx-a11y/tabindex-no-positive": "error"
   },
   "settings": {
     "react": {

client/src/components/search/searchBar/NoHitsSuggestion.js

@@ -1,14 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const NoHitsSuggestion = ({ title, handleMouseEnter, handleMouseLeave }) => {
+const NoHitsSuggestion = ({ title }) => {
   return (
-    <div
+    <div className={'no-hits-footer fcc_suggestion_item'} role='region'>
-      className={'no-hits-footer fcc_suggestion_item'}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      role='region'
-    >
       <span className='hit-name'>{title}</span>
     </div>
   );

client/src/components/search/searchBar/SearchHits.js

@@ -59,11 +59,7 @@ const CustomHits = connectHits(
               key={hit.objectID}
             >
               {noHits ? (
-                <NoHitsSuggestion
+                <NoHitsSuggestion title={noHitsTitle} />
-                  handleMouseEnter={handleMouseEnter}
-                  handleMouseLeave={handleMouseLeave}
-                  title={noHitsTitle}
-                />
               ) : (
                 <Suggestion
                   handleMouseEnter={handleMouseEnter}

package.json

@@ -61,6 +61,7 @@
     "eslint-config-prettier": "^4.3.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
     "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.14.3",
@@ -71,7 +72,7 @@
     "husky": "^4.2.3",
     "jest": "^24.9.0",
     "js-yaml": "^3.13.0",
-    "lerna": "^3.16.4",
+    "lerna": "^3.20.2",
     "lint-staged": "^8.2.1",
     "lodash": "^4.17.15",
     "markdownlint": "^0.15.0",