Une question de la FAQ — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 5)

Une question de la FAQ

Composants · niveau 2

Énoncé

Écrire un composant QuestionFaq : sa prop question est le texte d'un bouton qui montre ou cache la réponse, fournie par un emplacement. Le bouton indique son état aux lecteurs d'écran et désigne la zone qu'il contrôle, avec un identifiant différent pour chaque instance.

Corrigé


const { createApp, ref } = Vue;

let compteur = 0;

const QuestionFaq = {
  template: "#modele-question-faq",
  props: { question: { type: String, required: true } },
  setup() {
    compteur += 1;
    // Un identifiant propre à chaque instance, pour aria-controls
    return { ouverte: ref(false), id: `reponse-${compteur}` };
  },
};

createApp({ components: { QuestionFaq } }).mount("#app");


<template id="modele-question-faq">
  <section class="faq">
    <h2>
      <button type="button" :aria-expanded="ouverte" :aria-controls="id" @click="ouverte = !ouverte">
        {{ question }}
      </button>
    </h2>
    <div v-show="ouverte" :id="id"><p><slot></slot></p></div>
  </section>
</template>

Le titre <h2> contient le bouton : la question reste un titre pour la navigation au clavier, et un bouton pour l'action. aria-expanded donne l'état, aria-controls désigne la réponse. Le compteur, partagé par toutes les instances parce qu'il est hors du composant, donne reponse-1, reponse-2… : deux questions n'ont jamais le même identifiant. Après un clic sur la seconde question :


Questions fréquentes
Puis-je retirer ma commande en boutique ?
Livrez-vous sur le campus ?
Oui, pour 2 € ; la livraison est gratuite dès 30 € d’achat.