From 84d8083913f74ad1817ccd5e80fce0872b2adea5 Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 7 Jan 2025 14:02:07 +0100
Subject: [PATCH] Explicitly include jsxA11yRecommended rules + fix errors.

The plugin was added in the eslint.config.js but the ruleset wasn't added, which in this new eslint setup needs to be done explicitly.
---
 eslint.config.js                                               | 3 +++
 .../loan-list/materials/stackable-material/material-info.tsx   | 2 +-
 .../card-item-list/card-list-item/card-list-item.tsx           | 2 +-
 src/components/checkbox/Checkbox.tsx                           | 2 +-
 src/components/dialog/Dialog.tsx                               | 1 +
 src/core/utils/modal.tsx                                       | 1 +
 6 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 7ad83c9f44..cf44491051 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -17,6 +17,8 @@ const typescriptRecommended = {
     "@typescript-eslint/explicit-module-boundary-types": "off"
   }
 };
+const jsxA11yRecommended = require("eslint-plugin-jsx-a11y").configs
+  .recommended;
 
 // ESLint configuration using flat config
 module.exports = [
@@ -59,6 +61,7 @@ module.exports = [
       ...prettierRecommended.rules,
       ...cypress.rules,
       ...typescriptRecommended.rules,
+      ...jsxA11yRecommended.rules,
       // Custom rules
       "@typescript-eslint/consistent-type-imports": "off",
       "prefer-arrow-callback": [
diff --git a/src/apps/loan-list/materials/stackable-material/material-info.tsx b/src/apps/loan-list/materials/stackable-material/material-info.tsx
index a90b965639..a1a788660d 100644
--- a/src/apps/loan-list/materials/stackable-material/material-info.tsx
+++ b/src/apps/loan-list/materials/stackable-material/material-info.tsx
@@ -75,7 +75,7 @@ const MaterialInfo: FC<MaterialInfoProps> = ({
             }}
             type="button"
             // This is to handle focus when more items are loaded via pagination
-
+            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus={focused}
             lang={lang || ""}
             className="list-reservation__header color-secondary-gray"
diff --git a/src/components/card-item-list/card-list-item/card-list-item.tsx b/src/components/card-item-list/card-list-item/card-list-item.tsx
index 8b4fe9a9aa..4bf477b982 100644
--- a/src/components/card-item-list/card-list-item/card-list-item.tsx
+++ b/src/components/card-item-list/card-list-item/card-list-item.tsx
@@ -121,7 +121,7 @@ const CardListItem: React.FC<CardListItemProps> = ({
     // You cannot have nested links so onClick handlers and stopping event propagation
     // is necessary.
     //
-
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <article
       ref={itemRef}
       data-cy={dataCy}
diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
index b19141ea8e..0989962e93 100644
--- a/src/components/checkbox/Checkbox.tsx
+++ b/src/components/checkbox/Checkbox.tsx
@@ -38,7 +38,7 @@ const CheckBox: FC<CheckBoxProps> = ({
     <div className={`checkbox ${className || ""}`}>
       <input
         // This is to handle focus when more items are loaded via pagination
-
+        // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={focused}
         id={id}
         className="checkbox__input"
diff --git a/src/components/dialog/Dialog.tsx b/src/components/dialog/Dialog.tsx
index 0666c333ae..18b02b15fd 100644
--- a/src/components/dialog/Dialog.tsx
+++ b/src/components/dialog/Dialog.tsx
@@ -15,6 +15,7 @@ const Dialog = forwardRef<HTMLDialogElement, DialogType>(
   ({ children, closeDialog, isSidebar }, ref) => {
     useEscapeKey({ closeDialog });
     return (
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
       <dialog
         className={clsx("dialog", { "dialog--sidebar": isSidebar })}
         ref={ref}
diff --git a/src/core/utils/modal.tsx b/src/core/utils/modal.tsx
index ea5608f86c..0ba1a16878 100644
--- a/src/core/utils/modal.tsx
+++ b/src/core/utils/modal.tsx
@@ -90,6 +90,7 @@ function Modal({
       <div>
         {/* The backdrop doesn't have a role or keyboard listener because it barely duplicates
           the close button's functionality which possesses both. */}
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div
           className="modal-backdrop"
           style={{