Using axe DevTools Linter for React Native

We're excited to bring support for React Native to axe DevTools Linter!

The feature currently includes 6 rules that run on React Native files (.js, .jsx, .ts, and .tsx). Please see the following links to learn more about what each rule tests for and how to fix the issues detected by them:

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

Setup

The software-as-a-service version of axe DevTools Linter doesn't require any installation to use. You'll just need to follow the guide for obtaining an API key then you can start using the service immediately. Please see the using axe DevTools Linter section for instructions on the various ways the server can check code files for accessibility issues including via a GitHub Action and a command line tool called axe DevTools Linter Connector. You can also interact directly with the server using its REST API.

For methods that reply on an axe-linter.yml file for configuration, such as the GitHub Action and Connector, add 'react-native' as a global library to enable linting for React Native:

global-libraries:
  - react-native

For methods that accept the configuration in JSON format, such as calling the REST API directly, include the following to enable React Native linting:

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

Custom Component Linting

The React Native feature also supports linting custom components that function similarly to this feature for HTML linting. However, it is currently only available for the image-has-accessibility-label rule. Please see the guide for linting custom components which is specific to HTML, but the high-level concept holds true for React Native. Here is an example of using custom component linting with the image-has-accessibility-label rule for React Native:

Let's say we have built a custom Image component called MyImage that accepts the properties isAccessible and accessibleLabel. Those properties control the default accessibility properties for Image which are accessible and accessibilityLabel. To make axe DevTools Linter aware of this custom mapping, the following should be included in the configuration:

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

With this configuration in place, axe DevTools Linter will report issues if it sees any instances of <MyImage/> that don't include both the isAccessible and accessibleLabel properties.