Numerous Problems Multiplied

    react-native-accessibility-engine
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.0 • Public • Published
    React Native Accessibility Engine

    React Native Accessibility Engine

    Make accessibility-related assertions in React Native

    Table of Contents

    Intro

    The React Native ecosystem is massive but it's still lagging behind React Web when it comes to accessibility tools. As mobile developers, we're still braving the challenge of mapping robust, time-tested web guidelines into equally robust guidelines for mobile. In React Native, we also face the challenge of adhering to the accessibility guidelines of multiple platforms using only React Native's Accessibility API. There aren't many practical tutorials on the best use of this API, which means there are limited resources for React Native developers who want to make their apps more accessible. Indeed, there's still a lot of confusion about what makes an app accessible or what accessibility even is.

    This project aims to make solving these problems a little easier.

    Goals

    • [x] Create an engine capable of traversing a component tree making accessibility-related checks
    • [ ] Create an app to showcase accessiblity best-practices
    • [x] Keep it open-source!

    Roadmap

    The a look at our project board.

    Installation

    npm install react-native-accessibility-engine --save-dev
    // or
    yarn add react-native-accessibility-engine --dev

    Add the custom toBeAccessible matcher to your jest configs setupFilesAfterEnv array:

    {
      ...
      "setupFilesAfterEnv": [..., "react-native-accessibility-engine/src/extend-expect.ts"],
    }

    Usage

    With React elements

    import React from 'react';
    import { Image, TouchableOpacity } from 'react-native';
    import Icons from './assets';
    
    const Button = () => (
      <TouchableOpacity accessible={false}>
        <Image source={Icons.filledHeart['32px']} />
      </TouchableOpacity>
    );
    
    it('should not have accessibility errors', () => {
      expect(<Button />)).toBeAccessible();
    });

    With React test instances

    You can also pass test instances from react-test-renderer and @testing-library/react-native:

    import React from 'react';
    import { Image, TouchableOpacity } from 'react-native';
    import TestRenderer, { ReactTestInstance } from 'react-test-renderer';
    import Icons from './assets';
    
    const Button = () => (
      <TouchableOpacity accessible={false}>
        <Image source={Icons.filledHeart['32px']} />
      </TouchableOpacity>
    );
    
    it('should not have accessibility errors', () => {
      const testInstance = ReactTestInstance.create(<Button />).root;
      // ...
      expect(testInstance).toBeAccessible();
    });

    Limitations

    Though the goal of this project is eventually to cover a wide variety of components and situations, that's still a work in progress. You can check out the current list of rules and their descriptions here.

    Contributing

    This project is totally open to questions, sugestions, corrections, and community pull requests. We've tried to make contributing as painless a process as possible. Take a look at our guides:

    Related projects

    • eslint-plugin-react-native-a11y is an Eslint plugin that lints your components and accessibility-related props.
    • axe-core is the project that inspired this one. It's a similiar accessbility engine made for HTML-based languages like React Web.
    • storybook-addon-a11y is a Storybook add-on that uses Axe under the hood and allows you to inspect your components for accessibility problems as you develop them in Storybook.

    License

    MIT

    Install

    npm i react-native-accessibility-engine

    DownloadsWeekly Downloads

    504

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    383 kB

    Total Files

    304

    Last publish

    Collaborators

    • aryella.lacerda