React Aria vs Headless UI

Headless UIが全部入りな「すぐに使える」コンポーネントを提供する反面、React Ariaは非常に低レベルなAPIを提供している

モーダルの実装を見てみるとわかりやすい

Dialogコンポーネントを使うとフォーカストラップもroleもaria-labelledbyも背後クリックやEscで閉じる挙動も背後をaria-hiddenにする挙動も全部付いてくる

フォーカストラップはFocusScope

roleとaria-labelledbyはuseDialog

背後aria-hiddenはuseModal

閉じる挙動はuseOverlay

これらが1つでも抜けていればいい感じの挙動にはならない

個人的な結論

アプリケーションを開発していて、今すぐDropdownやSelectのような典型コンポーネントが欲しい → Headless UI

非典型なコンポーネントを作る必要に迫られたらReact Ariaを使いながら頑張る可能性を考えるべき

デザインシステムを作っている → React Aria

React Spectrumに使われている実績もある

非典型コンポーネントの実装が必要な可能性もかなりある