chore: integrate eslint-plugin-jsx-a11y into the existing ESLint setup

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   parser: "@babel/eslint-parser",
-  plugins: ["jest", "react"],
+  plugins: ["jest", "react", "prettier"],
   globals: {},
   env: {
     browser: true,
@@ -18,15 +18,27 @@ module.exports = {
     ecmaFeatures: {
       jsx: true,
     },
+    requireConfigFile: false,
   },
   rules: {
     "linebreak-style": ["error", "unix"],
     semi: ["error", "always"],
     "object-curly-spacing": ["error", "always"],
+    "prettier/prettier": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/no-unescaped-entities": "off",
   },
   settings: {
     react: {
-      version: "detect"
-    }
-  }
+      version: "detect",
+    },
+  },
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      parser: "@typescript-eslint/parser",
+      plugins: ["@typescript-eslint"],
+      extends: ["plugin:@typescript-eslint/recommended"],
+    },
+  ],
 };

.github/workflows/pr.yml

@@ -112,12 +112,39 @@ jobs:
         if: ${{ steps.filter.outputs.js == 'true' || steps.filter.outputs.ts == 'true' || steps.filter.outputs.jsx == 'true' || steps.filter.outputs.tsx == 'true' }}
         run: yarn lint-js
 
+  lint-a11y:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            js:
+              - '**/*.js'
+            ts:
+              - '**/*.ts'
+            jsx:
+              - '**/*.jsx'
+            tsx:
+              - '**/*.tsx'
+
+      - name: Install JS dependencies
+        if: ${{ steps.filter.outputs.js == 'true' || steps.filter.outputs.ts == 'true' || steps.filter.outputs.jsx == 'true' || steps.filter.outputs.tsx == 'true' }}
+        run: yarn install --immutable
+
+      - name: Lint JS for Accessibility
+        if: ${{ steps.filter.outputs.js == 'true' || steps.filter.outputs.ts == 'true' || steps.filter.outputs.jsx == 'true' || steps.filter.outputs.tsx == 'true' }}
+        run: yarn lint-a11y
+
   test-python:
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
-      
+
       - uses: dorny/paths-filter@v3
         id: filter
         with:

eslint-a11y.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  parser: "@babel/eslint-parser",
+  plugins: ["jsx-a11y"],
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: [
+    "plugin:jsx-a11y/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+    requireConfigFile: false,
+  },
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      parser: "@typescript-eslint/parser",
+      plugins: ["jsx-a11y"],
+      extends: [
+        "plugin:jsx-a11y/recommended",
+      ],
+    },
+  ],
+};

package.json

