From e5155d9402b21170de87e4b4a7326863e20cc11f Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 11:34:22 -0800
Subject: [PATCH 01/12] Removes duplicate start reading modal markup

---
 bookwyrm/templates/snippets/shelve_button.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index c200f3e36..b29d7764a 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -49,7 +49,6 @@
                         <label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0">
                             Start reading
                         </label>
-                        {% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
                     </div>
                     {% else %}
                     <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">

From e57c4f4bcd3ed6c1121339c245f5a601009aa14a Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 13:02:28 -0800
Subject: [PATCH 02/12] Adds focus control javascript

---
 bookwyrm/static/js/shared.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index b99459b23..60e780529 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -1,3 +1,20 @@
+window.onload = function() {
+    var toggles = document.getElementsByClassName('toggle-control');
+    //    .forEach(t => t.onclick = toggle_action);
+    for (var i=0; i<toggles.length; i++) {
+        toggles[i].onclick = toggle_action;
+    }
+};
+
+function toggle_action(e) {
+    // set hover, if appropriate
+    var hover = e.target.getAttribute('data-hover-target')
+    if (hover) {
+        document.getElementById(hover).focus();
+    }
+}
+
+
 function interact(e) {
     e.preventDefault();
     ajaxPost(e.target);

From aa564b26c8533cb19f389a3ab87d33c632432bba Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 13:02:50 -0800
Subject: [PATCH 03/12] Uses snippet for toggle buttons

---
 bookwyrm/templates/book.html                   | 12 ++++++------
 bookwyrm/templates/search_results.html         |  8 ++------
 .../snippets/content_warning_field.html        | 12 ++++++------
 .../templates/snippets/create_status_form.html |  3 +--
 .../snippets/finish_reading_modal.html         |  2 +-
 bookwyrm/templates/snippets/readthrough.html   | 16 ++++------------
 bookwyrm/templates/snippets/reply_form.html    |  5 +----
 bookwyrm/templates/snippets/shelve_button.html | 16 +++++-----------
 .../snippets/start_reading_modal.html          |  2 +-
 bookwyrm/templates/snippets/status_body.html   | 18 +++++-------------
 .../templates/snippets/status_content.html     |  4 ++--
 .../snippets/toggle/toggle_button.html         |  9 +++++++++
 bookwyrm/templates/snippets/trimmed_text.html  |  4 ++--
 13 files changed, 45 insertions(+), 66 deletions(-)
 create mode 100644 bookwyrm/templates/snippets/toggle/toggle_button.html

diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html
index 35c8dd5fe..240bef171 100644
--- a/bookwyrm/templates/book.html
+++ b/bookwyrm/templates/book.html
@@ -95,14 +95,14 @@
 
                 {% if request.user.is_authenticated and perms.bookwyrm.edit_book and not book|book_description %}
                 <div>
-                    <input class="toggle-control" type="radio" name="add-description" id="hide-description" checked>
+                    <input class="toggle-control" type="radio" name="add-description" id="hide-description-{{ book.id }}" checked>
                     <div class="toggle-content hidden">
-                        <label class="button" for="add-description" tabindex="0" role="button">Add description</label>
+                        {% include 'snippets/toggle/toggle_button.html' with text="Add description" controls_text="add-description" controls_uid=book.id %}
                     </div>
                 </div>
 
                 <div>
-                    <input class="toggle-control" type="radio" name="add-description" id="add-description">
+                    <input class="toggle-control" type="radio" name="add-description" id="add-description-{{ book.id }}" data-hover-target="id_description">
                     <div class="toggle-content hidden">
                         <div class="box">
                             <form name="add-description" method="POST" action="/add-description/{{ book.id }}">
@@ -113,7 +113,7 @@
                                 </p>
                                 <div class="field">
                                     <button class="button is-primary" type="submit">Save</button>
-                                    <label class="button" for="hide-description" tabindex="0" role="button">Cancel</label>
+                                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-description" controls_uid=book.id %}
                                 </div>
                             </form>
                         </div>
@@ -155,7 +155,7 @@
                 <div>
                     <input type="radio" class="toggle-control" name="add-readthrough-form" id="hide-create-readthrough" checked>
                     <div class="toggle-content hidden">
-                        <label class="button" for="add-readthrough" class="button" role="button" tabindex="0">Add read dates</label>
+                        {% include 'snippets/toggle/toggle_button.html' with text="Add read dates" controls_text="add-readthrough" %}
                     </div>
                 </div>
                 <div>
@@ -165,7 +165,7 @@
                             {% include 'snippets/readthrough_form.html' with readthrough=None %}
                             <div class="field is-grouped">
                                 <button class="button is-primary" type="submit">Create</button>
-                                <label class="button" for="hide-create-readthrough" role="button" tabindex="0">Cancel</label>
+                                {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="hide-create-readthrough" %}
                             </div>
                         </form>
                     </div>
diff --git a/bookwyrm/templates/search_results.html b/bookwyrm/templates/search_results.html
index 46828fb0f..10263f2ef 100644
--- a/bookwyrm/templates/search_results.html
+++ b/bookwyrm/templates/search_results.html
@@ -30,9 +30,7 @@
 
             <input class="toggle-control" type="radio" name="more-results" id="fewer-results" checked>
             <div class="toggle-content hidden">
-                <label class="button is-small" for="more-results">
-                    <div role="button" tabindex="0">Show results from other catalogues</div>
-                </label>
+                {% include 'snippets/toggle/toggle_button.html' with text="Show results from other catalogues" small=True controls_text="more-results" %}
             </div>
         </div>
         {% endif %}
@@ -64,9 +62,7 @@
             {% endif %}
             {% endfor %}
             {% if local_results.results %}
-            <label class="button is-small" for="fewer-results">
-                <div role="button" tabindex="0">Hide results from other catalogues</div>
-            </label>
+            {% include 'snippets/toggle/toggle_button.html' with text="Hide results from other catalogues" small=True controls_text="fewer-results" %}
             {% endif %}
         </div>
     </div>
diff --git a/bookwyrm/templates/snippets/content_warning_field.html b/bookwyrm/templates/snippets/content_warning_field.html
index 9249602af..91bc8ba44 100644
--- a/bookwyrm/templates/snippets/content_warning_field.html
+++ b/bookwyrm/templates/snippets/content_warning_field.html
@@ -2,18 +2,18 @@
 {% with 0|uuid as uuid %}
 <div class="control">
     <div>
-        <input type="radio" class="toggle-control" name="sensitive" value="false" id="hide-spoilers-{{ uuid }}" {% if not parent_status.content_warning %}checked{% endif %}>
+        <input type="radio" class="toggle-control" id="include-spoilers-{{ uuid }}" name="sensitive" value="true" {% if parent_status.content_warning %}checked{% endif %} data-hover-target="id_content_warning_{{ uuid }}">
         <div class="toggle-content hidden">
-            <label class="button is-small" role="button" tabindex="0" for="include-spoilers-{{ uuid }}">Add spoilers/content warning</label>
+            <label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoilers/content warning:</label>
+            <input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning_{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
+            {% include 'snippets/toggle/toggle_button.html' with controls_text="hide-spoilers" controls_uid=uuid text="Remove spoilers/content warning" small=True %}
         </div>
     </div>
 
     <div>
-        <input type="radio" class="toggle-control" id="include-spoilers-{{ uuid }}" name="sensitive" value="true" {% if parent_status.content_warning %}checked{% endif %}>
+        <input type="radio" class="toggle-control" name="sensitive" value="false" id="hide-spoilers-{{ uuid }}" {% if not parent_status.content_warning %}checked{% endif %}>
         <div class="toggle-content hidden">
-            <label class="button is-small" role="button" tabindex="0" for="hide-spoilers-{{ uuid }}">Remove spoilers/content warning</label>
-            <label class="is-sr-only" for="id_content_warning_{{ uuid }}">Spoilers/content warning:</label>
-            <input type="text" name="content_warning" maxlength="255" class="input" id="id_content_warning_{{ uuid }}" placeholder="Spoilers ahead!"{% if parent_status.content_warning %} value="{{ parent_status.content_warning }}"{% endif %}>
+            {% include 'snippets/toggle/toggle_button.html' with controls_text="include-spoilers" controls_uid=uuid text="Add spoilers/content warning" small=True %}
         </div>
     </div>
 </div>
diff --git a/bookwyrm/templates/snippets/create_status_form.html b/bookwyrm/templates/snippets/create_status_form.html
index a0c6b817d..88f201162 100644
--- a/bookwyrm/templates/snippets/create_status_form.html
+++ b/bookwyrm/templates/snippets/create_status_form.html
@@ -27,14 +27,13 @@
         </fieldset>
         {% endif %}
 
-        {% include 'snippets/content_warning_field.html' %}
-
         {% if type == 'quote' %}
         <textarea name="quote" class="textarea" id="id_quote_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
         {% else %}
         <textarea name="content" class="textarea" id="id_content_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
         {% endif %}
 
+        {% include 'snippets/content_warning_field.html' %}
     </div>
     {% if type == 'quote' %}
     <div class="control">
diff --git a/bookwyrm/templates/snippets/finish_reading_modal.html b/bookwyrm/templates/snippets/finish_reading_modal.html
index d04d508d7..a057b29d8 100644
--- a/bookwyrm/templates/snippets/finish_reading_modal.html
+++ b/bookwyrm/templates/snippets/finish_reading_modal.html
@@ -37,7 +37,7 @@
                         </div>
                         <div class="column">
                             <button type="submit" class="button is-success">Save</button>
-                            <label for="finish-reading-{{ uuid }}" class="button" role="button">Cancel</button>
+                            {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="finish-reading" controls_uid=uuid %}
                         </div>
                     </div>
                 </footer>
diff --git a/bookwyrm/templates/snippets/readthrough.html b/bookwyrm/templates/snippets/readthrough.html
index 682505533..7930b93f0 100644
--- a/bookwyrm/templates/snippets/readthrough.html
+++ b/bookwyrm/templates/snippets/readthrough.html
@@ -17,16 +17,8 @@
             {% endif %}
         </dl>
         <div class="field is-grouped">
-            <label class="button is-small" for="edit-readthrough-{{ readthrough.id }}" role="button" tabindex="0">
-                <span class="icon icon-pencil">
-                    <span class="is-sr-only">Edit read-through dates</span>
-                </span>
-            </label>
-            <label class="button is-small" for="delete-readthrough-{{ readthrough.id }}" role="button" tabindex="0">
-                <span class="icon icon-x">
-                    <span class="is-sr-only">Delete this read-through</span>
-                </span>
-            </label>
+            {% include 'snippets/toggle/toggle_button.html' with small=True text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
+            {% include 'snippets/toggle/toggle_button.html' with small=True text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
         </div>
     </div>
 </div>
@@ -39,7 +31,7 @@
                 {% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
                 <div class="field is-grouped">
                     <button class="button is-primary" type="submit">Save</button>
-                    <label class="button" for="show-readthrough-{{ readthrough.id }}" role="button" tabindex="0">Cancel</label>
+                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="show-readthrough" controls_uid=readthrough.id %}
                 </div>
             </form>
         </div>
@@ -62,7 +54,7 @@
                     <button class="button is-danger is-light" type="submit">
                         Delete
                     </button>
-                    <label for="delete-readthrough-{{ readthrough.id }}" class="button" role="button" tabindex="0">Cancel</button>
+                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
                 </form>
             </footer>
         </div>
diff --git a/bookwyrm/templates/snippets/reply_form.html b/bookwyrm/templates/snippets/reply_form.html
index bf1f0259f..cabcb9f7b 100644
--- a/bookwyrm/templates/snippets/reply_form.html
+++ b/bookwyrm/templates/snippets/reply_form.html
@@ -1,16 +1,14 @@
 {% load bookwyrm_tags %}
-{% with status.id|uuid as uuid %}
 <form class="is-flex-grow-1" name="reply" action="/reply" method="post" onsubmit="return reply(event)">
     <div class="columns">
         {% csrf_token %}
         <input type="hidden" name="reply_parent" value="{{ status.id }}">
         <input type="hidden" name="user" value="{{ request.user.id }}">
         <div class="column">
-
-            {% include 'snippets/content_warning_field.html' with parent_status=status %}
             <label for="id_content_{{ status.id }}-{{ uuid }}" class="is-sr-only">Reply</label>
             <div class="field">
                 <textarea class="textarea" name="content" placeholder="Leave a comment..." id="id_content_{{ status.id }}-{{ uuid }}" required="true"></textarea>
+            {% include 'snippets/content_warning_field.html' with parent_status=status %}
             </div>
         </div>
         <div class="column is-narrow">
@@ -25,4 +23,3 @@
         </div>
     </div>
 </form>
-{% endwith %}
diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index b29d7764a..9723d3a13 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -13,15 +13,9 @@
         <span>Read</span> <span class="icon icon-check"></span>
     </button>
     {% elif active_shelf.shelf.identifier == 'reading' %}
-    <label class="button is-small" for="finish-reading-{{ uuid }}" role="button" tabindex="0">
-        I'm done!
-    </label>
-    {% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
+    {% include 'snippets/toggle/toggle_button.html' with small=True text="I'm done!" controls_text="finish-reading" controls_uid=uuid %}
     {% elif active_shelf.shelf.identifier == 'to-read' %}
-    <label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0">
-        Start reading
-    </label>
-    {% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
+    {% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
     {% else %}
     <form name="shelve" action="/shelve/" method="post">
         {% csrf_token %}
@@ -46,9 +40,7 @@
                 <li role="menuitem">
                     {% if active_shelf.shelf.identifier != 'reading' and shelf.identifier == 'reading' %}
                     <div class="dropdown-item pt-0 pb-0">
-                        <label class="button is-small" for="start-reading-{{ uuid }}" role="button" tabindex="0">
-                            Start reading
-                        </label>
+                        {% include 'snippets/toggle/toggle_button.html' with small=True text="Start reading" controls_text="start-reading" controls_uid=uuid %}
                     </div>
                     {% else %}
                     <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
@@ -67,5 +59,7 @@
     </div>
     {% endif %}
 </div>
+{% include 'snippets/start_reading_modal.html' with book=active_shelf.book %}
+{% include 'snippets/finish_reading_modal.html' with book=active_shelf.book %}
 {% endwith %}
 {% endif %}
diff --git a/bookwyrm/templates/snippets/start_reading_modal.html b/bookwyrm/templates/snippets/start_reading_modal.html
index 4518af4ff..2e8b7c597 100644
--- a/bookwyrm/templates/snippets/start_reading_modal.html
+++ b/bookwyrm/templates/snippets/start_reading_modal.html
@@ -28,7 +28,7 @@
                         </div>
                         <div class="column">
                             <button class="button is-success" type="submit">Save</button>
-                            <label for="start-reading-{{ uuid }}" class="button" role="button" tabindex="0">Cancel</button>
+                            {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="start-reading" controls_uid=uuid %}
                         </div>
                     </div>
                 </footer>
diff --git a/bookwyrm/templates/snippets/status_body.html b/bookwyrm/templates/snippets/status_body.html
index b6ec030f1..0f1964649 100644
--- a/bookwyrm/templates/snippets/status_body.html
+++ b/bookwyrm/templates/snippets/status_body.html
@@ -21,13 +21,7 @@
         <div class="card-footer has-background-white-bis">
             <div class="card-footer-item">
                 {% if request.user.is_authenticated %}
-                <label class="button is-small" for="show-comment-{{ status.id }}">
-                    <div role="button" tabindex="0">
-                        <span class="icon icon-comment">
-                            <span class="is-sr-only">Reply</span>
-                        </span>
-                    </div>
-                </label>
+                {% include 'snippets/toggle/toggle_button.html' with controls_text="show-comment" controls_uid=status.id text="Reply" icon='comment' small=True %}
                 {% include 'snippets/boost_button.html' with status=status %}
                 {% include 'snippets/fav_button.html' with status=status %}
 
@@ -57,17 +51,14 @@
             </div>
             {% if status.user == request.user %}
             <div class="card-footer-item">
-                <label class="button is-small" for="more-info-{{ status.id }}">
-                    <div class="icon icon-dots-three">
-                        <span class="is-sr-only">More options</span>
-                    </div>
-                </label>
+                {% include 'snippets/toggle/toggle_button.html' with controls_text="more-info" controls_uid=status.id text="More options" icon="dots-three" small=True %}
             </div>
             {% endif %}
         </div>
 
         {% if request.user.is_authenticated %}
-        <input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}">
+        {% with status.id|uuid as uuid %}
+        <input class="toggle-control" type="checkbox" name="show-comment-{{ status.id }}" id="show-comment-{{ status.id }}" data-hover-target="id_content_{{ status.id }}-{{ uuid }}">
         <div class="toggle-content hidden">
             <div class="card-footer">
                 <div class="card-footer-item">
@@ -75,6 +66,7 @@
                 </div>
             </div>
         </div>
+        {% endwith %}
         {% endif %}
 
         {% if status.user == request.user %}
diff --git a/bookwyrm/templates/snippets/status_content.html b/bookwyrm/templates/snippets/status_content.html
index 7fe6902ed..aa7d2cb8c 100644
--- a/bookwyrm/templates/snippets/status_content.html
+++ b/bookwyrm/templates/snippets/status_content.html
@@ -14,7 +14,7 @@
         <p>{{ status.content_warning }}</p>
         <input class="toggle-control" type="radio" name="toggle-status-cw-{{ status.id }}" id="hide-status-cw-{{ status.id }}" checked>
         <div class="toggle-content hidden">
-            <label class="button is-small" for="show-status-cw-{{ status.id }}" tabindex="0" role="button">Show More</label>
+            {% include 'snippets/toggle/toggle_button.html' with text="Show More" small=True controls_text="show-status-cw" controls_uid=status.id %}
         </div>
     </div>
 
@@ -22,7 +22,7 @@
     {% endif %}
     <div{% if status.content_warning %} class="toggle-content hidden"{% endif %}>
         {% if status.content_warning %}
-        <label class="button is-small" for="hide-status-cw-{{ status.id }}" tabindex="0" role="button">Show Less</label>
+        {% include 'snippets/toggle/toggle_button.html' with text="Show Less" small=True controls_text="hide-status-cw" controls_uid=status.id %}
         {% endif %}
 
         {% if status.quote %}
diff --git a/bookwyrm/templates/snippets/toggle/toggle_button.html b/bookwyrm/templates/snippets/toggle/toggle_button.html
new file mode 100644
index 000000000..aae21f5c6
--- /dev/null
+++ b/bookwyrm/templates/snippets/toggle/toggle_button.html
@@ -0,0 +1,9 @@
+<label class="{% if class %}{{ class }}{% else %}button{% endif %}{% if small %} is-small{% endif %}" for="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}" tabindex="0" role="button">
+    {% if icon %}
+    <span class="icon icon-{{ icon }}">
+        <span class="is-sr-only">{{ text }}</span>
+    </span>
+    {% else %}
+    {{ text }}
+    {% endif %}
+</label>
diff --git a/bookwyrm/templates/snippets/trimmed_text.html b/bookwyrm/templates/snippets/trimmed_text.html
index c2fab3ff3..069a57e47 100644
--- a/bookwyrm/templates/snippets/trimmed_text.html
+++ b/bookwyrm/templates/snippets/trimmed_text.html
@@ -7,13 +7,13 @@
 <div>
     <input type="radio" name="show-hide-{{ uuid }}" id="show-{{ uuid }}" class="toggle-control" checked>
     <blockquote class="content toggle-content hidden"><span dir="auto">{{ trimmed | to_markdown | safe }}</span>
-        <label class="button is-small" for="hide-{{ uuid }}"><div role="button" tabindex="0">show more</div></label>
+        {% include 'snippets/toggle/toggle_button.html' with text="show more" controls_text="hide" controls_uid=uuid class="has-text-link is-clickable" %}
     </blockquote>
 </div>
 <div>
     <input type="radio" name="show-hide-{{ uuid }}" id="hide-{{ uuid }}" class="toggle-control">
     <blockquote class="content toggle-content hidden"><span dir="auto">{{ full | to_markdown | safe }}</span>
-        <label class="button is-small" for="show-{{ uuid }}"><div role="button" tabindex="0">show less</div></label>
+        {% include 'snippets/toggle/toggle_button.html' with text="show less" controls_text="show" controls_uid=uuid class="has-text-link is-clickable" %}
     </blockquote>
 </div>
 {% else %}

From f8d5eec60d38aaf7dc9167b1e6dd46ee5810808a Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 13:43:52 -0800
Subject: [PATCH 04/12] cw back on the top

it just felt weird on the bottom??
---
 bookwyrm/templates/snippets/create_status_form.html | 3 +--
 bookwyrm/templates/snippets/reply_form.html         | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/bookwyrm/templates/snippets/create_status_form.html b/bookwyrm/templates/snippets/create_status_form.html
index 88f201162..be325dbca 100644
--- a/bookwyrm/templates/snippets/create_status_form.html
+++ b/bookwyrm/templates/snippets/create_status_form.html
@@ -10,6 +10,7 @@
     {% endif %}
     <div class="control">
         <label class="label" for="id_{% if type == 'quote' %}quote{% else %}content{% endif %}_{{ book.id }}_{{ type }}">{{ type|title }}:</label>
+        {% include 'snippets/content_warning_field.html' %}
 
         {% if type == 'review' %}
         <fieldset>
@@ -32,8 +33,6 @@
         {% else %}
         <textarea name="content" class="textarea" id="id_content_{{ book.id }}_{{ type }}" placeholder="{{ placeholder }}" required></textarea>
         {% endif %}
-
-        {% include 'snippets/content_warning_field.html' %}
     </div>
     {% if type == 'quote' %}
     <div class="control">
diff --git a/bookwyrm/templates/snippets/reply_form.html b/bookwyrm/templates/snippets/reply_form.html
index cabcb9f7b..adcc64a0c 100644
--- a/bookwyrm/templates/snippets/reply_form.html
+++ b/bookwyrm/templates/snippets/reply_form.html
@@ -5,10 +5,10 @@
         <input type="hidden" name="reply_parent" value="{{ status.id }}">
         <input type="hidden" name="user" value="{{ request.user.id }}">
         <div class="column">
+            {% include 'snippets/content_warning_field.html' with parent_status=status %}
             <label for="id_content_{{ status.id }}-{{ uuid }}" class="is-sr-only">Reply</label>
             <div class="field">
                 <textarea class="textarea" name="content" placeholder="Leave a comment..." id="id_content_{{ status.id }}-{{ uuid }}" required="true"></textarea>
-            {% include 'snippets/content_warning_field.html' with parent_status=status %}
             </div>
         </div>
         <div class="column is-narrow">

From e2d341b147af2736e31d126863244d654256cc7c Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 13:45:41 -0800
Subject: [PATCH 05/12] vertical align bottom post button in reply form

---
 bookwyrm/templates/snippets/reply_form.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bookwyrm/templates/snippets/reply_form.html b/bookwyrm/templates/snippets/reply_form.html
index adcc64a0c..b3dfd8711 100644
--- a/bookwyrm/templates/snippets/reply_form.html
+++ b/bookwyrm/templates/snippets/reply_form.html
@@ -1,6 +1,6 @@
 {% load bookwyrm_tags %}
 <form class="is-flex-grow-1" name="reply" action="/reply" method="post" onsubmit="return reply(event)">
-    <div class="columns">
+    <div class="columns is-align-items-flex-end">
         {% csrf_token %}
         <input type="hidden" name="reply_parent" value="{{ status.id }}">
         <input type="hidden" name="user" value="{{ request.user.id }}">

From aa7320ffe069eb38bb998bb0cf1a433c314c8041 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 14:00:05 -0800
Subject: [PATCH 06/12] Using toggle button snippets on shelf page

---
 bookwyrm/templates/shelf.html | 60 +++++++++++++++--------------------
 1 file changed, 25 insertions(+), 35 deletions(-)

diff --git a/bookwyrm/templates/shelf.html b/bookwyrm/templates/shelf.html
index 99e0c678b..ae25998ad 100644
--- a/bookwyrm/templates/shelf.html
+++ b/bookwyrm/templates/shelf.html
@@ -33,39 +33,35 @@
     <div class="column is-narrow">
         <input type="radio" id="create-shelf-form-hide" name="create-shelf-form" class="toggle-control" checked>
         <div class="toggle-content hidden">
-            <label for="create-shelf-form-show">
-                <div role="button" tabindex="0">
-                    <span class="icon icon-plus">
-                        <span class="is-sr-only">Create new shelf</span>
-                    </span>
-                </div>
-            </label>
+            {% include 'snippets/toggle/toggle_button.html' with text="Create shelf" icon="plus" class="is-clickable" controls_text="create-shelf-form-show" %}
         </div>
     </div>
     {% endif %}
 </div>
 
-<input type="radio" id="create-shelf-form-show" name="create-shelf-form" class="toggle-control">
-<div class="toggle-content hidden">
-    <div class="box mb-5">
-        <h2 class="title is-4">Create new shelf</h2>
-        <form name="create-shelf" action="/create-shelf/" method="post">
-            {% csrf_token %}
-            <input type="hidden" name="user" value="{{ request.user.id }}">
-            <div class="field">
-                <label class="label" for="id_name_create">Name:</label>
-                <input type="text" name="name" maxlength="100" class="input" required="true" id="id_name_create">
-            </div>
+<div>
+    <input type="radio" id="create-shelf-form-show" name="create-shelf-form" class="toggle-control">
+    <div class="toggle-content hidden">
+        <div class="box mb-5">
+            <h2 class="title is-4">Create new shelf</h2>
+            <form name="create-shelf" action="/create-shelf/" method="post">
+                {% csrf_token %}
+                <input type="hidden" name="user" value="{{ request.user.id }}">
+                <div class="field">
+                    <label class="label" for="id_name_create">Name:</label>
+                    <input type="text" name="name" maxlength="100" class="input" required="true" id="id_name_create">
+                </div>
 
-            <label class="label">
-                <p>Shelf privacy:</p>
-                {% include 'snippets/privacy_select.html' with no_label=True %}
-            </label>
-            <div class="field is-grouped">
-                <button class="button is-primary" type="submit">Create shelf</button>
-                <label role="button" class="button" for="create-shelf-form-hide" tabindex="0">Cancel<label>
-            </div>
-        </form>
+                <label class="label">
+                    <p>Shelf privacy:</p>
+                    {% include 'snippets/privacy_select.html' with no_label=True %}
+                </label>
+                <div class="field is-grouped">
+                    <button class="button is-primary" type="submit">Create shelf</button>
+                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="create-shelf-form-hide" %}
+                </div>
+            </form>
+        </div>
     </div>
 </div>
 
@@ -82,13 +78,7 @@
     <div class="column is-narrow">
         <input type="radio" id="edit-shelf-form-hide" name="edit-shelf-form" class="toggle-control" checked>
         <div class="toggle-content hidden">
-            <label for="edit-shelf-form-show">
-                <div role="button" tabindex="0">
-                    <span class="icon icon-pencil">
-                        <span class="is-sr-only">Edit shelf</span>
-                    </span>
-                </div>
-            </label>
+            {% include 'snippets/toggle/toggle_button.html' with text="Edit shelf" icon="pencil" class="is-clickable" controls_text="edit-shelf-form-show" %}
         </div>
     </div>
     {% endif %}
@@ -116,7 +106,7 @@
             </label>
             <div class="field is-grouped">
                 <button class="button is-primary" type="submit">Update shelf</button>
-                <label role="button" class="button" for="edit-shelf-form-hide" tabindex="0">Cancel<label>
+                {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="edit-shelf-form-hide" %}
             </div>
         </form>
     </div>

From b1cdddd1a234ac4c9240a579e3165eaa4d63bf77 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 14:13:23 -0800
Subject: [PATCH 07/12] Adds titles to icons

---
 bookwyrm/templates/author.html                |  2 +-
 bookwyrm/templates/book.html                  |  2 +-
 bookwyrm/templates/edit_author.html           | 19 +++++--------------
 bookwyrm/templates/edit_book.html             | 19 +++++--------------
 bookwyrm/templates/layout.html                |  6 +++---
 bookwyrm/templates/snippets/boost_button.html |  4 ++--
 bookwyrm/templates/snippets/fav_button.html   |  4 ++--
 .../templates/snippets/privacy-icons.html     |  8 ++++----
 bookwyrm/templates/snippets/status_body.html  |  6 +++---
 .../snippets/toggle/toggle_button.html        |  2 +-
 bookwyrm/templates/user.html                  |  2 +-
 11 files changed, 28 insertions(+), 46 deletions(-)

diff --git a/bookwyrm/templates/author.html b/bookwyrm/templates/author.html
index 4235b266a..a875ad78a 100644
--- a/bookwyrm/templates/author.html
+++ b/bookwyrm/templates/author.html
@@ -9,7 +9,7 @@
         {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
         <div class="column is-narrow">
             <a href="{{ author.local_path }}/edit">
-                <span class="icon icon-pencil">
+                <span class="icon icon-pencil" title="Edit Author">
                     <span class="is-sr-only">Edit Author</span>
                 </span>
             </a>
diff --git a/bookwyrm/templates/book.html b/bookwyrm/templates/book.html
index 240bef171..c54255fe2 100644
--- a/bookwyrm/templates/book.html
+++ b/bookwyrm/templates/book.html
@@ -23,7 +23,7 @@
         {% if request.user.is_authenticated and perms.bookwyrm.edit_book %}
         <div class="column is-narrow">
             <a href="{{ book.id }}/edit">
-                <span class="icon icon-pencil">
+                <span class="icon icon-pencil" title="Edit Book">
                     <span class="is-sr-only">Edit Book</span>
                 </span>
             </a>
diff --git a/bookwyrm/templates/edit_author.html b/bookwyrm/templates/edit_author.html
index b08aa983e..26953af03 100644
--- a/bookwyrm/templates/edit_author.html
+++ b/bookwyrm/templates/edit_author.html
@@ -1,25 +1,16 @@
 {% extends 'layout.html' %}
 {% load humanize %}
 {% block content %}
-<div class="block">
-    <div class="level">
-        <h1 class="title level-left">
-            Edit "{{ author.name }}"
-        </h1>
-        <div class="level-right">
-            <a href="/author/{{ author.id }}">
-                <span class="edit-link icon icon-close">
-                    <span class="is-sr-only">Close</span>
-                </span>
-            </a>
-        </div>
-    </div>
+<header class="block">
+    <h1 class="title level-left">
+        Edit "{{ author.name }}"
+    </h1>
     <div>
         <p>Added: {{ author.created_date | naturaltime }}</p>
         <p>Updated: {{ author.updated_date | naturaltime }}</p>
         <p>Last edited by: <a href="{{ author.last_edited_by.remote_id }}">{{ author.last_edited_by.display_name }}</a></p>
     </div>
-</div>
+</header>
 
 {% if form.non_field_errors %}
 <div class="block">
diff --git a/bookwyrm/templates/edit_book.html b/bookwyrm/templates/edit_book.html
index b0e262dd8..7bc6e112e 100644
--- a/bookwyrm/templates/edit_book.html
+++ b/bookwyrm/templates/edit_book.html
@@ -1,25 +1,16 @@
 {% extends 'layout.html' %}
 {% load humanize %}
 {% block content %}
-<div class="block">
-    <div class="level">
-        <h1 class="title level-left">
-            Edit "{{ book.title }}"
-        </h1>
-        <div class="level-right">
-            <a href="/book/{{ book.id }}">
-                <span class="edit-link icon icon-close">
-                    <span class="is-sr-only">Close</span>
-                </span>
-            </a>
-        </div>
-    </div>
+<header class="block">
+    <h1 class="title level-left">
+        Edit "{{ book.title }}"
+    </h1>
     <div>
         <p>Added: {{ book.created_date | naturaltime }}</p>
         <p>Updated: {{ book.updated_date | naturaltime }}</p>
         <p>Last edited by: <a href="{{ book.last_edited_by.remote_id }}">{{ book.last_edited_by.display_name }}</a></p>
     </div>
-</div>
+</header>
 
 {% if form.non_field_errors %}
 <div class="block">
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index f2db8521d..e625343b3 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -33,7 +33,7 @@
                 </div>
                 <div class="control">
                     <button class="button" type="submit">
-                        <span class="icon icon-search">
+                        <span class="icon icon-search" title="Search">
                             <span class="is-sr-only">search</span>
                         </span>
                     </button>
@@ -43,7 +43,7 @@
 
         <label for="main-nav" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mainNav" onclick="toggleMenu(this)" tabindex="0">
             <div class="navbar-item mt-3">
-                <div class="icon icon-dots-three-vertical">
+                <div class="icon icon-dots-three-vertical" title="Main navigation menu">
                     <span class="is-sr-only">Main navigation menu</span>
                 </div>
             </div>
@@ -110,7 +110,7 @@
                 <a href="/notifications">
                     <div class="tags has-addons">
                         <span class="tag is-medium">
-                            <span class="icon icon-bell">
+                            <span class="icon icon-bell" title="Notifications">
                                 <span class="is-sr-only">Notifications</span>
                             </span>
                         </span>
diff --git a/bookwyrm/templates/snippets/boost_button.html b/bookwyrm/templates/snippets/boost_button.html
index 02b557944..e66881246 100644
--- a/bookwyrm/templates/snippets/boost_button.html
+++ b/bookwyrm/templates/snippets/boost_button.html
@@ -4,7 +4,7 @@
 <form name="boost" action="/boost/{{ status.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }}-{{ uuid }} {% if request.user|boosted:status  %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small" type="submit" {% if not status.boostable %}disabled{% endif %}>
-        <span class="icon icon-boost">
+        <span class="icon icon-boost" title="Boost status">
             <span class="is-sr-only">Boost status</span>
         </span>
     </button>
@@ -12,7 +12,7 @@
 <form name="unboost" action="/unboost/{{ status.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }}-{{ uuid }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small is-success" type="submit">
-        <span class="icon icon-boost">
+        <span class="icon icon-boost" title="Un-boost status">
             <span class="is-sr-only">Un-boost status</span>
         </span>
     </button>
diff --git a/bookwyrm/templates/snippets/fav_button.html b/bookwyrm/templates/snippets/fav_button.html
index 11e03cdbf..abd453fd1 100644
--- a/bookwyrm/templates/snippets/fav_button.html
+++ b/bookwyrm/templates/snippets/fav_button.html
@@ -3,7 +3,7 @@
 <form name="favorite" action="/favorite/{{ status.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }}-{{ uuid }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small" type="submit">
-        <span class="icon icon-heart">
+        <span class="icon icon-heart" title="Like status">
             <span class="is-sr-only">Like status</span>
         </span>
     </button>
@@ -11,7 +11,7 @@
 <form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }}-{{ uuid }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-success is-small" type="submit">
-        <span class="icon icon-heart">
+        <span class="icon icon-heart" title="Un-like status">
             <span class="is-sr-only">Un-like status</span>
         </span>
     </button>
diff --git a/bookwyrm/templates/snippets/privacy-icons.html b/bookwyrm/templates/snippets/privacy-icons.html
index b911f1281..793fbc8b2 100644
--- a/bookwyrm/templates/snippets/privacy-icons.html
+++ b/bookwyrm/templates/snippets/privacy-icons.html
@@ -1,17 +1,17 @@
 {% if item.privacy == 'public' %}
-<span class="icon icon-globe">
+<span class="icon icon-globe" title="Public post">
     <span class="is-sr-only">Public post</span>
 </span>
 {% elif item.privacy == 'unlisted' %}
-<span class="icon icon-unlock">
+<span class="icon icon-unlock" title="Unlisted post">
     <span class="is-sr-only">Unlisted post</span>
 </span>
 {% elif item.privacy == 'followers' %}
-<span class="icon icon-lock">
+<span class="icon icon-lock" title="Followers-only post">
     <span class="is-sr-only">Followers-only post</span>
 </span>
 {% else %}
-<span class="icon icon-envelope">
+<span class="icon icon-envelope" title="Private post">
     <span class="is-sr-only">Private post</span>
 </span>
 {% endif %}
diff --git a/bookwyrm/templates/snippets/status_body.html b/bookwyrm/templates/snippets/status_body.html
index 0f1964649..d37fa0986 100644
--- a/bookwyrm/templates/snippets/status_body.html
+++ b/bookwyrm/templates/snippets/status_body.html
@@ -27,15 +27,15 @@
 
                 {% else %}
                 <a href="/login">
-                    <span class="icon icon-comment">
+                    <span class="icon icon-comment" title="Reply">
                         <span class="is-sr-only">Reply</span>
                     </span>
 
-                    <span class="icon icon-boost">
+                    <span class="icon icon-boost" title="Boost status">
                         <span class="is-sr-only">Boost status</span>
                     </span>
 
-                    <span class="icon icon-heart">
+                    <span class="icon icon-heart" title="Like status">
                         <span class="is-sr-only">Like status</span>
                     </span>
                 </a>
diff --git a/bookwyrm/templates/snippets/toggle/toggle_button.html b/bookwyrm/templates/snippets/toggle/toggle_button.html
index aae21f5c6..e891e07a5 100644
--- a/bookwyrm/templates/snippets/toggle/toggle_button.html
+++ b/bookwyrm/templates/snippets/toggle/toggle_button.html
@@ -1,6 +1,6 @@
 <label class="{% if class %}{{ class }}{% else %}button{% endif %}{% if small %} is-small{% endif %}" for="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}" tabindex="0" role="button">
     {% if icon %}
-    <span class="icon icon-{{ icon }}">
+    <span class="icon icon-{{ icon }}" title="{{ text }}">
         <span class="is-sr-only">{{ text }}</span>
     </span>
     {% else %}
diff --git a/bookwyrm/templates/user.html b/bookwyrm/templates/user.html
index 8ad5ee087..5bfa048d6 100644
--- a/bookwyrm/templates/user.html
+++ b/bookwyrm/templates/user.html
@@ -8,7 +8,7 @@
     {% if is_self %}
     <div class="column is-narrow">
         <a href="/user-edit/">
-            <span class="icon icon-pencil">
+            <span class="icon icon-pencil" title="Edit profile">
                 <span class="is-sr-only">Edit profile</span>
             </span>
         </a>

From d59c586e5534a1969b13096af65f79faed71e5c8 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 14:19:30 -0800
Subject: [PATCH 08/12] use snippet for modal close buttons

---
 bookwyrm/templates/feed.html                          | 2 +-
 bookwyrm/templates/snippets/finish_reading_modal.html | 2 +-
 bookwyrm/templates/snippets/start_reading_modal.html  | 2 +-
 bookwyrm/templates/snippets/toggle/toggle_button.html | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/bookwyrm/templates/feed.html b/bookwyrm/templates/feed.html
index f02219bcc..e1580fa59 100644
--- a/bookwyrm/templates/feed.html
+++ b/bookwyrm/templates/feed.html
@@ -50,7 +50,7 @@
                         <span>{% include 'snippets/book_titleby.html' with book=book %}</span>
                         </>
                         <div class="card-header-icon is-hidden-tablet">
-                            <label class="delete" for="no-book" aria-label="close" role="button"></label>
+                            {% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="no-book" class="delete" %}
                         </div>
                     </div>
                     <div class="card-content">
diff --git a/bookwyrm/templates/snippets/finish_reading_modal.html b/bookwyrm/templates/snippets/finish_reading_modal.html
index a057b29d8..06874c069 100644
--- a/bookwyrm/templates/snippets/finish_reading_modal.html
+++ b/bookwyrm/templates/snippets/finish_reading_modal.html
@@ -6,7 +6,7 @@
         <div class="modal-card">
             <header class="modal-card-head">
                 <p class="modal-card-title">Finish "{{ book.title }}"</p>
-                <label class="delete" for="finish-reading-{{ uuid }}" aria-label="close" role="button"></label>
+                {% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="finish-reading" controls_uid=uuid class="delete" %}
             </header>
             {% active_read_through book user as readthrough %}
             <form name="finish-reading" action="/finish-reading/{{ book.id }}" method="post">
diff --git a/bookwyrm/templates/snippets/start_reading_modal.html b/bookwyrm/templates/snippets/start_reading_modal.html
index 2e8b7c597..158f56623 100644
--- a/bookwyrm/templates/snippets/start_reading_modal.html
+++ b/bookwyrm/templates/snippets/start_reading_modal.html
@@ -5,7 +5,7 @@
         <div class="modal-card">
             <header class="modal-card-head">
                 <p class="modal-card-title">Start "{{ book.title }}"</p>
-                <label class="delete" for="start-reading-{{ uuid }}" aria-label="close" role="button" tabindex="0"></label>
+                {% include 'snippets/toggle/toggle_button.html' with label="close" controls_text="start-reading" controls_uid=uuid class="delete" %}
             </header>
             <form name="start-reading" action="/start-reading/{{ book.id }}" method="post">
                 <section class="modal-card-body">
diff --git a/bookwyrm/templates/snippets/toggle/toggle_button.html b/bookwyrm/templates/snippets/toggle/toggle_button.html
index e891e07a5..1b36b56b3 100644
--- a/bookwyrm/templates/snippets/toggle/toggle_button.html
+++ b/bookwyrm/templates/snippets/toggle/toggle_button.html
@@ -1,4 +1,4 @@
-<label class="{% if class %}{{ class }}{% else %}button{% endif %}{% if small %} is-small{% endif %}" for="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}" tabindex="0" role="button">
+<label class="{% if class %}{{ class }}{% else %}button{% endif %}{% if small %} is-small{% endif %}" for="{{ controls_text }}{% if controls_uid %}-{{ controls_uid }}{% endif %}" tabindex="0" role="button"{% if label %} aria-label="{{ label }}"{% endif %}>
     {% if icon %}
     <span class="icon icon-{{ icon }}" title="{{ text }}">
         <span class="is-sr-only">{{ text }}</span>

From 55910249335d944fb6104262350f6ac2e136a24f Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 14:38:33 -0800
Subject: [PATCH 09/12] Moves interaction javascript out of html

---
 bookwyrm/static/js/shared.js                   | 13 ++++++++-----
 bookwyrm/templates/snippets/boost_button.html  |  4 ++--
 bookwyrm/templates/snippets/fav_button.html    |  4 ++--
 bookwyrm/templates/snippets/follow_button.html |  4 ++--
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index 60e780529..55d0d64d8 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -1,9 +1,12 @@
+// set up javascript listeners
 window.onload = function() {
-    var toggles = document.getElementsByClassName('toggle-control');
-    //    .forEach(t => t.onclick = toggle_action);
-    for (var i=0; i<toggles.length; i++) {
-        toggles[i].onclick = toggle_action;
-    }
+    // let buttons set keyboard focus
+    Array.from(document.getElementsByClassName('toggle-control'))
+        .forEach(t => t.onclick = toggle_action);
+
+    // javascript interactions
+    Array.from(document.getElementsByClassName('interaction'))
+        .forEach(t => t.onsubmit = interact);
 };
 
 function toggle_action(e) {
diff --git a/bookwyrm/templates/snippets/boost_button.html b/bookwyrm/templates/snippets/boost_button.html
index e66881246..08daae643 100644
--- a/bookwyrm/templates/snippets/boost_button.html
+++ b/bookwyrm/templates/snippets/boost_button.html
@@ -1,7 +1,7 @@
 {% load bookwyrm_tags %}
 
 {% with status.id|uuid as uuid %}
-<form name="boost" action="/boost/{{ status.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }}-{{ uuid }} {% if request.user|boosted:status  %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
+<form name="boost" action="/boost/{{ status.id }}" method="post" class="interaction boost-{{ status.id }}-{{ uuid }} {% if request.user|boosted:status  %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small" type="submit" {% if not status.boostable %}disabled{% endif %}>
         <span class="icon icon-boost" title="Boost status">
@@ -9,7 +9,7 @@
         </span>
     </button>
 </form>
-<form name="unboost" action="/unboost/{{ status.id }}" method="post" onsubmit="return interact(event)" class="boost-{{ status.id }}-{{ uuid }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
+<form name="unboost" action="/unboost/{{ status.id }}" method="post" class="interaction boost-{{ status.id }}-{{ uuid }} active {% if not request.user|boosted:status %}hidden{% endif %}" data-id="boost-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small is-success" type="submit">
         <span class="icon icon-boost" title="Un-boost status">
diff --git a/bookwyrm/templates/snippets/fav_button.html b/bookwyrm/templates/snippets/fav_button.html
index abd453fd1..c413e9794 100644
--- a/bookwyrm/templates/snippets/fav_button.html
+++ b/bookwyrm/templates/snippets/fav_button.html
@@ -1,6 +1,6 @@
 {% load bookwyrm_tags %}
 {% with status.id|uuid as uuid %}
-<form name="favorite" action="/favorite/{{ status.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }}-{{ uuid }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
+<form name="favorite" action="/favorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} {% if request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-small" type="submit">
         <span class="icon icon-heart" title="Like status">
@@ -8,7 +8,7 @@
         </span>
     </button>
 </form>
-<form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" onsubmit="return interact(event)" class="fav-{{ status.id }}-{{ uuid }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
+<form name="unfavorite" action="/unfavorite/{{ status.id }}" method="POST" class="interaction fav-{{ status.id }}-{{ uuid }} active {% if not request.user|liked:status %}hidden{% endif %}" data-id="fav-{{ status.id }}-{{ uuid }}">
     {% csrf_token %}
     <button class="button is-success is-small" type="submit">
         <span class="icon icon-heart" title="Un-like status">
diff --git a/bookwyrm/templates/snippets/follow_button.html b/bookwyrm/templates/snippets/follow_button.html
index faeb472a5..7db69191e 100644
--- a/bookwyrm/templates/snippets/follow_button.html
+++ b/bookwyrm/templates/snippets/follow_button.html
@@ -7,7 +7,7 @@ Follow request already sent.
 
 {% else %}
 
-<form action="/follow/" method="POST" onsubmit="interact(event)" class="follow-{{ user.id }} {% if request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
+<form action="/follow/" method="POST" class="interaction follow-{{ user.id }} {% if request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
     {% if user.manually_approves_followers %}
@@ -16,7 +16,7 @@ Follow request already sent.
         <button class="button is-small is-link" type="submit">Follow</button>
     {% endif %}
 </form>
-<form action="/unfollow/" method="POST" onsubmit="interact(event)" class="follow-{{ user.id }} {% if not request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
+<form action="/unfollow/" method="POST" class="interaction follow-{{ user.id }} {% if not request.user in user.followers.all %}hidden{%endif %}" data-id="follow-{{ user.id }}">
     {% csrf_token %}
     <input type="hidden" name="user" value="{{ user.username }}">
     <button class="button is-small is-danger is-light" type="submit">Unfollow</button>

From 4d4e692f4950f5c279290b294c06a71740e3dc69 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 15:16:18 -0800
Subject: [PATCH 10/12] Javascript cleanup

---
 bookwyrm/static/js/shared.js                | 21 +++++++++------------
 bookwyrm/templates/import_status.html       |  2 +-
 bookwyrm/templates/snippets/reply_form.html |  2 +-
 3 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index 55d0d64d8..54d2a1b71 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -2,14 +2,18 @@
 window.onload = function() {
     // let buttons set keyboard focus
     Array.from(document.getElementsByClassName('toggle-control'))
-        .forEach(t => t.onclick = toggle_action);
+        .forEach(t => t.onclick = toggleAction);
 
-    // javascript interactions
+    // javascript interactions (boost/fav)
     Array.from(document.getElementsByClassName('interaction'))
         .forEach(t => t.onsubmit = interact);
+
+    // select all
+    Array.from(document.getElementsByClassName('select-all'))
+        .forEach(t => t.onclick = selectAll);
 };
 
-function toggle_action(e) {
+function toggleAction(e) {
     // set hover, if appropriate
     var hover = e.target.getAttribute('data-hover-target')
     if (hover) {
@@ -33,15 +37,8 @@ function interact(e) {
     return true;
 }
 
-function reply(e) {
-    e.preventDefault();
-    ajaxPost(e.target);
-    // TODO: display comment
-    return true;
-}
-
-function selectAll(el) {
-    el.parentElement.querySelectorAll('[type="checkbox"]')
+function selectAll(e) {
+    e.target.parentElement.parentElement.querySelectorAll('[type="checkbox"]')
         .forEach(t => t.checked=true);
 }
 
diff --git a/bookwyrm/templates/import_status.html b/bookwyrm/templates/import_status.html
index c58635d13..ba462eeef 100644
--- a/bookwyrm/templates/import_status.html
+++ b/bookwyrm/templates/import_status.html
@@ -50,7 +50,7 @@
             {% endfor %}
             </fieldset>
         </ul>
-        <div class="block pt-1" onclick="selectAll(this)">
+        <div class="block pt-1 select-all">
             <label class="label">
                 <input type="checkbox" class="checkbox">
                 Select all
diff --git a/bookwyrm/templates/snippets/reply_form.html b/bookwyrm/templates/snippets/reply_form.html
index b3dfd8711..4236d1b68 100644
--- a/bookwyrm/templates/snippets/reply_form.html
+++ b/bookwyrm/templates/snippets/reply_form.html
@@ -1,5 +1,5 @@
 {% load bookwyrm_tags %}
-<form class="is-flex-grow-1" name="reply" action="/reply" method="post" onsubmit="return reply(event)">
+<form class="is-flex-grow-1" name="reply" action="/reply" method="post">
     <div class="columns is-align-items-flex-end">
         {% csrf_token %}
         <input type="hidden" name="reply_parent" value="{{ status.id }}">

From 7abe39b7d5325848106b4bdfb528ec9dd3a3b310 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 15:29:37 -0800
Subject: [PATCH 11/12] Tab change javascript out of html

---
 bookwyrm/static/js/shared.js                  | 35 +++++++++----------
 bookwyrm/templates/feed.html                  |  2 +-
 .../templates/snippets/create_status.html     |  6 ++--
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index 54d2a1b71..3cb85d110 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -11,6 +11,12 @@ window.onload = function() {
     // select all
     Array.from(document.getElementsByClassName('select-all'))
         .forEach(t => t.onclick = selectAll);
+
+    // toggle between tabs
+    Array.from(document.getElementsByClassName('tab-change-nested'))
+        .forEach(t => t.onclick = tabChangeNested);
+    Array.from(document.getElementsByClassName('tab-change'))
+        .forEach(t => t.onclick = tabChange);
 };
 
 function toggleAction(e) {
@@ -42,32 +48,25 @@ function selectAll(e) {
         .forEach(t => t.checked=true);
 }
 
-function rate_stars(e) {
-    e.preventDefault();
-    ajaxPost(e.target);
-    rating = e.target.rating.value;
-    var stars = e.target.parentElement.getElementsByClassName('icon');
-    for (var i = 0; i < stars.length ; i++) {
-        stars[i].className = rating > i ? 'icon icon-star-full' : 'icon icon-star-empty';
-    }
-    return true;
+function tabChangeNested(e) {
+    var target = e.target.closest('li')
+    var parentElement = target.parentElement.closest('li').parentElement;
+    handleTabChange(target, parentElement)
 }
 
-function tabChange(e, nested) {
+function tabChange(e) {
     var target = e.target.closest('li')
-    var identifier = target.getAttribute('data-id');
+    var parentElement = target.parentElement;
+    handleTabChange(target, parentElement)
+}
 
-    if (nested) {
-        var parent_element = target.parentElement.closest('li').parentElement;
-    } else {
-        var parent_element = target.parentElement;
-    }
 
-    parent_element.querySelectorAll('[aria-selected="true"]')
+function handleTabChange(target, parentElement) {
+    parentElement.querySelectorAll('[aria-selected="true"]')
         .forEach(t => t.setAttribute("aria-selected", false));
     target.querySelector('[role="tab"]').setAttribute("aria-selected", true);
 
-    parent_element.querySelectorAll('li')
+    parentElement.querySelectorAll('li')
         .forEach(t => t.className='');
     target.className = 'is-active';
 }
diff --git a/bookwyrm/templates/feed.html b/bookwyrm/templates/feed.html
index e1580fa59..07f4c60ad 100644
--- a/bookwyrm/templates/feed.html
+++ b/bookwyrm/templates/feed.html
@@ -21,7 +21,7 @@
                         <ul>
                             {% for book in shelf.books %}
                             <li class="{% if shelf_counter == 1 and forloop.first %}is-active{% endif %}" data-id="tab-book-{{ book.id }}">
-                                <label for="book-{{ book.id }}" onclick="tabChange(event, nested=true)">
+                                <label for="book-{{ book.id }}" class="tab-change-nested">
                                     <div role="tab" tabindex="0" aria-selected="{% if shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}" aria-controls="book-{{ book.id }}-panel">
                                         <a>
                                             {% include 'snippets/book_cover.html' with book=book size="medium" %}
diff --git a/bookwyrm/templates/snippets/create_status.html b/bookwyrm/templates/snippets/create_status.html
index ac8c0b75a..c1fc59799 100644
--- a/bookwyrm/templates/snippets/create_status.html
+++ b/bookwyrm/templates/snippets/create_status.html
@@ -5,21 +5,21 @@
     <ul role="tablist">
         <li class="is-active" data-id="tab-review-{{ book.id }}" data-category="tab-option-{{ book.id }}">
             <label for="review-{{ book.id }}">
-                <div onclick="tabChange(event)" role="tab" aria-selected="true" tabindex="0">
+                <div class="tab-change" role="tab" aria-selected="true" tabindex="0">
                     <a>Review</a>
                 </div>
             </label>
         </li>
         <li data-id="tab-comment-{{ book.id }}" data-category="tab-option-{{ book.id }}">
             <label for="comment-{{ book.id}}">
-                <div onclick="tabChange(event)" role="tab" tabindex="0">
+                <div class="tab-change" role="tab" tabindex="0">
                     <a>Comment</a>
                 </div>
             </label>
         </li>
         <li data-id="tab-quotation-{{ book.id }}" data-category="tab-option-{{ book.id }}">
             <label for="quote-{{ book.id }}">
-                <div onclick="tabChange(event)" role="tab" tabindex="0">
+                <div class="tab-change" role="tab" tabindex="0">
                     <a>Quote</a>
                 </div>
             </label>

From 861249080ba846e6697bde0cec52c7487da039cf Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Thu, 14 Jan 2021 15:45:30 -0800
Subject: [PATCH 12/12] Moves toggle menu javascript out of html

---
 bookwyrm/static/js/shared.js                    | 7 ++++++-
 bookwyrm/templates/layout.html                  | 4 ++--
 bookwyrm/templates/snippets/shelf_selector.html | 2 +-
 bookwyrm/templates/snippets/shelve_button.html  | 2 +-
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index 3cb85d110..de6d44f99 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -17,6 +17,10 @@ window.onload = function() {
         .forEach(t => t.onclick = tabChangeNested);
     Array.from(document.getElementsByClassName('tab-change'))
         .forEach(t => t.onclick = tabChange);
+
+    // handle aria settings on menus
+    Array.from(document.getElementsByClassName('pulldown-menu'))
+        .forEach(t => t.onclick = toggleMenu);
 };
 
 function toggleAction(e) {
@@ -71,7 +75,8 @@ function handleTabChange(target, parentElement) {
     target.className = 'is-active';
 }
 
-function toggleMenu(el) {
+function toggleMenu(e) {
+    var el = e.target.closest('.pulldown-menu');
     el.setAttribute('aria-expanded', el.getAttribute('aria-expanded') == 'false');
 }
 
diff --git a/bookwyrm/templates/layout.html b/bookwyrm/templates/layout.html
index e625343b3..7a09f60dd 100644
--- a/bookwyrm/templates/layout.html
+++ b/bookwyrm/templates/layout.html
@@ -41,7 +41,7 @@
             </div>
         </form>
 
-        <label for="main-nav" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mainNav" onclick="toggleMenu(this)" tabindex="0">
+        <label for="main-nav" role="button" class="navbar-burger pulldown-menu" aria-label="menu" aria-expanded="false" data-target="mainNav" tabindex="0">
             <div class="navbar-item mt-3">
                 <div class="icon icon-dots-three-vertical" title="Main navigation menu">
                     <span class="is-sr-only">Main navigation menu</span>
@@ -66,7 +66,7 @@
         <div class="navbar-end">
 	    {% if request.user.is_authenticated %}
             <div class="navbar-item has-dropdown is-hoverable">
-                <div class="navbar-link" role="button" aria-expanded=false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="navbar-dropdown"><p>
+                <div class="navbar-link pulldown-menu" role="button" aria-expanded="false" tabindex="0" aria-haspopup="true" aria-controls="navbar-dropdown"><p>
                     {% include 'snippets/avatar.html' with user=request.user %}
                     {% include 'snippets/username.html' with user=request.user %}
                 </p></div>
diff --git a/bookwyrm/templates/snippets/shelf_selector.html b/bookwyrm/templates/snippets/shelf_selector.html
index cf82bcb58..1946b1229 100644
--- a/bookwyrm/templates/snippets/shelf_selector.html
+++ b/bookwyrm/templates/snippets/shelf_selector.html
@@ -1,6 +1,6 @@
 <div class="dropdown">
     <div class="dropdown-trigger">
-        <label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
+        <label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
             <div class="button">
                 <span>Change shelf</span>
                 <span class="icon icon-arrow-down" aria-hidden="true"></span>
diff --git a/bookwyrm/templates/snippets/shelve_button.html b/bookwyrm/templates/snippets/shelve_button.html
index 9723d3a13..663e99044 100644
--- a/bookwyrm/templates/snippets/shelve_button.html
+++ b/bookwyrm/templates/snippets/shelve_button.html
@@ -27,7 +27,7 @@
 
     <div class="dropdown">
         <div class="dropdown-trigger">
-            <label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" onclick="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
+            <label for="shelf-select-dropdown-{{ uuid }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ uuid }}">
                 <div class="button is-small">
                     <span class="icon icon-arrow-down"><span class="is-sr-only">More shelves</span></span>
                 </div>