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

@@ -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": [

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"

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}

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"

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}

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={{