yul/bookwyrm-mastodon
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Makes dropdown clickable, and work with screen reader

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

7
bookwyrm/static/js/shared.js
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) {

18
bookwyrm/templates/snippets/components/dropdown.html
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 }}">
{% 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 %}