From a7bc9268db7782e8a58c00109e48aebdb4ca958f Mon Sep 17 00:00:00 2001
From: ozdentarikcan <ozdentarikcan@gmail.com>
Date: Mon, 16 Dec 2024 14:16:00 +0300
Subject: [PATCH 1/3] Use sr-only for non-button non-anchor elements

---
 frontend/src/components/FullscreenLoading.tsx   |  2 +-
 frontend/src/components/SearchQuestionsList.tsx |  2 +-
 frontend/src/components/SearchTagsList.tsx      |  2 +-
 frontend/src/components/Tags.tsx                |  2 +-
 frontend/src/routes/bookmarks.tsx               |  2 +-
 frontend/src/routes/tag.tsx                     | 13 ++++---------
 6 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/FullscreenLoading.tsx b/frontend/src/components/FullscreenLoading.tsx
index 246b562f..e58f3ca9 100644
--- a/frontend/src/components/FullscreenLoading.tsx
+++ b/frontend/src/components/FullscreenLoading.tsx
@@ -24,9 +24,9 @@ export const FullscreenLoading = ({
       )}
     >
       <Loader2
-        aria-label="Loading"
         className="h-16 w-16 animate-spin text-primary"
       />
+      <span className="sr-only">Loading</span>
       {takingLong && (
         <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
           This is taking a while...
diff --git a/frontend/src/components/SearchQuestionsList.tsx b/frontend/src/components/SearchQuestionsList.tsx
index b5dc4046..af717e14 100644
--- a/frontend/src/components/SearchQuestionsList.tsx
+++ b/frontend/src/components/SearchQuestionsList.tsx
@@ -102,9 +102,9 @@ export const SearchQuestionsList = () => {
         {isLoading && (
           <div className="col-span-3 flex w-full items-center justify-center">
             <Loader2
-              aria-label="Loading"
               className="h-16 w-16 animate-spin text-primary"
             />
+            <span className="sr-only">Loading</span>
           </div>
         )}
       </div>
diff --git a/frontend/src/components/SearchTagsList.tsx b/frontend/src/components/SearchTagsList.tsx
index c2bf9eab..2b9f752f 100644
--- a/frontend/src/components/SearchTagsList.tsx
+++ b/frontend/src/components/SearchTagsList.tsx
@@ -81,9 +81,9 @@ export const SearchTagsList = () => {
         {isLoading && (
           <div className="col-span-3 flex w-full items-center justify-center">
             <Loader2
-              aria-label="Loading"
               className="h-16 w-16 animate-spin text-primary"
             />
+            <span className="sr-only">Loading</span>
           </div>
         )}
       </div>
diff --git a/frontend/src/components/Tags.tsx b/frontend/src/components/Tags.tsx
index d9f498d7..9e3adbcf 100644
--- a/frontend/src/components/Tags.tsx
+++ b/frontend/src/components/Tags.tsx
@@ -88,9 +88,9 @@ export default function TagsPage() {
           {isLoading && (
             <div className="col-span-3 flex w-full items-center justify-center">
               <Loader2
-                aria-label="Loading"
                 className="h-16 w-16 animate-spin text-primary"
               />
+              <span className="sr-only">Loading</span>
             </div>
           )}
         </div>
diff --git a/frontend/src/routes/bookmarks.tsx b/frontend/src/routes/bookmarks.tsx
index 9be92871..360a2e3c 100644
--- a/frontend/src/routes/bookmarks.tsx
+++ b/frontend/src/routes/bookmarks.tsx
@@ -90,9 +90,9 @@ export const BookmarkedQuestions = () => {
         {isLoading && (
           <div className="col-span-3 flex w-full items-center justify-center">
             <Loader2
-              aria-label="Loading"
               className="h-16 w-16 animate-spin text-primary"
             />
+            <span className="sr-only">Loading</span>
           </div>
         )}
       </div>
diff --git a/frontend/src/routes/tag.tsx b/frontend/src/routes/tag.tsx
index 6604933d..0b623ca1 100644
--- a/frontend/src/routes/tag.tsx
+++ b/frontend/src/routes/tag.tsx
@@ -125,12 +125,9 @@ export default function TagPage() {
       </div>
       <div className="grid grid-cols-2 gap-4">
         {tag.fileExtension && (
-          <div
-            className="flex items-center gap-2"
-            aria-label={`File extension for ${tag.name} is ${tag.fileExtension}`}
-          >
+          <div className="flex items-center gap-2">
             <FileText className="h-5 w-5" />
-
+            <span className="sr-only">File extension for ${tag.name} is ${tag.fileExtension}</span>
             <span className="text-sm text-gray-500">{tag.fileExtension}</span>
           </div>
         )}
@@ -146,14 +143,12 @@ export default function TagPage() {
         )}
 
         {tag.inceptionYear && (
-          <div
-            className="flex items-center gap-2"
-            aria-label={`Inception year for ${tag.name} is ${tag.inceptionYear}`}
-          >
+          <div className="flex items-center gap-2">
             <Calendar className="h-5 w-5" />
             <span className="text-sm text-gray-500">
               Created in {new Date(tag.inceptionYear).toLocaleDateString()}
             </span>
+            <span className="sr-only"> Inception year for ${tag.name} is ${tag.inceptionYear} </span>
           </div>
         )}
 

From 80dce92c8e20f814d5e0d4a1c6458470426acfc2 Mon Sep 17 00:00:00 2001
From: ozdentarikcan <ozdentarikcan@gmail.com>
Date: Mon, 16 Dec 2024 14:33:35 +0300
Subject: [PATCH 2/3] Make loading messages visible

---
 frontend/src/components/FullscreenLoading.tsx   | 6 +++++-
 frontend/src/components/SearchQuestionsList.tsx | 4 +++-
 frontend/src/components/SearchTagsList.tsx      | 4 +++-
 frontend/src/components/Tags.tsx                | 4 +++-
 frontend/src/routes/bookmarks.tsx               | 4 +++-
 frontend/src/routes/profile.test.tsx            | 2 +-
 frontend/src/routes/search.test.tsx             | 2 +-
 7 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FullscreenLoading.tsx b/frontend/src/components/FullscreenLoading.tsx
index e58f3ca9..4d815ee7 100644
--- a/frontend/src/components/FullscreenLoading.tsx
+++ b/frontend/src/components/FullscreenLoading.tsx
@@ -26,7 +26,11 @@ export const FullscreenLoading = ({
       <Loader2
         className="h-16 w-16 animate-spin text-primary"
       />
-      <span className="sr-only">Loading</span>
+      {!takingLong && (
+        <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+          Loading...
+        </div>
+      )}
       {takingLong && (
         <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
           This is taking a while...
diff --git a/frontend/src/components/SearchQuestionsList.tsx b/frontend/src/components/SearchQuestionsList.tsx
index af717e14..684ac11b 100644
--- a/frontend/src/components/SearchQuestionsList.tsx
+++ b/frontend/src/components/SearchQuestionsList.tsx
@@ -104,7 +104,9 @@ export const SearchQuestionsList = () => {
             <Loader2
               className="h-16 w-16 animate-spin text-primary"
             />
-            <span className="sr-only">Loading</span>
+            <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+              Loading...
+            </div>
           </div>
         )}
       </div>
diff --git a/frontend/src/components/SearchTagsList.tsx b/frontend/src/components/SearchTagsList.tsx
index 2b9f752f..0aad2f39 100644
--- a/frontend/src/components/SearchTagsList.tsx
+++ b/frontend/src/components/SearchTagsList.tsx
@@ -83,7 +83,9 @@ export const SearchTagsList = () => {
             <Loader2
               className="h-16 w-16 animate-spin text-primary"
             />
-            <span className="sr-only">Loading</span>
+            <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+              Loading...
+            </div>
           </div>
         )}
       </div>
diff --git a/frontend/src/components/Tags.tsx b/frontend/src/components/Tags.tsx
index 9e3adbcf..a1de0918 100644
--- a/frontend/src/components/Tags.tsx
+++ b/frontend/src/components/Tags.tsx
@@ -90,7 +90,9 @@ export default function TagsPage() {
               <Loader2
                 className="h-16 w-16 animate-spin text-primary"
               />
-              <span className="sr-only">Loading</span>
+              <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+                Loading...
+              </div>
             </div>
           )}
         </div>
diff --git a/frontend/src/routes/bookmarks.tsx b/frontend/src/routes/bookmarks.tsx
index 360a2e3c..d0e3c7ee 100644
--- a/frontend/src/routes/bookmarks.tsx
+++ b/frontend/src/routes/bookmarks.tsx
@@ -92,7 +92,9 @@ export const BookmarkedQuestions = () => {
             <Loader2
               className="h-16 w-16 animate-spin text-primary"
             />
-            <span className="sr-only">Loading</span>
+            <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+              Loading...
+            </div>
           </div>
         )}
       </div>
diff --git a/frontend/src/routes/profile.test.tsx b/frontend/src/routes/profile.test.tsx
index 82b185e4..bdfd4e64 100644
--- a/frontend/src/routes/profile.test.tsx
+++ b/frontend/src/routes/profile.test.tsx
@@ -53,7 +53,7 @@ describe("Profile component", () => {
 
     render(<RouterProvider router={router} />);
 
-    expect(screen.getByLabelText(/loading/i)).toBeInTheDocument();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
   });
 
   it("displays user data correctly", async () => {
diff --git a/frontend/src/routes/search.test.tsx b/frontend/src/routes/search.test.tsx
index fad28c4c..3056df0b 100644
--- a/frontend/src/routes/search.test.tsx
+++ b/frontend/src/routes/search.test.tsx
@@ -55,7 +55,7 @@ describe("Search component", () => {
       </MemoryRouter>,
     );
 
-    expect(screen.getByLabelText(/loading/i)).toBeInTheDocument();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
   });
 
   it("renders tags correctly", () => {

From e3493f1fa336b1a22da6299b38cb3470b02efdfc Mon Sep 17 00:00:00 2001
From: ozdentarikcan <ozdentarikcan@gmail.com>
Date: Mon, 16 Dec 2024 18:37:12 +0300
Subject: [PATCH 3/3] Add loading while taking long

---
 frontend/src/components/FullscreenLoading.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/FullscreenLoading.tsx b/frontend/src/components/FullscreenLoading.tsx
index 4d815ee7..b5de17bc 100644
--- a/frontend/src/components/FullscreenLoading.tsx
+++ b/frontend/src/components/FullscreenLoading.tsx
@@ -33,6 +33,7 @@ export const FullscreenLoading = ({
       )}
       {takingLong && (
         <div className="ml-4 text-lg font-normal duration-500 animate-in fade-in">
+          <span className="sr-only">Loading...</span>
           This is taking a while...
         </div>
       )}