From 0a70d6e98109b635d60ffef00dea935c919f4794 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sun, 17 Jan 2021 16:29:46 -0800
Subject: [PATCH] Makes dropdown clickable, and work with screen reader

I'm lightly peeved with bulma that it wasn't clear how to make hover
menus accessible, but clickable menus are just fine with my anyway.
---
 bookwyrm/static/js/shared.js                   |  7 +++++--
 .../snippets/components/dropdown.html          | 18 +++++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js
index f4b9a5888..edd1653ec 100644
--- a/bookwyrm/static/js/shared.js
+++ b/bookwyrm/static/js/shared.js
@@ -152,8 +152,11 @@ function handleTabChange(target, parentElement) {
 }
 
 function toggleMenu(e) {
-    var el = e.target.closest('.pulldown-menu');
-    el.setAttribute('aria-expanded', el.getAttribute('aria-expanded') == 'false');
+    var el = e.currentTarget;
+    var expanded = el.getAttribute('aria-expanded') == 'false';
+    el.setAttribute('aria-expanded', expanded);
+    var target = document.getElementById(el.getAttribute('data-controls'));
+    addRemoveClass(target, 'is-active', expanded);
 }
 
 function ajaxPost(form) {
diff --git a/bookwyrm/templates/snippets/components/dropdown.html b/bookwyrm/templates/snippets/components/dropdown.html
index 54714dcb6..48a808d48 100644
--- a/bookwyrm/templates/snippets/components/dropdown.html
+++ b/bookwyrm/templates/snippets/components/dropdown.html
@@ -1,13 +1,13 @@
-<div class="dropdown is-hoverable {% if right %}is-right{% endif %}">
-    <div class="dropdown-trigger">
-        <button type="button" class="button pulldown-menu {{ class }}" aria-expanded="false" class="pulldown-menu" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
-            {% block dropdown-trigger %}{% endblock %}
-        </button>
-    </div>
-    <div class="dropdown-menu" id="shelf-select-{{ book.id }}" role="menu">
-        <ul class="dropdown-content">
+{% load bookwyrm_tags %}
+{% with 0|uuid as uuid %}
+<div class="dropdown {% if right %}is-right{% endif %}" id="menu-{{ uuid }}">
+    <button type="button" class="button dropdown-trigger pulldown-menu {{ class }}" aria-expanded="false" class="pulldown-menu" aria-haspopup="true" aria-controls="menu-options-{{ uuid }}" data-controls="menu-{{ uuid }}">
+        {% block dropdown-trigger %}{% endblock %}
+    </button>
+    <div class="dropdown-menu">
+        <ul class="dropdown-content" role="menu" id="menu-options-{{ book.id }}">
             {% block dropdown-list %}{% endblock %}
         </ul>
     </div>
 </div>
-
+{% endwith %}