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やコネクタのように、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プロパティの両方を含まない場合に問題として報告します。