Skip to content

Commit ec3a1ee

Browse files
deansimcoxhbfdavelfkwtz
authored
feat: Small readme section for accessiblity (lawnstarter#398)
* feat: Small readme section for accessiblity * Update README.md Co-authored-by: Dean <[email protected]> Co-authored-by: Michael Lefkowitz <[email protected]>
1 parent 9fc25bf commit ec3a1ee

File tree

1 file changed

+31
-0
lines changed

1 file changed

+31
-0
lines changed

README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,37 @@ All properties mentioned below must be nested under the `style` prop. Examples o
115115
- You can pass a component of your choosing (css, image, svg, etc..) for use as the icon. For ease of use, consider a library such as [react-native-shapes](https://github.com/lfkwtz/react-native-shapes) or [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons).
116116
- Examples of different icons and their usage can be found [on the example snack](https://snack.expo.io/@lfkwtz/react-native-picker-select).
117117

118+
## Accessibility
119+
120+
If you need to add accessibility props to the rendered component, you may use `pickerProps` and `touchableWrapperProps` to pass these through.
121+
122+
`pickerProps` accepts an object of props that get passed directly to the native `<Picker />` component.
123+
`touchableWrapperProps` also accepts an object of props, but this gets passed to a `<TouchableOpacity />` that toggles the visibility of the picker.<sup>*note: `touchableWrapperProps` is not supported on web or when `useNativeAndroidPickerStyle={true}`</sup>
124+
125+
### Accessibility Example
126+
127+
In the example below, we render the picker with supplementary description text, but for screen readers, we omit this by passing just the title to the `accessibilityLabel` prop.
128+
129+
```js
130+
const selectedItem = {
131+
title: 'Selected item title',
132+
description: 'Secondary long descriptive text ...',
133+
};
134+
135+
export const Dropdown = () => {
136+
return (
137+
<RNPickerSelect
138+
pickerProps={{
139+
accessibilityLabel: selectedItem.title,
140+
}}
141+
>
142+
<Text>{selectedItem.title}</Text>
143+
<Text>{selectedItem.description}</Text>
144+
</RNPickerSelect>
145+
);
146+
};
147+
```
148+
118149
## Testing
119150

120151
Test suite included. This component has been used and tested since React Native v0.51.

0 commit comments

Comments
 (0)