「accessibility」タグのついた5記事

Base UI の Dialog と Tailwind CSS で、お知らせ用のダイアログを実装します。パーツごとの役割、className へ直接クラスを渡す書き方、data 属性による開閉の遷移、useState と ARIA の属性を書かずに済む理由を順に見ます。

Base UI と Tailwind CSS のプロジェクトに Storybook を入れ、ダイアログの閉じた状態と開いた状態を story にします。導入コマンドが足すもの、Tailwind CSS を story に効かせる設定、a11y アドオン、CSF 3 での story の書き方を扱います。

モーダルを自作すると抱える仕事を数え、そのうちどこをヘッドレス UI に渡せるかを見ます。Base UI がどういうライブラリで、Tailwind CSS と組み合わせると何が楽になり、何が手元に残るかを整理します。

Base UI が受け持つ振る舞いと、Tailwind CSS が受け持つ見た目の境界を、実際に DOM へ出る属性から確かめます。フォーカスの閉じ込め、開閉の状態を伝える data 属性、その属性を Tailwind CSS の variant で受ける書き方を扱います。

Base UI が付ける役割と名前を手がかりにすると、Tailwind CSS のクラスや要素の入れ子に触らずにテストが書けます。その理由と、表示用の計算を純粋関数へ切り出す設計、jsdom と Storybook と実ブラウザの 3 層の全体像を扱います。