Fix/ replace hamburger menu with dialog element

[totocalcio]

🔗 Linked issue

https://github.com/vuejs-jp/vuefes-2024-backside/issues/368

📚 Description

• dialog要素(モードレス)に置き換え
• ハンバーガーメニューのトリガーとなるbutton要素のアクセシビリティを改善
• dialog要素に置き換えたことでTransitionコンポーネントを使用できなくなったため、CSSで対応。

📝 Note

• dialog要素のaria-labelが必要かどうか判断に悩んでおり、不要であれば指摘してほしい。
• アニメーションの速度が既存と差異が発生してしまっているように見える。（特に閉じる時）
• Mac / Safariは閉じる時のアニメーションが無効となっている
• iPhone / Safari は開くときも閉じるときも無効
  • ただし、既存も無効となっている。
• autofocusはdialog要素にするか悩んだ末、直前のボタン操作でメニューを開くことが理解できるため、リスト1項目目に設定
  • iPhoneで確認するとフォーカスリングが表示されるので既存と異なる
    

[netlify]

✅ Deploy Preview for vuefes-2024 ready!

Name	Link
🔨 Latest commit	5c2e8d6
🔍 Latest deploy log	https://app.netlify.com/sites/vuefes-2024/deploys/670e94b28ec0f300082540dc
😎 Deploy Preview	https://deploy-preview-379--vuefes-2024.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[totocalcio]

@KannoStanfoot
ハンバーガーメニューの対応しましたので、レビューお願いします。

@jiyuujin
既存と差異が発生してしまっている部分がいくつかあり、Noteに記載しています。
許容できる範囲内か確認お願いします。

[jiyuujin]

dialog要素のaria-labelが必要かどうか

個人的にはaria-labelあって問題は無さそうです（表にタイトルが出ている訳では無いですし

アニメーションの速度が既存と差異が発生してしまっているように見える。（特に閉じる時）

たしかに気持ちちょっと早く閉じているようには見えますが、
明確な仕様も決まっていないので許容範囲かと

• Mac / Safariは閉じる時のアニメーションが無効となっている
• iPhone / Safari は開くときも閉じるときも無効
  • ただし、既存も無効となっている。
• autofocusはdialog要素にするか悩んだ末、直前のボタン操作でメニューを開くことが理解できるため、リスト1項目目に設定

👍🏻（承知しました

[genj11]

@totocalcio
実装ありがとうございます。
dialog要素のaria-labelは不要です。

不要な理由

• ハンバーガーメニューという文言が一般ユーザーにあまり認知されていない
• ハンバーガーメニュー展開時、dialog要素ではなく内部の Message リンクへフォーカスが当たる

Tips

※今回の実装はここまで行う必要ないと思います。ハンバーガーメニューのa11yを行う際、展開後どのようにユーザーがそのメニューを閉じるかも合わせて考慮すると丁寧なので知見共有します。

ハンバーガーメニューを閉じさせる設計パターン

1. ハンバーガーメニュー内の最後の要素をフォーカスアウトすると、メニューを閉じる処理が発火する
2. ハンバーガーメニュー内の最後のフォーカス要素を「閉じるボタン」にする
3. フォーカストラップを用い、ハンバーガーメニュー外にフォーカスが当たらないようにする（dialog内で無限ループすることで、メニュー内の任意の閉じるボタンへ誘導する）。

[genj11]

aria-label はなくて良いと思います。
以下に詳細記載しました。

#379 (comment)

[totocalcio]

@KannoStanfoot @jiyuujin
レビューとTipsの共有ありがとうございました。
非常に参考になりました。今後ぜひ活用させて頂きます。

今回はaria-labelの削除のみ対応致しましたので、再度レビューお願い致します。

またNetlifyのデプロイがブロックされており、ブラウザ確認ができておりません。
一部CSSを修正したため、クロスブラウザで確認したいので、
プレビュー環境へ反映後チェックします。

[jiyuujin]

ひとまず netlify のプレビュー環境については無視で良いです mm cc: @totocalcio

[genj11]

LGTM