事前設定済みコンポーネントライブラリ
Axe DevTools Linterにおけるいくつかの人気コンポーネントライブラリの事前定義マッピングについて説明します
Axe DevTools Linterには、いくつかの人気コンポーネントライブラリの組み込みサポートがあります。これを有効にすると、それらのライブラリのコンポーネントの使用は、ネイティブHTML要素と同様にアクセシビリティがテストされます。
導入
以下のパッケージによって定義されたコンポーネントが現在サポートされています。
| NPMパッケージ名 | 詳細情報 |
|---|---|
| @deque/cauldron-react | Cauldron React: アクセシブルコンポーネントライブラリ |
| @mui/material | マテリアルUI |
| react-native | React Native |
マテリアルUI用の事前設定されたコンポーネントライブラリには、Material UIで定義されているすべてのコンポーネントは含まれていません；@mui/materialパッケージで定義されたもののみが含まれています。
ライブラリコンポーネントのリントを有効にするには、ライブラリのNPMパッケージ名をaxe-linter.yml ファイルのglobal-libraries配列に追加してください。
global-libraries:
- '@mui/material'YAMLでは、@で始まる文字列は引用符で囲む必要があります。@は予約文字です。
または、RESTサービスのための同等のJSON構成は以下の通りです：
{
"config": {
"global-libraries": [
"@mui/material"
]
}
}グローバルライブラリのコンポーネントと同じ名前のコンポーネントは、そのライブラリコンポーネントとして扱われ、再エクスポートおよび再宣言が可能で、マッピングを失うことはありません。
Cauldron React
Cauldron Reactのバージョン4.7.0以上が現在サポートされています。
Cauldron Reactの設定
CauldronマッピングをVS Code用Axe Accessibility Linter拡張機能またはJetBrainsプラグインで使用するには、以下の行をaxe-linter.ymlファイルに追加してください。
global-libraries:
- '@deque/cauldron-react'Cauldronの例
次の例は、テキストコンテンツがないCauldronButton要素を示しており、これはアクセシビリティエラーです：
<Button></Button>Cauldronライブラリを構成に有効にした後に、IDE（例としてVS Code）内で、次のようなエラーが表示されます：
マテリアルUI
マテリアルUIのバージョン5.11.15以上が現在サポートされています。
事前定義されたマッピングには@mui/materialパッケージで定義されたコンポーネントのみが含まれており、Material UIで定義されているすべてのコンポーネントは含まれていません。
マテリアルUIの設定
Material UIマッピングをVS Code用Axe Accessibility Linter拡張機能またはJetBrainsプラグインで使用するには、以下の行をaxe-linter.ymlファイルに追加してください。
global-libraries:
- '@mui/material'Material UIの例
次の例は、**aria-colindex**がMaterial UIコンポーネント**ImageList**と誤って使用されている場合のアクセシビリティエラーを示しています：
<ImageList aria-colindex="1"/>あなたのIDE（ここではVS Codeを例とします）で、次のエラーメッセージが表示されます：
設定ファイルで**global-libraries**オプションを'@mui/material'に設定しないと、このエラーは表示されません。
Material UI入力要素に**inputProps**属性を使用して設定したアクセシビリティ属性は現在無視されています。
React Native
React Nativeの設定
CauldronマッピングをVS Code用Axe Accessibility Linter拡張機能またはJetBrainsプラグインで使用するには、以下の行をaxe-linter.ymlファイルに追加してください。
global-libraries:
- react-nativeReact Nativeマッピングの使用に関する他のドキュメントはReact Native用カスタムコンポーネントのLintingのセクションにあります。