@@ -1,6 +1,7 @@
 {
   "scripts": {
-    "lint-js": "eslint static/js",
+    "lint-js": "eslint static/js --ext .js,.jsx,.ts,.tsx",
+    "lint-a11y": "eslint -c eslint-a11y.config.js static/js --ext .js,.jsx,.ts,.tsx",
     "lint-scss": "stylelint static/**/*.scss",
     "lint-python": "flake8 webapp tests && black --diff --check --line-length 79 webapp tests",
     "test": "yarn run test-python && yarn run test-js-all && yarn run lint-scss",
@@ -111,11 +112,14 @@
     "@types/d3": "7.4.3",
     "@types/markdown-it": "14.1.1",
     "@types/uuid": "10.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
     "babel-jest": "29.7.0",
     "concurrently": "8.2.2",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jest": "27.6.1",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "identity-obj-proxy": "3.0.0",

static/js/base/contactForm.ts

@@ -1,5 +1,5 @@
 const contactFormTriggers = document.querySelectorAll(
-  "[data-js='contact-form-trigger']"
+  "[data-js='contact-form-trigger']",
 ) as NodeListOf<Element>;
 
 const modal = document.getElementById("contact-form-modal") as HTMLElement;
@@ -19,7 +19,7 @@ function handleClick(event: Event): void {
   const args = target.dataset;
 
   const formEl = document.getElementById(
-    "contactFormTemplate"
+    "contactFormTemplate",
   ) as HTMLFormElement;
 
   let formTemplate = formEl.innerText;

static/js/base/dropdown-menu-toggle.ts

@@ -1,9 +1,9 @@
 (function () {
   function toggleDropdown(toggle: HTMLElement, open: boolean) {
-    var parentElement = toggle.parentNode as HTMLElement;
-    var dropdownElId = toggle.getAttribute("aria-controls") as string;
+    const parentElement = toggle.parentNode as HTMLElement;
+    const dropdownElId = toggle.getAttribute("aria-controls") as string;
 
-    var dropdown = document.getElementById(dropdownElId) as HTMLElement;
+    const dropdown = document.getElementById(dropdownElId) as HTMLElement;
 
     const openMenu = !open;
 
@@ -26,10 +26,10 @@
 
   function handleClickOutside(
     toggles: Array<HTMLElement>,
-    containerClass: string
+    containerClass: string,
   ) {
     document.addEventListener("click", function (event) {
-      var target = event.target as HTMLElement;
+      const target = event.target as HTMLElement;
 
       if (target.closest) {
         if (!target.closest(containerClass)) {
@@ -40,8 +40,8 @@
   }
 
   function initNavDropdowns(containerClass: string) {
-    var toggles = [].slice.call(
-      document.querySelectorAll(containerClass + " [aria-controls]")
+    const toggles = [].slice.call(
+      document.querySelectorAll(containerClass + " [aria-controls]"),
     );
 
     handleClickOutside(toggles, containerClass);
@@ -50,7 +50,7 @@
       toggle.addEventListener("click", function (e) {
         e.preventDefault();
 
-        var parentElement = toggle.parentNode as HTMLElement;
+        const parentElement = toggle.parentNode as HTMLElement;
         if (parentElement.classList.contains("is-active")) {
           toggleDropdown(toggle, false);
         } else {

static/js/base/ga.ts

@@ -25,7 +25,7 @@ function triggerEvent(
   category: string,
   from: string,
   to: string,
-  label: string
+  label: string,
 ): void {
   if (window.dataLayer) {
     window.dataLayer.push({
@@ -70,7 +70,7 @@ if (typeof window.dataLayer !== "undefined") {
       return;
     }
 
-    for (let key in events) {
+    for (const key in events) {
       if (target.matches(key)) {
         // This prevents subsequent matches triggering
         // So the order the events are added is important!

static/js/base/navigation.ts

@@ -1,22 +1,22 @@
 // Login
-var navAccountContainer = document.querySelector(
-  ".js-nav-account"
+const navAccountContainer = document.querySelector(
+  ".js-nav-account",
 ) as HTMLElement;
 
 if (navAccountContainer) {
-  var notAuthenticatedMenu = navAccountContainer.querySelector(
-    ".js-nav-account--notauthenticated"
+  const notAuthenticatedMenu = navAccountContainer.querySelector(
+    ".js-nav-account--notauthenticated",
   ) as HTMLElement;
-  var authenticatedMenu = navAccountContainer.querySelector(
-    ".js-nav-account--authenticated"
+  const authenticatedMenu = navAccountContainer.querySelector(
+    ".js-nav-account--authenticated",
   ) as HTMLElement;
 
   fetch("/account.json")
     .then((response) => response.json())
     .then((data: { publisher: { fullname: string; has_stores: boolean } }) => {
       if (data.publisher) {
-        var displayName = navAccountContainer.querySelector(
-          ".js-account--name"
+        const displayName = navAccountContainer.querySelector(
+          ".js-account--name",
         ) as HTMLElement;
 
         notAuthenticatedMenu.classList.add("u-hide");
@@ -25,13 +25,13 @@ if (navAccountContainer) {
         if (window.sessionStorage) {
           window.sessionStorage.setItem(
             "displayName",
-            data.publisher["fullname"]
+            data.publisher["fullname"],
           );
         }
 
         if (data.publisher.has_stores) {
           const storesMenu = authenticatedMenu.querySelector(
-            ".js-nav-account--stores"
+            ".js-nav-account--stores",
           ) as HTMLElement;
           storesMenu.classList.remove("u-hide");
         }

static/js/brand-store/brand-store.tsx

@@ -18,5 +18,5 @@ root.render(
     <RecoilRoot>
       <App />
     </RecoilRoot>
-  </Provider>
+  </Provider>,
 );

static/js/brand-store/components/AccountDetails/AccountDetails.tsx

@@ -24,7 +24,7 @@ function AccountDetails(): ReactNode {
 
   useEffect(() => {
     setSubscribeToNewsletter(
-      publisher?.subscriptions ? publisher?.subscriptions?.newsletter : false
+      publisher?.subscriptions ? publisher?.subscriptions?.newsletter : false,
     );
   }, [publisher]);
 
@@ -171,11 +171,11 @@ function AccountDetails(): ReactNode {
                           onChange={(
                             e: SyntheticEvent<HTMLInputElement> & {
                               target: HTMLInputElement;
-                            }
+                            },
                           ) => {
                             setSubscribeToNewsletter(e.target.checked);
                             setSubscriptionPreferencesChanged(
-                              hasChanged(e.target.checked)
+                              hasChanged(e.target.checked),
                             );
                           }}
                         />
@@ -213,22 +213,22 @@ function AccountDetails(): ReactNode {
                           data.set("email", publisher?.email || "");
                           data.set(
                             "newsletter",
-                            subscribeToNewsletter ? "on" : ""
+                            subscribeToNewsletter ? "on" : "",
                           );
 
                           const response: Response = await fetch(
                             "/account/publisher",
                             {
                               method: "POST",
                               body: data,
-                            }
+                            },
                           );
 
                           if (!response.ok) {
                             setShowErrorMessage(true);
                             setIsSaving(false);
                             throw new Error(
-                              "There has been a problem saving newsletter preferences"
+                              "There has been a problem saving newsletter preferences",
                             );
                           }
 

static/js/brand-store/components/AccountDetails/__tests__/AccountDetails.test.tsx

@@ -2,7 +2,7 @@ import { screen, render, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { Provider } from "react-redux";
 import { BrowserRouter } from "react-router-dom";
-import { MutableSnapshot, RecoilRoot } from "recoil";
+import { MutableSnapshot, RecoilRoot, RecoilValue } from "recoil";
 import { useEffect } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { useRecoilValue } from "recoil";
@@ -12,7 +12,28 @@ import { publisherState } from "../../../atoms";
 
 const queryClient = new QueryClient();
 
-const RecoilObserver = ({ node, event }: { node: any; event: Function }) => {
+type PublisherState = {
+  email: string;
+  fullname: string;
+  has_stores?: boolean;
+  identity_url: string;
+  image: string | null;
+  is_canonical: boolean;
+  nickname: string;
+  subscriptions: {
+    newsletter: boolean;
+  } | null;
+};
+
+type EventFunction<T> = (value: T) => void;
+
+const RecoilObserver = <T,>({
+  node,
+  event,
+}: {
+  node: RecoilValue<T>;
+  event: EventFunction<T>;
+}) => {
   const value = useRecoilValue(node);
 
   useEffect(() => {
@@ -22,7 +43,13 @@ const RecoilObserver = ({ node, event }: { node: any; event: Function }) => {
   return null;
 };
 
-const renderComponent = ({ event, state }: { event: Function; state: any }) => {
+const renderComponent = ({
+  event,
+  state,
+}: {
+  event: EventFunction<PublisherState | null>;
+  state: RecoilValue<PublisherState | null>;
+}) => {
   render(
     <RecoilRoot
       initializeState={(snapshot: MutableSnapshot) => {
@@ -48,7 +75,7 @@ const renderComponent = ({ event, state }: { event: Function; state: any }) => {
           </QueryClientProvider>
         </Provider>
       </BrowserRouter>
-    </RecoilRoot>
+    </RecoilRoot>,
   );
 };
 

static/js/brand-store/components/App/App.tsx

@@ -27,7 +27,7 @@ import type { StoresList, StoresSlice } from "../../types/shared";
 
 function App(): ReactNode {
   const isLoading = useSelector(
-    (state: StoresSlice) => state.brandStores.loading
+    (state: StoresSlice) => state.brandStores.loading,
   );
   const brandStoresList: StoresList = useSelector(brandStoresListSelector);
   const dispatch = useDispatch();
@@ -44,6 +44,7 @@ function App(): ReactNode {
   const setRecoilBrandStores = useSetRecoilState(brandStoresState);
 
   useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     dispatch(fetchStores() as any);
   }, []);