Menu repliable — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 2)

Menu repliable

Gabarits et directives · niveau 2

Énoncé

Refaire avec Vue le menu repliable de la Librairie (livre JavaScript) : un bouton « Menu » qui ouvre et ferme la liste des liens, avec aria-expanded et aria-controls, et la touche Échap qui le ferme quand le focus est sur le bouton.

Corrigé


<nav id="app" aria-label="Navigation principale">
  <button type="button" aria-controls="menu" :aria-expanded="ouvert"
          @click="ouvert = !ouvert" @keydown.esc="ouvert = false">Menu</button>
  <ul v-show="ouvert" id="menu">
    <li><a href="index.html">Accueil</a></li>
    <li><a href="catalogue.html">Catalogue</a></li>
    <li><a href="panier.html">Panier</a></li>
  </ul>
</nav>


const { createApp, ref } = Vue;

createApp({
  setup() {
    return { ouvert: ref(false) };
  },
}).mount("#app");

Au chargement, après un clic sur « Menu », puis après Échap :


aria-expanded=false, liste cachée
aria-expanded=true, liste visible
aria-expanded=false, liste cachée, focus sur Menu

Le même booléen pilote aria-expanded et v-show : l'état annoncé et l'état visible ne peuvent pas diverger, alors qu'au livre JavaScript il fallait les mettre à jour ensemble. Le focus reste sur le bouton, d'où l'on peut rouvrir le menu.