Merge pull request #472 from mouse-reeve/accessible-navbar-dropdown

Make the top bar dropdown accessible to NVDA screenreaders
This commit is contained in:
Mouse Reeve 2021-01-03 10:13:31 -08:00 committed by GitHub
commit 71e1e259b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -63,33 +63,45 @@
<div class="navbar-end"> <div class="navbar-end">
{% if request.user.is_authenticated %} {% if request.user.is_authenticated %}
<div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-item has-dropdown is-hoverable">
<div class="navbar-link"><p> <div class="navbar-link" role="button" aria-expanded=false" onmouseover="toggleMenu(this)" tabindex="0" aria-haspopup="true" aria-controls="navbar-dropdown"><p>
{% include 'snippets/avatar.html' with user=request.user %} {% include 'snippets/avatar.html' with user=request.user %}
{% include 'snippets/username.html' with user=request.user %} {% include 'snippets/username.html' with user=request.user %}
</p></div> </p></div>
<div class="navbar-dropdown"> <ul class="navbar-dropdown" id="navbar-dropdown">
<li>
<a href="/direct-messages" class="navbar-item"> <a href="/direct-messages" class="navbar-item">
Direct messages Direct messages
</a> </a>
</li>
<li>
<a href="/user/{{request.user.localname}}" class="navbar-item"> <a href="/user/{{request.user.localname}}" class="navbar-item">
Profile Profile
</a> </a>
</li>
<li>
<a href="/user-edit" class="navbar-item"> <a href="/user-edit" class="navbar-item">
Settings Settings
</a> </a>
</li>
<li>
<a href="/import" class="navbar-item"> <a href="/import" class="navbar-item">
Import books Import books
</a> </a>
</li>
{% if perms.bookwyrm.create_invites %} {% if perms.bookwyrm.create_invites %}
<li>
<a href="/invite" class="navbar-item"> <a href="/invite" class="navbar-item">
Invites Invites
</a> </a>
</li>
{% endif %} {% endif %}
<hr class="navbar-divider"> <hr class="navbar-divider">
<li>
<a href="/logout" class="navbar-item"> <a href="/logout" class="navbar-item">
Log out Log out
</a> </a>
</div> </li>
</ul>
</div> </div>
<div class="navbar-item"> <div class="navbar-item">
<a href="/notifications"> <a href="/notifications">