react/ratings: hide accessible text for rating buttons to only be vis…

…ible for screen readers
liqd · Dec 18, 2024 · ae6b657 · ae6b657
1 parent 8f8906a
commit ae6b657
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/...cracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap b/...cracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
@@ -92,7 +92,7 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
                       Likes
                     </span>
                     <span
-                      class="aural"
+                      class="a4-sr-only"
                     >
                       Click to like
                     </span>
@@ -116,7 +116,7 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
                       Dislikes
                     </span>
                     <span
-                      class="aural"
+                      class="a4-sr-only"
                     >
                       Click to dislike
                     </span>
@@ -383,7 +383,7 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
                     Likes
                   </span>
                   <span
-                    class="aural"
+                    class="a4-sr-only"
                   >
                     Click to like
                   </span>
@@ -407,7 +407,7 @@ exports[`Comment Component renders comment with creator and comment text 1`] = `
                     Dislikes
                   </span>
                   <span
-                    class="aural"
+                    class="a4-sr-only"
                   >
                     Click to dislike
                   </span>
@@ -736,7 +736,7 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
                       Likes
                     </span>
                     <span
-                      class="aural"
+                      class="a4-sr-only"
                     >
                       Click to like
                     </span>
@@ -760,7 +760,7 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
                       Dislikes
                     </span>
                     <span
-                      class="aural"
+                      class="a4-sr-only"
                     >
                       Click to dislike
                     </span>
@@ -1032,7 +1032,7 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
                     Likes
                   </span>
                   <span
-                    class="aural"
+                    class="a4-sr-only"
                   >
                     Click to like
                   </span>
@@ -1056,7 +1056,7 @@ exports[`Comment Component renders comment with moderator badge 1`] = `
                     Dislikes
                   </span>
                   <span
-                    class="aural"
+                    class="a4-sr-only"
                   >
                     Click to dislike
                   </span>

diff --git a/adhocracy4/ratings/static/ratings/RatingButton.jsx b/adhocracy4/ratings/static/ratings/RatingButton.jsx
@@ -32,7 +32,7 @@ const RatingButton = ({
       type="button"
     >
       {children}
-      <span className="aural">{type === 'up' ? translations.upvote : translations.downvote}</span>
+      <span className="a4-sr-only">{type === 'up' ? translations.upvote : translations.downvote}</span>
     </button>
   )
 }