トップページに表示されるtableをキーボードおよびスクリーンリーダーで操作可能にする

magi1125 commented 4 years ago

改善詳細 / Details of Improvement

陽性患者の属性の表が、以下2点の理由によりキーボードで操作できない状態になっています
- インラインスクロールになっているが、表内にフォーカスを受け取れる要素がないためキーボードでスクロールできない（フォーカスを受け取れる要素があれば、そこにフォーカスを移したあと上下キーでスクロールが可能になります）
- 列見出しのクリックによるソートがspan要素で実装されているため、キーボードフォーカスを受け取ることができず操作できない（なお、スクリーンリーダーでもインタラクティブ要素だとわからないため、同じく操作が困難な状態になります）

スクリーンショット / Screenshot

スクリーンショット 2020-03-12 0 07 11

期待する見せ方・挙動 / Expected behavior

<button type="button">日付</button>のように、列見出しをbutton要素にすることでインタラクティブ要素としてキーボードフォーカス可能になります。またスクリーンリーダーでも「ボタン」と読み上げられ、操作対象だと理解することができます。

動作環境・ブラウザ / Environment

すべて

af12066 commented 4 years ago

当該箇所はVuetifyのv-data-tableコンポーネントを使用しており、キーボード操作に関してはVuetify本家にissueが立てられています。 https://github.com/vuetifyjs/vuetify/issues/9164

magi1125 commented 4 years ago

ohなるほど、とするとそれ待ちって感じでしょうか。

magi1125 commented 4 years ago

メインコンテンツの一部に対してアクセス不能になっている点を鑑みてhelp wantedラベルをつけました。

shunito commented 4 years ago

本件、DOMがマウントされたタイミングでspanにtabIndex="0"つけることでタブでフォーカスできそうです。いまマージ待ちのが取り込まれたら対応します。

shunito commented 4 years ago

見出しのspanだけでなくてテーブルそのものにも tabIndex="0" つけとくかな。

shunito commented 4 years ago

@magi1125 こちら、プルリク送りました。テーブルとテーブル見出しに tabIndex="0" 付与しましたが、それだけで解決してるか不安なのでレビューお願いできれば。

magi1125 commented 4 years ago

@shunito ありがとうございます。該当tableにtabindex="0"が付与されており、chromeでtableにフォーカスして、矢印キーやスペースキーで上下スクロールできることを確認しました！なおspanにもフォーカスが移ることが確認できたのですが、ここにフォーカス移せるのだとすると、アクティベートしてソートが発火することを期待しちゃいそう。いったんspanのtabindexは外すか、マウスクリック時のデフォルト・昇順・降順のトグルをキーボードでも可能にするか、の2択が良さげです。

magi1125 commented 4 years ago

アクティベートしてソートが発火することを期待

ひょっとして、spanにrole="button"足すだけで良かったりするかもしれません。

shunito commented 4 years ago

本件、色々やってみたんですがrole=“button”の追加だけではダメでした。残念。リトライで。

magi1125 commented 4 years ago

https://github.com/tokyo-metropolitan-gov/covid19/pull/2447 で追加されたtableはキーボード操作できないみたいですね（アコーディオン開閉ボタンにフォーカスが合うが、その中のtableにはフォーカスできないのでスクロールできないっぽい）。というのと、tableが増えたこともあり、ソート切り替えをキーボード操作可能にするのは必要性高まった感があります。

Tokyo-Metro-Gov / covid19