React の手習いに開閉式のいわゆるアコーディオンUIを実装してみましたので備忘録。 Javascript, ES2016, React, WAI-ARIA とも確信を持ってるわけではなく、いずれも調べながらの実装なので、マサカリツッコミやアドバイス歓迎です。 要件 アコーディオンUIは、コンテンツの表示トリガー(アコーディオンヘッダー)とコンテンツ(アコーディオンパネル)がグルーピングされたものが(主に縦方向に)並んでいるものを指していることが多いと思いますが、とりあえず次の要件で実装しました。 アコーディオンヘッダーをクリックでアコーディオンパネルの開閉を切り替え アコーディオンパネルの開閉の初期状態を設定可能 すべて開く / すべて閉じる ボタンの実装(ボタンを表示させるかは選択可能) フォーカスマネジメントする(隠れているアコーディオンパネル内の要素はフォーカスされない) キーボ
![ReactとWAI-ARIAでアクセシブルなアコーディオンUIを実装してみた / masuP.net](https://cdn-ak-scissors.b.st-hatena.com/image/square/f55787a793aca4b7dbaa1e219f0720caeb94e36d/height=288;version=1;width=512/http%3A%2F%2Fmasup.net%2Fimages%2F20160922_React_WAI-ARIA_accordion_ui_sample_voiceover_dialog.png)