fix: AccordionPanelのkeydownイベントリスナーをTriggerに移動

[neet]

関連URL

• 従業員サーベイアプリ「アクセシビリティ簡易チェックリスト」検証結果

概要

従業員サーベイアプリにおいて、 AccordionPanel のコンテンツとして RadioButton を利用している箇所がありましたが、 その場合に矢印キーで項目を選択できなくなっていました。このPRでは、AccordionPanel内にインタラクティブな要素が配置されていた場合にも、キーボード操作ができるようにしました。

変更内容

TriggerとContentを包含する一番外側のラッパー要素に対して、keydownイベントリスナーが設定されており、そのハンドラ内で preventDefault() が実行されていたことが原因でした。本来は、矢印キー上下で複数の AccordionPanelItem 間を移動できるようにしていたものでしたが、アコーディオンが開かれていてContent内の要素を操作しているときでも、このハンドラが作動していました。

修正として、イベントリスナーを設定するのを、Trigger側の要素に変更しました。これによって、Content内を操作している場合には、キーボード操作ができるようになりました。

また、 KeyboardEvent#keyCode は非推奨となっていたため、 KeyboardEvent#key（接続されているキーボードの物理的なコードではなく、ユーザーが設定したキーボード配列に基づいた意味論的なコード）に移行しました。

確認方法

テストケースを用意したので、その内容に問題ないかを中心に確認いただきたいです。

[pkg-pr-new]

Open in Stackblitz

npm i https://pkg.pr.new/kufu/smarthr-ui@5215

commit: 1559731