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) { function toggleMenu(e) {
var el = e.target.closest('.pulldown-menu'); var el = e.currentTarget;
el.setAttribute('aria-expanded', el.getAttribute('aria-expanded') == 'false'); 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) { function ajaxPost(form) {

14
bookwyrm/templates/snippets/components/dropdown.html
View File

@ -1,13 +1,13 @@
<div class="dropdown is-hoverable {% if right %}is-right{% endif %}"> {% load bookwyrm_tags %}
<div class="dropdown-trigger"> {% with 0|uuid as uuid %}
<button type="button" class="button pulldown-menu {{ class }}" aria-expanded="false" class="pulldown-menu" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}"> <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 %} {% block dropdown-trigger %}{% endblock %}
</button> </button>
</div> <div class="dropdown-menu">
<div class="dropdown-menu" id="shelf-select-{{ book.id }}" role="menu"> <ul class="dropdown-content" role="menu" id="menu-options-{{ book.id }}">
<ul class="dropdown-content">
{% block dropdown-list %}{% endblock %} {% block dropdown-list %}{% endblock %}
</ul> </ul>
</div> </div>
</div> </div>
{% endwith %}