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.
This commit is contained in:
Mouse Reeve 2021-01-17 16:29:46 -08:00
parent 9b8e5a4139
commit 0a70d6e981
2 changed files with 14 additions and 11 deletions

View file

@ -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) {

View file

@ -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 }}">
{% 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>
<div class="dropdown-menu" id="shelf-select-{{ book.id }}" role="menu">
<ul class="dropdown-content">
<div class="dropdown-menu">
<ul class="dropdown-content" role="menu" id="menu-options-{{ book.id }}">
{% block dropdown-list %}{% endblock %}
</ul>
</div>
</div>
{% endwith %}