𝗙𝗼𝗰𝘂𝘀 𝗜𝘀𝘀𝘂𝗲𝘀 𝗮𝗻𝗱 𝗥𝗲𝗳𝗶𝗻𝗲𝗺𝗲𝗻𝘁 𝗦𝘂𝗽𝗽𝗼𝗿𝘁

フォーカスに関する問題とリファインメントのサポート

アクセシブルなReactコンポーネントを構築するには、単にARIAラベルを追加するだけでは不十分です。キーボードを使用してユーザーがインターフェース内をどのように移動するかを考慮する必要があります。

私は、完全にアクセシブルなナビゲーションコンポーネントをゼロから構築していく過程を記録しています。今回のアップデートでは、主に2つの領域、すなわち「キーボードトラップの修正」と「よりスムーズなサブリスト管理の準備」に焦点を当てます。

キーボードトラップの修正

よくある問題として、ユーザーがShift+Tabを使用してコンポーネントに進入する場合があります。閉じているサブリスト内のリンクにフォーカスが当たると、フォーカスのアウトラインが消えてしまいます。これはキーボードユーザーにとって重大なエラーです。

これを修正するために、ロジックの変更を実装しました。

• 閉じているサブリストの最後の要素にフォーカスが当たった場合、システムは最上行の親ボタンにフォーカスを移動させます。 • この特定の動きを検知するために、onFocusイベントリスナーを使用しています。 • ロジックは、フォーカスされた要素がコンポーネント内の最後の要素であるかどうかをチェックします。 • もしそうであれば、コードは最上行の先祖要素を特定し、そこにフォーカスを移動させます。

これにより、ユーザーがインターフェース内での現在地を見失うことがなくなります。

サブリストのクローズ機能の設定

親メニューを閉じたとき、その中にある開いているすべてのサブメニューも閉じる必要があります。これは標準的なオペレーティングシステムの動作と同じです。

パフォーマンスの問題を引き起こさずにReactでこれを処理するため、ステート（state）に関数を保存することは避けました。ステートに関数を保存すると、不要な再レンダリング（re-render）が発生するためです。

代わりに、別の方法を採用しました。

• useRef内にMapを作成しました。 • このMapは、親要素に関連付けられたクローズ関数を保存します。 • ナビゲーション配列が要求されると、システムはこれらの関数をオブジェクトに注入します。 • Refを使用することで、再レンダリングを発生させることなく、これらの接続を更新できます。

これにより、クリーンで予測可能なメニュー動作の基盤が整います。

次回は、それらのサブリストを閉じる実際のロジックを実装します。

出典: https://dev.to/shaynaproductions/focus-issues-and-refinement-support-417l