ナビゲーションバーをキーボード操作可能に

[mehm8128]

プレビュー環境
prod: https://4025-prod.traq-preview.trapti.tech/
dev: https://4025-dev.traq-preview.trapti.tech/

思ったより変更点が多くなってしまいました、分からないところあれば聞いてください

やったこと

• チャンネルボタンをdivではなくてrouter-linkに

  • traQ_S-UI/src/composables/useOpenLink.ts

    Line 38 in 042554e

    * できる限りは<router-link>などによってaタグのhref属性を利用するようにすること

    とあるのでopenLinkとの対応は問題なさそう
• 各aria-属性をつけた
• 逆にaria-selectedをつけても意味のないroleのHTMLタグについているaria-selectedをdata-is-selectedに書き換え
  • linkroleにはaria-currentをつけるべき
    • つけたけどスクリーンリーダーには上手く読み上げられなかった、スクリーンリーダーによるのかな
• タブにtab tablistなどのroleをつけた
  • tabpanelもつけるべきだけど、Vueのコンポーネントにつけたら型エラーになったので一旦諦めた
  • tabroleはaria-selectedつけていいやつ
• ボタンなのにdivタグで書かれていたところをbuttonタグを使うように
• buttonタグにしたりしてフォーカスできるようになったところの:focusや:focus-visibleに:hoverと同じCSSをつけた

確認してほしいこと

• 今まで通り動くか
  • もちろんスマホサイズでも
  • 特にChannelElementはHTMLタグの構造も変えたのでスタイルが崩れていないか確認してほしいです
• キーボードで操作できるか
  • ホームタブ以外はフォーカス時のCSSが効いていないところあり
• (できれば)スクリーンリーダーでもいい感じに読み上げられるか

スクリーンリーダーとかは自己満足なので、余裕なければ最低限上2つを確認してもらえれば大丈夫です

やること

• div→buttonにしたらなぜかチャンネルのCSSが崩壊した
• フォーカス中のデザインを依頼
  • 別PRでやる

遷移先のページとかモーダルとか難しそうなポップアップナビゲーターは別PRで

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.35%. Comparing base (2075787) to head (3dd6840).
Report is 47 commits behind head on master.

❗ Current head 3dd6840 differs from pull request most recent head bf23f13. Consider uploading reports for the commit bf23f13 to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4025      +/-   ##
==========================================
- Coverage   86.36%   86.35%   -0.01%     
==========================================
  Files          66       66              
  Lines        4722     4719       -3     
  Branches      565      564       -1     
==========================================
- Hits         4078     4075       -3     
  Misses        638      638              
  Partials        6        6              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[nokhnaton]

チャンネルリストなどで、tabを押しても#の部分にしかフォーカスが当たらないのが少し気になりました。
現状よりは改善されてるので、とりあえずこのままマージでもいいと思います！

[nokhnaton]

NITS
<router-link>と<channel-element-hash>, <channel-element-name>と<channel-element-unread-badge>の順番は逆のほうが自然な気がします

[mehm8128]

<router-link>と<channel-element-hash>は確かにそうですね
<channel-element-name>と<channel-element-unread-badge>は逆だと表示がおかしくなる気がするのですが、なぜですか？(フォーカス順には特に影響しない気がする)

[nokhnaton]

あ、<channel-element-unread-badge>が指してるもの勘違いしてました。このままで大丈夫です

[mehm8128]

tabを押しても#の部分にしかフォーカスが当たらない

これがよく分からなかったのですが、どんな感じですか？
僕の手元だと↓の動画みたいに、一通りフォーカスが当たってenterで開閉までできるようになっています

chrome_7D8NXhGZSO.mp4

[nokhnaton]

手元のブラウザ(Vivaldi)だとこうなってたんですけど、Chromeで動かしてみると特に問題なかったので、大きな問題にはならない気がします。
https://github.com/traPtitech/traQ_S-UI/assets/104210327/67a1fb80-5396-445d-ad5e-e6653b532e6c

[nokhnaton]

マージしちゃって大丈夫だと思います!

[mehm8128]

chromeとfirefoxでは動いているのでvivaldiの問題っぽいですね🤔
とりあえずマージしちゃいます