Toastコンポーネントの非表示時のキーボードフォーカスと読み上げをなくす

[tokimari]

今回、Ameba Newsでの導入事例で、Toastが非表示にもかかわらずToast Componentにキーボードフォーカスできてしまい、スクリーンリーダーで思わぬ読み上げが発生するなど意図しない挙動が見られました。

解決したいこと

下記２つの解決案を模索したいです！

1. Toastが非表示の時にToastにキーボードフォーカスがあたる
2. 1の時にスクリーンリーダーで想定外の読み上げ（下図イメージ）が発生する

（Ameba Newsでは、ヘッダーナビゲーションの後ろにToast Componentを配置しており、ヘッダーナビゲーションの「ランキング」の次にToastにフォーカスが移る。その際にスクリーンリーダーでは謎の読み上げ「グループ ...（ページ上のテキストを順に）」が発生している。）

ref: 議論の余地がありそうだったので、 #290 からdisscussionsに移行しました。

[tokimari]

私の方で検討している解決案２つのうち、２を推しています。

検討中の解決案

1. キーボードフォーカスで到達不可能にする

そもそもの

• hover、focusされている時には、時間制限を停止します。フォーカスが離れたのち、再度0秒から計測します

というアクセシビリティ要件を変更して

• hoverされている時には、時間制限を停止します。hoverが離れたのち、再度0秒から計測します

にし、https://github.com/openameba/spindle/blame/main/packages/spindle-ui/src/Toast/Toast.tsx#L115 の実装箇所を tabindex="-1" に変更することで、キーボードなどでの「順次フォーカス」を不可能にする。

しかしToastは自動で表示が消えてしまう性質上、「読む時間が足りず延長したいユーザーに延長の手段を提供する」ことは重要です（参考：2.2.1 コンテンツに制限時間を設けない）。マウスを使わ（え）ずキーボード（あるいはSwitch Controlなどの支援技術）を使うユーザーを考慮すると、「キーボードでfocusしている時には、時間制限を停止します。フォーカスが離れたのち、再度0秒から計測します」という要件を捨てて良いとは思えません。

とはいえ、DOM順序的にToast Componentを表示するボタンの直後にToast Componentを配置しない限り、ユーザーがキーボードフォーカスでToast Componentに到達することは難しいです。（実質不可能）

ということから修正案２を考えています。

2. Toast ComponentのDOM配置位置を変更し、非表示のときはキーボードフォーカスで到達不可能にする

上記のAmeba Newsでは、記事urlコピーボタンを押したときにToastを表示しているため、DOM順序的にこのボタンの直後にToast Componentを配置しておくことで、「コピーボタン→Toast」にキーボードフォーカスを移すことができます。
そうすると

• hover、focusされている時には、時間制限を停止します。フォーカスが離れたのち、再度0秒から計測します

という要件を、キーボードユーザーでも恩恵を受けやすくなります。
さらに、Toastを非表示の時にキーボードフォーカス不可能にする（tabindex="0" を外す、あるいは display: none; を設定する）ことで、件の事象は発生しなくなります。

このために必要な修正として

1. Toast ComponentのDOM配置位置を変更：サービス側で設計/実装修正
2. 非表示のときはキーボードフォーカスで到達不可能にする：spindle-uiで実装修正

が必要ですが、1がなくても件の事象は発生しなくなるため、先に2を修正しておいても問題はないと考えています。

相談したいこと

解決案2が良いかな？と思っていますが、解決案2-1がサービス側の実装に依存します。
そのため、spindle-uiのToast Componentのアクセシビリティ要件として下記を追加してもよいでしょうか？:thinking:

• キーボード操作でToastに到達可能にするため、Toastを表示するボタンの直後（DOM順序で）にToast Componentを配置する
• Toast非表示の時にはToastはフォーカス不可能にする

[herablog]

提案ありがとうございます！まだ解決策まで考えきれてないですが、気になりポイントだけ先にリストアップしておきます。

Toastを表示するボタンの直後（DOM順序で）にToast Componentを配置する

理想や推奨はこれで良さそう。だだ、直後に置くと都合がよくないアプリケーションもありそうなのでそのケースを実際には考えないとな感じはします。

非表示のときはキーボードフォーカスで到達不可能にする：spindle-uiで実装修正

これは対応して良さそう。spindle-uiで対応した時にアプリ側で予期しない影響がないかだけ一応想定したいかもです。