Merge pull request #692 from bounswe/frontend/accessibility/609/sr-on…

…ly-text [Frontend] Use sr-only text
bounswe · Dec 16, 2024 · db045ce · db045ce
2 parents 52c8b2b + e3493f1
commit db045ce
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 16 deletions.
diff --git a/frontend/src/components/FullscreenLoading.tsx b/frontend/src/components/FullscreenLoading.tsx
@@ -24,11 +24,16 @@ export const FullscreenLoading = ({
       )}
     >
       <Loader2
-        aria-label="Loading"
         className="h-16 w-16 animate-spin text-primary"
       />
+      {!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">
+          <span className="sr-only">Loading...</span>
           This is taking a while...
         </div>
       )}

diff --git a/frontend/src/components/SearchQuestionsList.tsx b/frontend/src/components/SearchQuestionsList.tsx
@@ -103,9 +103,11 @@ 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"
             />
+            <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
@@ -81,9 +81,11 @@ 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"
             />
+            <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
@@ -88,9 +88,11 @@ 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"
               />
+              <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
@@ -60,9 +60,11 @@ 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"
             />
+            <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
@@ -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
@@ -55,7 +55,7 @@ describe("Search component", () => {
       </MemoryRouter>,
     );
 
-    expect(screen.getByLabelText(/loading/i)).toBeInTheDocument();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
   });
 
   it("renders tags correctly", () => {

diff --git a/frontend/src/routes/tag.tsx b/frontend/src/routes/tag.tsx
@@ -126,12 +126,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>
         )}
@@ -147,14 +144,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>
         )}