Skip to content

Commit

Permalink
feat: Update description and example
Browse files Browse the repository at this point in the history
  • Loading branch information
ArturKalach committed Nov 22, 2023
1 parent 5a22737 commit 1246baf
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 6 deletions.
5 changes: 5 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,12 @@ The VoiceOver rotor offers enhanced navigation options. To define containers for

```sh
npm install react-native-a11y-container
cd ios && pod install && cd ..
```
or
```sh
yarn add react-native-a11y-container
cd ios && pod install && cd ..
```

## Usage
Expand All @@ -40,6 +42,9 @@ To specify the type of content within A11yContainerView, use the type attribute
By default, A11yContainerView uses the SemanticGroup type. For more details on these types, refer to the developer.apple.com documentation.


## Platforms
This library is designed for implementing UIAccessibilityContainer logic in React Native. While UIAccessibilityContainer is specific to iOS, there are no equivalent components for other platforms. For non-iOS platforms, a basic View is used.

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
Expand Down
13 changes: 7 additions & 6 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ export default function App() {
return (
<View style={styles.container}>
<A11yContainerView accessibilityLabel="VoiceOver Rotor info">
<Text accessibilityRole="header">Use the VoiceOver rotor</Text>
<Text style={styles.header} accessibilityRole="header">
Use the VoiceOver rotor
</Text>
<Text>
First, if you haven't turned on VoiceOver, turn it on in Settings &gt;
Accessibility.
Expand All @@ -24,7 +26,7 @@ export default function App() {
</Text>
</A11yContainerView>
<A11yContainerView>
<Text accessibilityRole="header">
<Text style={styles.header} accessibilityRole="header">
Move through the organization of a page or screen
</Text>
<Text>
Expand All @@ -41,10 +43,9 @@ const styles = StyleSheet.create({
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 30,
},
box: {
width: 60,
height: 60,
marginVertical: 20,
header: {
fontWeight: '600',
},
});

0 comments on commit 1246baf

Please sign in to comment.