axe DevTools LinterをReact Nativeで使用する

React NativeへのサポートをAxe DevTools Linterに導入することができて、とても嬉しいです！

この機能は現在、React Nativeファイル（.js、.jsx、.ts、および.tsx）で実行される6つのルールを含んでいます。各ルールが何をテストするのか、またそれにより検出される問題をどう修正するかについて詳しくは、以下のリンクをご覧ください：

• has-valid-accessibility-actions
• has-valid-accessibility-role
• has-valid-accessibility-state
• has-valid-accessibility-value
• image-has-accessibility-label
• has-accessibility-role

セットアップ

Axe DevTools Linterのサービスとしてのソフトウェア版を使用する際には、インストールは必要ありません。ただし、 APIキーの取得 に関するガイドに従えば、すぐにサービスを利用開始できます。詳しくは、 Axe DevTools Linterの使用 セクションをご覧ください。さまざまな方法でサーバーがコードファイルのアクセシビリティ問題を検出できる手順を説明しています。例えば、 GitHub Action や、 Axe DevTools Linter Connectorというコマンドラインツールを利用した方法があります。また、サーバーと直接やり取りするには、 REST APIを使用することもできます。

GitHub ActionやConnectorなど、 axe-linter.yml の設定ファイルを必要とする方法では、「react-native」をグローバルライブラリとして追加し、React Nativeのリンティングを有効にします：

global-libraries:
  - react-native

REST APIを直接呼び出すなど、設定をJSON形式で受け付ける方法では、React Nativeのリンティングを有効にするために以下を含めます：

{
  "config": {
    "global-libraries": ["react-native"]
  }
}

カスタムコンポーネントのリンティング

React Nativeの機能では、HTMLのリンティング機能と同様に動作するカスタムコンポーネントのリンティングもサポートしています。ただし、現在は image-has-accessibility-label ルールのみ利用可能です。詳しくは、 カスタムコンポーネントのリンティングに関するガイドをご覧ください。これはHTMLに特化したものですが、高レベルの概念はReact Nativeにも適用されます。以下は、React Native用のカスタムコンポーネントリンティングを使用した例です。 image-has-accessibility-label ルールの例です：

カスタム Image コンポーネントを構築したとしましょう。このコンポーネントは、 MyImage というプロパティを受け入れ、 isAccessible というプロパティを持ちます。 accessibleLabelこれらのプロパティは、 Imageのデフォルトのアクセシビリティプロパティを制御します。これらのプロパティは、 accessible と accessibilityLabelです。このカスタムマッピングをAxe DevTools Linterに認識させるために、設定に以下を含める必要があります：

global-components:
  MyImage:
    element: Image
    attributes:
      - isAccessible: accessible
      - accessibleLabel: accessibilityLabel

この設定を行うことで、Axe DevTools Linterは <MyImage/> が表示されるたびに、それが isAccessible と accessibleLabel のプロパティを含まない場合に問題を報告します。