update eslint rule

Author: mkosir

website/eslint.config.mjs

@@ -4,6 +4,7 @@ import eslintPluginImport from 'eslint-plugin-import';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 import eslintPluginReact from 'eslint-plugin-react';
 import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
+import eslintPluginJsxA11y from 'eslint-plugin-jsx-a11y';
 // eslint-disable-next-line import/no-unresolved
 import tseslint from 'typescript-eslint';
 
@@ -13,6 +14,8 @@ export default tseslint.config(
   eslintPluginImport.flatConfigs.recommended,
   ...tseslint.configs.strictTypeChecked,
   ...tseslint.configs.stylisticTypeChecked,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+  eslintPluginJsxA11y.flatConfigs.recommended,
   eslintPluginReact.configs.flat.recommended,
   eslintPluginPrettierRecommended,
   eslintConfigPrettier,

website/package-lock.json

@@ -39,6 +39,7 @@
     "eslint": "9.25.1",
     "eslint-config-prettier": "10.1.2",
     "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.2.6",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "5.2.0",

website/package.json

@@ -18,8 +18,9 @@ export const GithubStats = () => {
         {...IFRAME_ATTRS}
         className={cn(GITHUB_STAR_BUTTON_MARGIN_MOBILE, GITHUB_STAR_BUTTON_MARGIN_DESKTOP, `min-[997px]:mr-0!`)}
         src={getSrcUrl('star')}
+        title="GitHub Stars"
       />
-      <iframe {...IFRAME_ATTRS} className={`hidden min-[997px]:inline`} src={getSrcUrl('fork')} />
+      <iframe {...IFRAME_ATTRS} className={`hidden min-[997px]:inline`} src={getSrcUrl('fork')} title="GitHub Forks" />
     </div>
   );
 };

website/src/components/GithubStats.tsx

@@ -21,7 +21,10 @@ export const MainTitle = ({ children }: MainTitleProps) => {
         transitionSpeed={2500}
       >
         <div className="flex items-center gap-2">
-          <img src="https://raw.githubusercontent.com/mkosir/typescript-style-guide/main/misc/typescript-logo-30.png" />
+          <img
+            alt="TypeScript Logo"
+            src="https://raw.githubusercontent.com/mkosir/typescript-style-guide/main/misc/typescript-logo-30.png"
+          />
           <h1>{children}</h1>
         </div>
       </Tilt>

website/src/components/MainTitle.tsx

@@ -10,13 +10,13 @@ export const Note = ({ children }: NoteProps) => {
 
   return (
     <div className="mb-2">
-      <div
-        className="mb-1 inline-flex cursor-pointer items-center rounded-lg bg-neutral-500 px-1.5 text-[11px] font-normal text-gray-200 dark:bg-gray-200 dark:text-neutral-600"
+      <button
+        className="mb-1 inline-flex cursor-pointer items-center rounded-lg bg-neutral-500 px-1.5 text-[11px] font-normal text-gray-200 hover:bg-neutral-600 dark:bg-gray-200 dark:text-neutral-600 dark:hover:bg-gray-300"
         onClick={() => setIsRuleExpanded((prev) => !prev)}
       >
-        <div className="mr-1">Note</div>
+        <span className="mr-1">Note</span>
         <InfoIcon />
-      </div>
+      </button>
       <AnimateHeight duration={500} easing="ease" height={isRuleExpanded ? 'auto' : 0}>
         <div className="rounded-md border-0 border-l-[5px] border-solid border-neutral-500 bg-gray-200 p-2 text-xs text-neutral-600 italic dark:border-gray-200 dark:bg-neutral-600 dark:text-gray-200 [&_p]:mb-0">
           {children}

website/src/components/Note.tsx

@@ -17,11 +17,11 @@ export const Rule = ({ children, href, prefix }: RuleProps) => {
     <div>
       {prefix}{' '}
       <span>
-        <div
+        <button
           className="dark:bg-opacity-40 dark:hover:bg-opacity-40 mb-1 inline-flex cursor-pointer items-center rounded-md bg-gray-100 px-1.5 py-1 text-xs font-medium text-neutral-600 hover:bg-gray-200 dark:bg-blue-900 dark:text-neutral-200 dark:hover:bg-blue-950"
           onClick={() => setIsRuleExpanded((prev) => !prev)}
         >
-          <div className="mr-1">
+          <span className="mr-1">
             <span
               className={cn(
                 'ease inline-block transform transition-all duration-500',
@@ -31,8 +31,8 @@ export const Rule = ({ children, href, prefix }: RuleProps) => {
               📏
             </span>{' '}
             Rule
-          </div>
-        </div>
+          </span>
+        </button>
         <AnimateHeight duration={500} easing="ease" height={isRuleExpanded ? 'auto' : 0}>
           <div className="rounded-md border-0 border-l-[5px] border-solid border-neutral-500 bg-gray-200 p-2 text-xs text-neutral-600 italic dark:border-gray-200 dark:bg-neutral-600 dark:text-gray-200 [&_p]:mb-0">
             <a

website/src/components/Rule.tsx

@@ -1,10 +1,15 @@
 /* https://tailwindcss.com/docs/preflight#disabling-preflight */
 /* @import 'tailwindcss'; */
 
-/* Not working as described in the docs */
+/* Not working as expected */
 @layer theme, base, components, utilities;
 @import 'tailwindcss/theme.css' layer(theme);
 /* @import 'tailwindcss/utilities.css' layer(utilities); */
+button {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+}
 @tailwind utilities;
 
 @custom-variant dark (&:is([data-theme="dark"] *));