rafaelcaricio/moviewyrm
1
0
Fork 0
forked from mirrors/bookwyrm
Code Issues 4 Pull requests Projects Releases Wiki Activity

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

Browse source 
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
1 changed files with 33 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
bookwyrm/templates/layout.html
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">
<a href="/direct-messages" class="navbar-item"> <li>
Direct messages <a href="/direct-messages" class="navbar-item">
</a> Direct messages
<a href="/user/{{request.user.localname}}" class="navbar-item"> </a>
Profile </li>
</a> <li>
<a href="/user-edit" class="navbar-item"> <a href="/user/{{request.user.localname}}" class="navbar-item">
Settings Profile
</a> </a>
<a href="/import" class="navbar-item"> </li>
Import books <li>
</a> <a href="/user-edit" class="navbar-item">
Settings
</a>
</li>
<li>
<a href="/import" class="navbar-item">
Import books
</a>
</li>
{% if perms.bookwyrm.create_invites %} {% if perms.bookwyrm.create_invites %}
<a href="/invite" class="navbar-item"> <li>
Invites <a href="/invite" class="navbar-item">
</a> Invites
</a>
</li>
{% endif %} {% endif %}
<hr class="navbar-divider"> <hr class="navbar-divider">
<a href="/logout" class="navbar-item"> <li>
Log out <a href="/logout" class="navbar-item">
</a> Log out
</div> </a>
</li>
</ul>
</div> </div>
<div class="navbar-item"> <div class="navbar-item">
<a href="/notifications"> <a href="/notifications">