From c37c6aae4057217dbc92c046cf41c9c8a2e8d8ec Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sun, 8 Nov 2020 19:34:41 -0800
Subject: [PATCH] nested covers tabs should work with screen reader

---
 bookwyrm/static/js/shared.js | 38 ++++++++++++------------------------
 bookwyrm/templates/feed.html |  8 +++++++-
 2 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index b4f6589e..5be6ed63 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -31,35 +31,23 @@ function rate_stars(e) {
     return true;
 }
 
-function tabChange(e) {
-    var target = e.target.closest('li');
-
-    var parent_element = target.parentElement;
-    var tabs = parent_element.getElementsByTagName('label');
-
-    parent_element.querySelectorAll('[aria-selected="true"]')
-        .forEach(t => t.setAttribute("aria-selected", false));
-    e.target.parentElement.setAttribute("aria-selected", true);
-
-    parent_element.querySelectorAll('li')
-        .forEach(t => t.className='');
-    target.className += ' is-active';
-}
-
-function nestedTabChange(e) {
+function tabChange(e, nested) {
     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');
-    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', '');
-        }
+    if (nested) {
+        var parent_element = target.parentElement.closest('li').parentElement;
+    } else {
+        var parent_element = target.parentElement;
     }
+
+    parent_element.querySelectorAll('[aria-selected="true"]')
+        .forEach(t => t.setAttribute("aria-selected", false));
+    target.querySelector('[role="tab"]').setAttribute("aria-selected", true);
+
+    parent_element.querySelectorAll('li')
+        .forEach(t => t.className='');
+    target.className = 'is-active';
 }
 
 function ajaxPost(form) {
diff --git a/bookwyrm/templates/feed.html b/bookwyrm/templates/feed.html
index ecdce4ab..46e7bc2a 100644
--- a/bookwyrm/templates/feed.html
+++ b/bookwyrm/templates/feed.html
@@ -21,7 +21,13 @@
                         <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="nestedTabChange(event)"><a>{% include 'snippets/book_cover.html' with book=book size="medium" %}</a></label>
+                                <label for="book-{{ book.id }}" onclick="tabChange(event, nested=true)">
+                                    <div role="tab" tabindex="0" aria-selected="{% if shelf_counter == 1 and forloop.first %}true{% else %}false{% endif %}">
+                                        <a>
+                                            {% include 'snippets/book_cover.html' with book=book size="medium" %}
+                                        </a>
+                                    </div>
+                                </label>
                             </li>
                             {% endfor %}
                         </ul>