leiteszeke / react-native-accessibility-wrapper

An Accessibility Wrapper for iOS to be able to order elements in the screen for the screen reader

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Native Accessibility Wrapper

A wrapper for iOS that works as a View and allows you to set the order that elements should be read by Voice Over


Installation

# Using npm
npm install react-native-accessibility-wrapper

# Using yarn
yarn add react-native-accessibility-wrapper

# Install pods
cd ios && pod install && cd ..

Usage

import { Text } from 'react-native';
import Icon from 'your-icon-library';
import AccessibilityWrapper from "react-native-accessibility-wrapper";

<AccessibilityWrapper
  style={{ flex: 1, flexDirection: 'row' }}
  elements={[titleRef, leftIconRef, rightIconRef]}
>
  <Icon ref={leftIconRef} name="back" />

  <Text ref={titleRef}>Title</Text>

  <Icon ref={rightIconRef} name="save" />
</AccessibilityWrapper>

Example

Without Wrapper With Wrapper
without wrapper with wrapper

License

MIT

About

An Accessibility Wrapper for iOS to be able to order elements in the screen for the screen reader

License:MIT License


Languages

Language:TypeScript 39.4%Language:Ruby 16.4%Language:Kotlin 14.5%Language:Objective-C 12.8%Language:JavaScript 11.5%Language:Objective-C++ 4.6%Language:Shell 0.8%