From 982f734ce798201e013faf0a7e3d507020034f9b Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Wed, 30 Sep 2020 15:10:37 -0700
Subject: [PATCH] Use bulma screen-reader-only class

---
 bookwyrm/static/css/format.css                 |  8 --------
 bookwyrm/templates/book.html                   |  2 +-
 bookwyrm/templates/edit_book.html              |  2 +-
 bookwyrm/templates/layout.html                 |  4 ++--
 bookwyrm/templates/snippets/create_status.html |  4 ++--
 bookwyrm/templates/snippets/interaction.html   | 16 ++++++++--------
 bookwyrm/templates/snippets/rate_action.html   |  4 ++--
 bookwyrm/templates/snippets/shelve_button.html |  2 +-
 bookwyrm/templates/snippets/stars.html         |  2 +-
 bookwyrm/templates/snippets/status.html        |  2 +-
 bookwyrm/templates/snippets/tag.html           |  4 ++--
 bookwyrm/templates/user_header.html            |  2 +-
 12 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css
index 541c0d071..842e7d2fa 100644
--- a/bookwyrm/static/css/format.css
+++ b/bookwyrm/static/css/format.css
@@ -1,12 +1,4 @@
 /* --- ICONS --- */
-.hidden-text {
-    height: 0;
-    width: 0;
-    position: absolute;
-    overflow: hidden;
-}
-
-
 /* --- TOGGLES --- */
 input.toggle-control {
     display: none;
diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html
index 5e88e1379..7d52572ec 100644
--- a/bookwyrm/templates/book.html
+++ b/bookwyrm/templates/book.html
@@ -12,7 +12,7 @@
         <div class="level-right">
             <a href="{{ book.id }}/edit">edit
                 <span class="icon icon-pencil">
-                    <span class="hidden-text">Edit Book</span>
+                    <span class="is-sr-only">Edit Book</span>
                 </span>
             </a>
         </div>
diff --git a/bookwyrm/templates/edit_book.html b/bookwyrm/templates/edit_book.html
index 6e2ff1fbf..5afe192d7 100644
--- a/bookwyrm/templates/edit_book.html
+++ b/bookwyrm/templates/edit_book.html
@@ -9,7 +9,7 @@
         <div class="level-right">
             <a href="/book/{{ book.id }}">
                 <span class="edit-link icon icon-close">
-                    <span class="hidden-text">Close</span>
+                    <span class="is-sr-only">Close</span>
                 </span>
             </a>
         </div>
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index 5fe1664cd..829f781eb 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -30,7 +30,7 @@
 		<input class="input" type="text" name="q" placeholder="Search for a book or user">
 		<button class="button" type="submit">
 		    <span class="icon icon-search">
-			<span class="hidden-text">search</span>
+			<span class="is-sr-only">search</span>
 		    </span>
 		</button>
 	    </div>
@@ -87,7 +87,7 @@
                     <div class="tags has-addons">
                         <span class="tag is-medium">
                             <span class="icon icon-bell">
-                                <span class="hidden-text">Notitications</span>
+                                <span class="is-sr-only">Notitications</span>
                             </span>
                         </span>
                         {% if request.user|notification_count %}
diff --git a/bookwyrm/templates/snippets/create_status.html b/bookwyrm/templates/snippets/create_status.html
index 57386b791..8cc2b6229 100644
--- a/bookwyrm/templates/snippets/create_status.html
+++ b/bookwyrm/templates/snippets/create_status.html
@@ -29,13 +29,13 @@
                 <div class="control">
                     <label class="label" for="id_content_{{ book.id }}_review">Review:</label>
 
-                    <span class="hidden-text">Rating</span>
+                    <span class="is-sr-only">Rating</span>
                     <div class="field is-grouped stars form-rate-stars">
                         <input class="hidden" type="radio" name="rating" value="" checked>
                         {% for i in '12345'|make_list %}
                             <input class="hidden" id="book{{book.id}}-star-{{ forloop.counter }}" type="radio" name="rating" value="{{ forloop.counter }}">
                             <label class="icon icon-star-empty" for="book{{book.id}}-star-{{ forloop.counter }}">
-                                <span class="hidden-text">{{ forloop.counter }} star{{ forloop.counter | pluralize }}</span>
+                                <span class="is-sr-only">{{ forloop.counter }} star{{ forloop.counter | pluralize }}</span>
                             </label>
                         {% endfor %}
                     </div>
diff --git a/bookwyrm/templates/snippets/interaction.html b/bookwyrm/templates/snippets/interaction.html
index 9706ca6b3..8680df8de 100644
--- a/bookwyrm/templates/snippets/interaction.html
+++ b/bookwyrm/templates/snippets/interaction.html
@@ -8,7 +8,7 @@
         <textarea name="content" placeholder="Leave a comment..." id="id_content_{{ activity.id }}" required="true"></textarea>
         <button class="button" type="submit">
             <span class="icon icon-comment">
-                <span class="hidden-text">Comment</span>
+                <span class="is-sr-only">Comment</span>
             </span>
         </button>
         </div>
@@ -18,7 +18,7 @@
         {% csrf_token %}
         <button class="button" type="submit">
             <span class="icon icon-boost">
-                <span class="hidden-text">Boost status</span>
+                <span class="is-sr-only">Boost status</span>
             </span>
         </button>
     </form>
@@ -26,7 +26,7 @@
         {% csrf_token %}
         <button class="button is-success" type="submit">
             <span class="icon icon-boost">
-                <span class="hidden-text">Un-boost status</span>
+                <span class="is-sr-only">Un-boost status</span>
             </span>
         </button>
     </form>
@@ -35,7 +35,7 @@
         {% csrf_token %}
         <button class="button" type="submit">
             <span class="icon icon-heart">
-                <span class="hidden-text">Like status</span>
+                <span class="is-sr-only">Like status</span>
             </span>
         </button>
     </form>
@@ -43,22 +43,22 @@
         {% csrf_token %}
         <button class="button is-success" type="submit">
             <span class="icon icon-heart">
-                <span class="hidden-text">Un-like status</span>
+                <span class="is-sr-only">Un-like status</span>
             </span>
         </button>
     </form>
     {% else %}
     <a href="/login">
     <span class="icon icon-comment">
-        <span class="hidden-text">Comment</span>
+        <span class="is-sr-only">Comment</span>
     </span>
 
     <span class="icon icon-boost">
-        <span class="hidden-text">Boost status</span>
+        <span class="is-sr-only">Boost status</span>
     </span>
 
     <span class="icon icon-heart">
-        <span class="hidden-text">Like status</span>
+        <span class="is-sr-only">Like status</span>
     </span>
     </a>
     {% endif %}
diff --git a/bookwyrm/templates/snippets/rate_action.html b/bookwyrm/templates/snippets/rate_action.html
index eb0b87d82..391540171 100644
--- a/bookwyrm/templates/snippets/rate_action.html
+++ b/bookwyrm/templates/snippets/rate_action.html
@@ -1,5 +1,5 @@
 {% load fr_display %}
-<span class="hidden-text">Leave a rating</span>
+<span class="is-sr-only">Leave a rating</span>
 <div class="field is-grouped stars rate-stars">
     {% for i in '12345'|make_list %}
     <form name="rate" action="/rate/" method="POST" onsubmit="return rate_stars(event)">
@@ -7,7 +7,7 @@
         <input type="hidden" name="book" value="{{ book.id }}">
         <input type="hidden" name="rating" value="{{ forloop.counter }}">
         <button type="submit" class="icon icon-star-{% if book|rating:user < forloop.counter %}empty{% else %}full{% endif %}">
-            <span class="hidden-text">{{ forloop.counter }} star{{ forloop.counter | pluralize }}</span>
+            <span class="is-sr-only">{{ forloop.counter }} star{{ forloop.counter | pluralize }}</span>
         </button>
     </form>
     {% endfor %}
diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index 2f6e79628..c5b7aa0ea 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -11,7 +11,7 @@
 <div class="dropdown is-hoverable">
     {% if not hide_pulldown %}
     <div class="button dropdown-trigger is-small" >
-        <span class="icon icon-arrow-down"><span class="hidden-text">More shelves</span></span>
+        <span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span>
     </div>
 
     <div class="dropdown-menu">
diff --git a/bookwyrm/templates/snippets/stars.html b/bookwyrm/templates/snippets/stars.html
index 8fea9b054..989c015ca 100644
--- a/bookwyrm/templates/snippets/stars.html
+++ b/bookwyrm/templates/snippets/stars.html
@@ -1,5 +1,5 @@
 <div class="stars">
-    <span class="hidden-text">{{ rating|floatformat }} star{{ rating|floatformat | pluralize }}</span>
+    <span class="is-sr-only">{{ rating|floatformat }} star{{ rating|floatformat | pluralize }}</span>
     {% for i in '12345'|make_list %}
     <span class="icon icon-star-{% if rating >= forloop.counter %}full{% elif rating|floatformat:0 >= forloop.counter|floatformat:0 %}half{% else %}empty{% endif %}">
     </span>
diff --git a/bookwyrm/templates/snippets/status.html b/bookwyrm/templates/snippets/status.html
index 00565b3fe..f1fab7427 100644
--- a/bookwyrm/templates/snippets/status.html
+++ b/bookwyrm/templates/snippets/status.html
@@ -23,7 +23,7 @@
 
         <div class="card-footer-item">
             <span class="icon icon-public">
-                <span class="hidden-text">Public post</span>
+                <span class="is-sr-only">Public post</span>
             </span>
             <a href="{{ status.remote_id }}">{{ status.published_date | naturaltime }}</a>
         </div>
diff --git a/bookwyrm/templates/snippets/tag.html b/bookwyrm/templates/snippets/tag.html
index 0c8af0cda..38d2cd349 100644
--- a/bookwyrm/templates/snippets/tag.html
+++ b/bookwyrm/templates/snippets/tag.html
@@ -9,14 +9,14 @@
                 {% csrf_token %}
                 <input type="hidden" name="book" value="{{ book.id }}">
                 <input type="hidden" name="name" value="{{ tag.name }}">
-                <button type="submit">x<span class="hidden-text"> remove tag</span></button>
+                <button type="submit">x<span class="is-sr-only"> remove tag</span></button>
             </form>
             {% else %}
             <form name="tag" action="/tag/" method="post">
                 {% csrf_token %}
                 <input type="hidden" name="book" value="{{ book.id }}">
                 <input type="hidden" name="name" value="{{ tag.name }}">
-                <button type="submit">+<span class="hidden-text"> add tag</span></button>
+                <button type="submit">+<span class="is-sr-only"> add tag</span></button>
             </form>
             {% endif %}
         </div>
diff --git a/bookwyrm/templates/user_header.html b/bookwyrm/templates/user_header.html
index 2be1222a7..6f499e39a 100644
--- a/bookwyrm/templates/user_header.html
+++ b/bookwyrm/templates/user_header.html
@@ -7,7 +7,7 @@
         <div class="level-right">
             <a href="/user-edit/" class="edit-link">edit
                 <span class="icon icon-pencil">
-                    <span class="hidden-text">Edit profile</span>
+                    <span class="is-sr-only">Edit profile</span>
                 </span>
             </a>
         </div>