Fixes review/comment/quote tabs in create status form

bookwyrm/static/js/shared.js

@@ -34,6 +34,22 @@ function rate_stars(e) {
 function tabChange(e) {
     var target = e.target.closest('li')
     var identifier = target.getAttribute('data-id');
+
+    var parent_element = target.parentElement
+    var tabs = parent_element.getElementsByTagName('label');
+    for (i = 0; i < tabs.length; i++) {
+        var tab = tabs[i].parentElement;
+        if (tab.getAttribute('data-id') == identifier) {
+            tab.className += ' is-active';
+        } else {
+            tab.className = tab.className.replace('is-active', '');
+        }
+    }
+}
+
+function nestedTabChange(e) {
+    var target = e.target.closest('li')
+    var identifier = target.getAttribute('data-id');
     var parent_element = target.parentElement.closest('li').parentElement;
 
     var tabs = parent_element.getElementsByTagName('label');
@@ -45,8 +61,6 @@ function tabChange(e) {
             tab.className = tab.className.replace('is-active', '');
         }
     }
-
-    var el = document.getElementById(identifier);
 }
 
 function ajaxPost(form) {

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)"><a>{% include 'snippets/book_cover.html' with book=book size="medium" %}</a></label>
+                                <label for="book-{{ book.id }}" onclick="nestedTabChange(event)"><a>{% include 'snippets/book_cover.html' with book=book size="medium" %}</a></label>
                             </li>
                             {% endfor %}
                         </ul>

bookwyrm/templates/snippets/create_status.html

@@ -2,15 +2,27 @@
 {% load fr_display %}
 
 <div class="tabs is-boxed">
-    <ul>
+    <ul role="tablist">
         <li class="is-active" data-id="tab-review-{{ book.id }}" data-category="tab-option-{{ book.id }}">
-            <label for="review-{{ book.id }}" onclick="tabChange(event)"><a>Review</a></label>
+            <label for="review-{{ book.id }}">
+                <div onclick="tabChange(event)" 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}}" onclick="tabChange(event)"><a>Comment</a></label>
+            <label for="comment-{{ book.id}}">
+                <div onclick="tabChange(event)" 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 }}" onclick="tabChange(event)"><a>Quote</a></label>
+            <label for="quote-{{ book.id }}">
+                <div onclick="tabChange(event)" role="tab" tabindex="0">
+                    <a>Quote</a>
+                </div>
+            </label>
         </li>
     </ul>
 </div>
@@ -22,7 +34,7 @@
 
 <div>
     <input class="toggle-control" type="radio" name="status-tabs-{{ book.id }}" id="comment-{{ book.id }}">
-    {% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thougts on '"|add:book.title|add:"'" %}
+    {% include 'snippets/create_status_form.html' with type="comment" placeholder="Some thoughts on '"|add:book.title|add:"'" %}
 </div>
 
 <div>