entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 9 Releases Wiki Activity

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

This commit is contained in:
Frédéric Péters 2023-03-23 17:38:14 +01:00
parent e062e31c16
commit 460825aa3b
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
templates/includes/nav.html
View File

@ -3,10 +3,10 @@
<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">
<span class="sr-only">Ouvrir le menu</span>
<button id="nav-button" class="gru-nav-button" aria-labelledby="nav-button--label">
<span class="sr-only" id="nav-button--label">Ouvrir le menu</span>
<span class="icon-bar icon-bar-1"></span>
<span class="icon-bar icon-bar-2"></span>
<span class="icon-bar icon-bar-3"></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 = document.getElementById('nav-button--label');
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 %}