Use sr-only for non-button non-anchor elements

bounswe · Dec 16, 2024 · a7bc926 · a7bc926
1 parent 9b4009d
commit a7bc926
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
         )}