React Ariaというアクセシビリティに特化したライブラリ

## React Ariaとは
Adobeが作成したアクセシビリティに特化したオープンソースのライブラリです。

https://react-spectrum.adobe.com/react-aria/index.html

アップデートも定期的に行われており、直近のリリースには日本人のエンジニアの方もコミットされています。

https://react-spectrum.adobe.com/releases/2024-05-01.html


## Introduction

> アクセシビリティとは、障がい者を含むすべての人がアプリケーションを使用できる機能です。これには、視覚、聴覚、運動、認知障害など、あらゆる種類の障がいが含まれます。
React Aria は、スクリーン リーダーとキーボード ナビゲーションのサポートを通じて、視覚障害と運動障害の側面に対処します。レンダリングやスタイル設定は提供されないため、他の種類の障害については設計プロセスでさらに考慮する必要があります。 詳細については、Spectrum Web サイトの[インクルーシブデザインページ](https://spectrum.adobe.com/page/inclusive-design/)を参照してください。
アクセシビリティ機能は、障害のないユーザーにも役立ちます。たとえば、上級ユーザーの場合、マウスやタッチ スクリーンではなくキーボードを使用してアプリケーションを操作する方が速いと感じるかもしれません。特に、大量のデータ入力を伴うアプリケーションの場合、優れたキーボード ナビゲーション サポートによってユーザーの生産性が大幅に向上します。

（React Aria Accessibilityのページより）

React Ariaのコンポーネントを見る限り、ボタンやセレクトボックス、ツールチップやダイアログなど様々なコンポーネントが用意されてあり、そのすべてがアクセシビリティに対応されているようです。

## 対応ブラウザ
2024年6月現在ですと以下のブラウザが対応されているようです。

- Google Chrome
- Firefox
- Safari
- Edge


## コンポーネント

### Button

ボタン、トグルボタン、ファイルトリガー（input type="file")
トグルボタンに関しては`aria-pressed`がデフォルトで付与されており、ボタンを押したことを教えてくれます。

### Pickers

コンボボックス、セレクト。
コンボボックスに関してはHTML要素の`datalist`も使えますが、CSSによるスタイリングが困難なためカスタマイズしやすい作りになっているようです。
（コンボボックスという名前を今回初めて知りました）

### Collections

メニュー、リストボックス、グリッドリスト、テーブル、タググループ。
それぞれが、矢印キーでの移動やEnter（return）キーもしくはSpaceキーでの選択が可能で、Escキーで選択を全解除できるようになっています。


### Date and time

日付ピッカー、日付範囲ピッカー、日付フィールド、タイムフィールド、カレンダー、範囲カレンダー。
このコンポーネントもコンボボックス同様にデフォルトの`<input type="date">`要素は機能的に制限があり、国際化機能が欠けているので、国際化機能に対応しスタイルもカスタマイズできる作りになっているようです。

ブラウザのサイト優先言語を英語にした場合の日付ピッカー(mm/dd/yyyyの順になっている)

![React Ariaのdate Picker](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3443/d60f6bab-9923-9ea6-dcc6-257372448c49.png)

同じくブラウザのサイト優先言語を英語にした場合の`input type="date"`はこちら（ブラウザの言語設定を英語にしても和暦が表示されている）

![input type="date"のdate picker](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3443/f5a4635d-1629-7816-7e20-9aee5f254236.png)

これはPCの設定をいじれば変更される？

### Overlays
ダイアログ、ポップオーバー、ツールチップ。

このダイアログもHTMLの`dialog`を使用すれば問題ないのですが、アニメーションなどまだまだCSSのみでは困難な部分もあります。

【参考】

https://qiita.com/mtoutside/items/35ada616dc2dd52c8a86

https://caniuse.com/mdn-css_at-rules_starting-style

dialogタグのアニメーションはstating-styleを使えば良いらしいが、JavaScriptでのアニメーションが現時点ではベターのようです。
そこでReact Ariaはアクセシブルなdialogでいて、アニメーションにも対応しています。

### Forms

チェックボックス、チェックボックスグループ、ラジオグループ、スイッチ、テキストフィールド、検索フィールド、数値フィールド、スライダー、フォーム
チェックボックスやラジオボタンは`CheckBoxGroup`や`RadioGroup`などのコンポーネントで囲って、一つのグループとして紐づけてあげるとVoiceOverなどの読み上げも適切な読み上げにしてくれるとのことです。

```js
<CheckboxGroup>
  <Label>Favorite sports</Label>
  <Checkbox value="soccer">
    <div className="checkbox" aria-hidden="true">
      <svg viewBox="0 0 18 18"><polyline points="1 9 7 14 15 4" /></svg>
    </div>
    Soccer
  </Checkbox>
  <Checkbox value="baseball">
    <div className="checkbox" aria-hidden="true">
      <svg viewBox="0 0 18 18"><polyline points="1 9 7 14 15 4" /></svg>
    </div>
    Baseball
  </Checkbox>
  <Checkbox value="basketball">
    <div className="checkbox" aria-hidden="true">
      <svg viewBox="0 0 18 18"><polyline points="1 9 7 14 15 4" /></svg>
    </div>
    Basketball
  </Checkbox>
</CheckboxGroup>
```


![スクリーンショット 2024-06-11 3.25.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3443/29cded65-e63f-b49c-24e6-c2d840365d5b.png)


色々な状況に応じてコンポーネントも使い分けができそうです。


https://react-spectrum.adobe.com/react-aria/components.html


## 実際の使用例

Exampleにも様々な例が用意されています。
そこでタブで切り替えられているコンポーネントを見てみましょう。

 https://react-spectrum.adobe.com/react-aria/examples/category-tabs.html

 コードを見てみると`MyTab`と`MyTabPanel`のidが重複してますね。
 これ大丈夫か？と思って開発者ツールを開いてみると、実際は重複していませんでした。

![tab-panel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3443/e4fc1b71-ad29-4817-9b20-c0e2ba41e15f.png)

タブのaria-controlsとパネルのidが紐づいて良い感じになっています。

## 終わりに

実際に実務で使ってみないことにはライブラリの恩恵を受けることはできないのですが、機会があれば個人開発などで使ってみるのもありなのかなと思いました。

React AriaのライセンスがApache2.0とのことで、MITと何が違うんだろう？と思って調べたのですが、MITよりは厳格とのことで、とりあえず明記しておくだけで良いのか…？という気持ちになってます。


<iframe width="560" height="315" src="https://www.youtube.com/embed/15L_J_OgYWw?si=bjnNt33CnFzYLx5F" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

https://qiita.com/fate_shelled/items/a928709d7610cee5aa66