[Web]Vue.jsでメニューの表示・非表示とWAI-ARIAの属性を同期する

WAI-ARIAの切り替えにVue.jsがいいとを読んだのですが、あまりよくわかりませんでした。そこで、Vue.jsを使って表示・非表示とWAI-ARIAの属性を切り替えを行うメニューを自分なりに作ってみました。

コード

<nav id="nav">
  <h2 class="visually-hidden">メインメニュー</h2>
  <button type="button" class="button" aria-haspopup="true" aria-controls="menu" :aria-expanded="ariaExpanded"
    @click="onclick">メニュー</button>
  <ul id="menu" class="menu" :aria-hidden="ariaHidden" v-show="flag">
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー3</a></li>
  </ul>
</nav>


  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.29/dist/vue.global.prod.js"></script>

Vue.createApp({
  data() {
    return {
      flag: false,
      ariaHidden: true,
      ariaExpanded: false
    };
  },
  methods: {
    onclick() {
      this.flag = !this.flag;
      this.ariaHidden = !this.ariaHidden;
      this.ariaExpanded = !this.ariaExpanded; 
    }
  }
}).mount('#nav');

解説

v-onで実行

v-onディレクティブのclickイベントでonclickメソッドを実行します。

v-showで表示・非表示を切り替える

デフォルトでv-showの変数「flag」がfalseになっていて、メニューは非表示になっています。ボタンをクリックすると、trueになり表示されます。ボタンをクリックするごとに切り替えるのが次のコードのようです。

this.flag = !this.flag;

多分、jQueryのtoggle()のような感じで切り替えられる感じでしょうか？

メモ：v-onディレクティブの省略記法

v-on:click → @click

WAI-ARIAの属性

利用してををメニューの開閉で切り替わるのは以下の属性です。

v-bindディレクティブ

v-bindディレクティブは属性の値を制御できます。ここではaria-hidden属性の値と、ボタンのaria-expanded属性の値を変数「ariaExpanded」、「ariaHidden」にして以下のように記述しています。

<button (略) :aria-expanded="ariaExpanded">メニュー</button>

<ul (略) :aria-hidden="ariaHidden">

メモ：v-bindの省略記法

v-bind:(属性名) → :(属性名)

WAI-ARIAの属性の切り替え

v-showのflagと同じようにしてみました。これでtrueとfalseをクリックしたときに切り替わります。

this.ariaHidden = !this.ariaHidden;
this.ariaExpanded = !this.ariaExpanded; 

デモ

以上を元にデモを作りました。実際にボタンをクリックするとインスペクタで属性の値の変化を確認できると思います。

アニメーションは設定していませんが、CSS次第でドロップダウンメニューにもドロワーにもなりうると思います。

まとめ

WAI-ARIAの属性の切り替えのコード量はかなり少なくなったように思います。あと、モーダルのようなメニューを想定して、フォーカスの移動にもチャレンジしたのですがうまくいかなかったので今後の課題です。

下記の参考書籍の中ではアニメーションもVue.jsで用意されていたのですが、今回は取り上げていません。純粋なCSSのtransitionに比べて使いにくいなと思いました。アニメーションするCSSプロパティが少ないようです。line-heightが対応していなかったように思います。

参考書籍

これからはじめるVue.js 3実践入門