listboxをアクセシブルに実装したい - Panda Noir

listbox というUIパターンを実装しました。ちょっと凝ったラジオボタンリストみたいなものです↓ 仕様 クリック時の挙動はだいたいラジオボタンと同じです。 キーボード操作時がラジオボタンと違っています。ラジオボタンではフォーカス移動と同時に選択が行われますが、このリストボックスではフォーカスを移動させただけでは選択されず、スペースで決定することで初めて選択されます。 実装 実装はこんな感じです。azukiazusaさんの実装を大いに参考にしてます→ 【React】アクセシビリティに考慮したリストボックスを実装する (コンボボックスがない、ステートではなくブラウザのフォーカス機能でフォーカス管理をしているあたりが異なります) const TinyListbox = ({ options, selectedIndex, onChangeIndex, }: { options: string