entrouvert
/
publik-base-theme
16
1
Fork 1
Code Issues Pull Requests 11 Releases Wiki Activity

a11y: toggle nav button label when opened (#75679)
gitea/publik-base-theme/pipeline/head This commit looks good Details

Frédéric Péters 2023-03-23 17:38:14 +01:00
parent 1ece39a340
commit 41db03a375
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
templates/includes/nav.html
View File

@ -3,9 +3,9 @@
<nav role="navigation" class="site-nav">
<div id="nav-wrapper" class="gru-nav-wrapper">
{% block nav-pre %}{% endblock %}
<div id="nav" class="gru-nav togglable">
<div id="nav" class="gru-nav">
{% block nav-top %}{% endblock %}
<button id="nav-button" class="gru-nav-button togglable" aria-label="Menu">
<button id="nav-button" class="gru-nav-button" aria-label="Menu">
<span class="sr-only">Ouvrir le menu</span>
<span class="icon-bar icon-bar-1"></span>
<span class="icon-bar icon-bar-2"></span>
@ -21,3 +21,19 @@
{% block nav-post %}{% endblock %}
</div> <!-- nav-wrapper -->
</nav>
{% block nav-button-script %}
<script>
(function() {
const nav_button = document.getElementById('nav-button');
const nav_button_label = nav_button.getElementsByClassName('sr-only')[0];
nav_button.addEventListener('click', function() {
if (nav_button.classList.toggle('toggled')) {
nav_button_label.textContent = 'Fermer le menu';
} else {
nav_button_label.textContent = 'Ouvrir le menu';
}
});
})();
</script>
{% endblock %}