Onglets accessibles

<div id="app">
  <div role="tablist" aria-label="Fiche du livre">
    <button v-for="o in onglets" :id="'onglet-' + o.id" :key="o.id" type="button" role="tab"
            :aria-selected="o.id === actif" :aria-controls="'panneau-' + o.id"
            :tabindex="o.id === actif ? 0 : -1" @click="actif = o.id">{{ o.titre }}</button>
  </div>
  <section v-for="o in onglets" v-show="o.id === actif" :id="'panneau-' + o.id" :key="o.id"
           role="tabpanel" :aria-labelledby="'onglet-' + o.id">
    <p>{{ o.contenu }}</p>
  </section>
</div>

const { createApp, ref } = Vue;

createApp({
  setup() {
    const onglets = [
      { id: "resume", titre: "Résumé", contenu: "Un cours complet, des bases aux threads." },
      { id: "fiche", titre: "Fiche", contenu: "412 pages, Informatique." },
      { id: "avis", titre: "Avis", contenu: "« Clair et progressif. »" },
    ];
    const actif = ref("resume");
    return { onglets, actif };
  },
}).mount("#app");

Après un clic sur « Fiche », l'état des onglets puis des panneaux :

Résumé aria-selected=false tabindex=-1
Fiche aria-selected=true tabindex=0
Avis aria-selected=false tabindex=-1
panneau-resume caché
panneau-fiche visible
panneau-avis caché

v-show : les panneaux existent tous, comme l'attendent les aria-controls, et passer d'un onglet à l'autre ne recrée rien. Seul l'onglet actif a tabindex="0" ; un clavier complet ajouterait les flèches gauche et droite (@keydown.right, @keydown.left).