From 4c18beeb3b9e3fc7ed6efaf331ac7c0583199dbe Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Mon, 20 Mar 2023 18:41:24 +0800
Subject: [PATCH] accessibility & seo improvements

---
 client/src/components/ThemeToggle.tsx                  |  1 +
 client/src/components/auth/AuthModal.tsx               | 10 +++++++---
 client/src/components/home/CreateGame.tsx              |  4 +++-
 client/src/components/home/JoinGame.tsx                |  2 +-
 .../src/components/home/PublicGames/RefreshButton.tsx  |  1 +
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/client/src/components/ThemeToggle.tsx b/client/src/components/ThemeToggle.tsx
index 6982f14..4bfea62 100644
--- a/client/src/components/ThemeToggle.tsx
+++ b/client/src/components/ThemeToggle.tsx
@@ -30,6 +30,7 @@ export default function ThemeToggle() {
   return (
     <button
       type="button"
+      aria-label="Toggle theme"
       onClick={() => changeTheme(darkTheme ? "light" : "dark")}
       className={"btn btn-ghost btn-circle swap swap-rotate" + (darkTheme ? " swap-active" : "")}
     >
diff --git a/client/src/components/auth/AuthModal.tsx b/client/src/components/auth/AuthModal.tsx
index 45fa774..95c6795 100644
--- a/client/src/components/auth/AuthModal.tsx
+++ b/client/src/components/auth/AuthModal.tsx
@@ -42,9 +42,13 @@ export default function AuthModal() {
         <label className="modal-box flex flex-col gap-4 pt-2">
           <div className="flex w-full gap-2">
             <div className="tabs flex-grow">
-              <a className="tab tab-bordered tab-active flex-grow">Guest</a>
-              <a className="tab tab-bordered tab-disabled flex-grow">Login</a>
-              <a className="tab tab-bordered tab-disabled flex-grow">Register</a>
+              <span className="tab tab-bordered tab-active flex-grow">Guest</span>
+              <span className="tab tab-bordered tab-disabled flex-grow" aria-disabled>
+                Login
+              </span>
+              <span className="tab tab-bordered tab-disabled flex-grow" aria-disabled>
+                Register
+              </span>
             </div>
             {session?.user !== null && (
               <label htmlFor="auth-modal" className="btn btn-sm btn-circle btn-ghost">
diff --git a/client/src/components/home/CreateGame.tsx b/client/src/components/home/CreateGame.tsx
index d7ef7ce..918e663 100644
--- a/client/src/components/home/CreateGame.tsx
+++ b/client/src/components/home/CreateGame.tsx
@@ -52,7 +52,9 @@ export default function CreateGame() {
         </select>
         <button
           className={
-            "btn" + (buttonLoading ? " loading" : "") + (!session?.user?.id ? " btn-disabled" : "")
+            "btn" +
+            (buttonLoading ? " loading" : "") +
+            (!session?.user?.id ? " btn-disabled text-base-content" : "")
           }
           type="submit"
         >
diff --git a/client/src/components/home/JoinGame.tsx b/client/src/components/home/JoinGame.tsx
index ea43db9..c212a89 100644
--- a/client/src/components/home/JoinGame.tsx
+++ b/client/src/components/home/JoinGame.tsx
@@ -57,7 +57,7 @@ export default function JoinGame() {
         className={
           "btn btn-square" +
           (buttonLoading ? " loading" : "") +
-          (!session?.user?.id ? " btn-disabled" : "")
+          (!session?.user?.id ? " btn-disabled text-base-content" : "")
         }
         type="submit"
       >
diff --git a/client/src/components/home/PublicGames/RefreshButton.tsx b/client/src/components/home/PublicGames/RefreshButton.tsx
index bc87b79..3a653fe 100644
--- a/client/src/components/home/PublicGames/RefreshButton.tsx
+++ b/client/src/components/home/PublicGames/RefreshButton.tsx
@@ -16,6 +16,7 @@ export default function RefreshButton() {
 
   return (
     <button
+      aria-label="Refresh public games"
       className={"btn btn-sm btn-ghost" + (isLoading ? " loading" : "")}
       onClick={handleRefresh}
     >