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

a11y: toggle nav button label when opened (#75679) #206

Merged
fpeters merged 1 commits from wip/75679-a11y-open-menu-label into main 2023-04-03 18:10:07 +02:00
Conversation 0 Commits 1 Files Changed 1 +19 -3
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 23dbec3ac7 - Show all commits

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');
tjund commented 2023-04-03 17:16:28 +02:00
Outdated
Review
Copy Link

Cibler un element via une class utilitaire n'est pas une bonne idée.

Ensuite, l'attibut aria-label remplace le contenu, c'est à cet attribut qu'il faut faire changer le contenu.

Cibler un element via une class utilitaire n'est pas une bonne idée. Ensuite, l'attibut aria-label remplace le contenu, c'est à cet attribut qu'il faut faire changer le contenu.
fpeters commented 2023-04-03 17:40:37 +02:00
Outdated
Review
Copy Link

Ensuite, l'attibut aria-label remplace le contenu, c'est à cet attribut qu'il faut faire changer le contenu.

L'audit notait de manière confuse "L'attribut aria-label est toujours "Ouvrir le menu" même quand il est ouvert", j'ai donc imaginé que ça lisait "Ouvrir le menu" et pas le "Menu" de aria-label, et c'est donc ça que j'ai changé.

Je fais une synthèse dans le patch modifié, avec désormais un seul libellé :

-      <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>

(et ça donne ainsi un id qui peut être ciblé, plut

> Ensuite, l'attibut aria-label remplace le contenu, c'est à cet attribut qu'il faut faire changer le contenu. L'audit notait de manière confuse "L'attribut aria-label est toujours "Ouvrir le menu" même quand il est ouvert", j'ai donc imaginé que ça lisait "Ouvrir le menu" et pas le "Menu" de aria-label, et c'est donc ça que j'ai changé. Je fais une synthèse dans le patch modifié, avec désormais un seul libellé : ``` - <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> ``` (et ça donne ainsi un id qui peut être ciblé, plut
tjund commented 2023-04-03 17:43:31 +02:00
Outdated
Review
Copy Link

Top. Parfait pour moi comme ça.

Top. Parfait pour moi comme ça.
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 %}