From eb93915418635d3dfbb528c857bfd13eaf1faf7f Mon Sep 17 00:00:00 2001
From: Philipp Veller <mail@vellip.de>
Date: Wed, 11 Dec 2024 10:49:34 +0100
Subject: [PATCH] react/ratings: hide accessible text for rating buttons to
 only be visible for screen readers

---
 .../__snapshots__/comment.jest.jsx.snap          | 16 ++++++++--------
 .../ratings/static/ratings/RatingButton.jsx      |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap b/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
index 0deddc9b8..974d7a0b6 100644
--- a/adhocracy4/comments_async/static/comments_async/__tests__/__snapshots__/comment.jest.jsx.snap
+++ b/adhocracy4/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
index bf410e331..501004d06 100644
--- 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>
   )
 }