Skip to content

Commit

Permalink
Added accessibility labels (d-a-n#49)
Browse files Browse the repository at this point in the history 
* Add accessibility props
  • Loading branch information
@chriscohoat @peacechen
chriscohoat authored and peacechen committed Feb 9, 2018
1 parent f995108 commit fdbea99
Show file tree
Hide file tree
Showing 4 changed files with 1,298 additions and 47 deletions.
9 changes: 8 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ class SampleApp extends Component {
{ key: index++, section: true, label: 'Fruits' },
{ key: index++, label: 'Red Apples' },
{ key: index++, label: 'Cherries' },
{ key: index++, label: 'Cranberries' },
{ key: index++, label: 'Cranberries', accessibilityLabel: 'Tap here for cranberries' },
// etc...
// Can also add additional custom keys which are passed to the onChange callback
{ key: index++, label: 'Vegetable', customKey: 'Not a fruit' }
Expand All @@ -60,6 +60,9 @@ class SampleApp extends Component {
data={data}
initValue="Select something yummy!"
supportedOrientations={['landscape']}
accessible={true}
scrollViewAccessibilityLabel={'Scrollable options'}
cancelButtonAccessibilityLabel={'Cancel Button'}
onChange={(option)=>{ this.setState({textInputValue:option.label})}}>

<TextInput
Expand Down Expand Up @@ -100,3 +103,7 @@ Prop | Type | Optional | Default | Description
`cancelTextStyle` | object | Yes | {} | style definitions for the cancel text element
`cancelContainerStyle`| object | Yes | {} | style definitions for the cancel container
`backdropPressToClose`| bool | Yes | false | `true` makes the modal close when the overlay is pressed
`accessible`| bool | Yes | false | `true` enables accessibility for modal and options. Note: data items should have an `accessibilityLabel` property if this is enabled
`scrollViewAccessibilityLabel` | string | Yes | undefined | Accessibility label for the modal ScrollView
`cancelButtonAccessibilityLabel` | string | Yes | undefined | Accessibility label for the cancel button

96 changes: 51 additions & 45 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,51 +21,57 @@ const ViewPropTypes = RNViewPropTypes || View.propTypes;
let componentIndex = 0;

const propTypes = {
data: PropTypes.array,
onChange: PropTypes.func,
initValue: PropTypes.string,
animationType: Modal.propTypes.animationType,
style: ViewPropTypes.style,
selectStyle: ViewPropTypes.style,
selectTextStyle: Text.propTypes.style,
optionStyle: ViewPropTypes.style,
optionTextStyle: Text.propTypes.style,
optionContainerStyle: ViewPropTypes.style,
sectionStyle: ViewPropTypes.style,
sectionTextStyle: Text.propTypes.style,
cancelContainerStyle: ViewPropTypes.style,
cancelStyle: ViewPropTypes.style,
cancelTextStyle: Text.propTypes.style,
overlayStyle: ViewPropTypes.style,
cancelText: PropTypes.string,
disabled: PropTypes.bool,
supportedOrientations: Modal.propTypes.supportedOrientations,
keyboardShouldPersistTaps: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
backdropPressToClose: PropTypes.bool,
data: PropTypes.array,
onChange: PropTypes.func,
initValue: PropTypes.string,
animationType: Modal.propTypes.animationType,
style: ViewPropTypes.style,
selectStyle: ViewPropTypes.style,
selectTextStyle: Text.propTypes.style,
optionStyle: ViewPropTypes.style,
optionTextStyle: Text.propTypes.style,
optionContainerStyle: ViewPropTypes.style,
sectionStyle: ViewPropTypes.style,
sectionTextStyle: Text.propTypes.style,
cancelContainerStyle: ViewPropTypes.style,
cancelStyle: ViewPropTypes.style,
cancelTextStyle: Text.propTypes.style,
overlayStyle: ViewPropTypes.style,
cancelText: PropTypes.string,
disabled: PropTypes.bool,
supportedOrientations: Modal.propTypes.supportedOrientations,
keyboardShouldPersistTaps: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
backdropPressToClose: PropTypes.bool,
accessible: PropTypes.bool,
scrollViewAccessibilityLabel: PropTypes.string,
cancelButtonAccessibilityLabel: PropTypes.string,
};

const defaultProps = {
data: [],
onChange: () => {},
initValue: 'Select me!',
animationType: 'slide',
style: {},
selectStyle: {},
selectTextStyle: {},
optionStyle: {},
optionTextStyle: {},
optionContainerStyle: {},
sectionStyle: {},
sectionTextStyle: {},
cancelContainerStyle: {},
cancelStyle: {},
cancelTextStyle: {},
overlayStyle: {},
cancelText: 'cancel',
disabled: false,
supportedOrientations: ['portrait', 'landscape'],
keyboardShouldPersistTaps: 'always',
backdropPressToClose: false,
data: [],
onChange: () => {},
initValue: 'Select me!',
animationType: 'slide',
style: {},
selectStyle: {},
selectTextStyle: {},
optionStyle: {},
optionTextStyle: {},
optionContainerStyle: {},
sectionStyle: {},
sectionTextStyle: {},
cancelContainerStyle: {},
cancelStyle: {},
cancelTextStyle: {},
overlayStyle: {},
cancelText: 'cancel',
disabled: false,
supportedOrientations: ['portrait', 'landscape'],
keyboardShouldPersistTaps: 'always',
backdropPressToClose: false,
accessible: false,
scrollViewAccessibilityLabel: undefined,
cancelButtonAccessibilityLabel: undefined,
};

export default class ModalSelector extends React.Component {
Expand Down Expand Up @@ -119,7 +125,7 @@ export default class ModalSelector extends React.Component {

renderOption = (option, isLastItem) => {
return (
<TouchableOpacity key={option.key} onPress={() => this.onChange(option)}>
<TouchableOpacity key={option.key} onPress={() => this.onChange(option)} accessible={this.props.accessible} accessibilityLabel={option.accessibilityLabel || undefined}>
<View style={[styles.optionStyle, this.props.optionStyle, isLastItem &&
{borderBottomWidth: 0}]}>
<Text style={[styles.optionTextStyle,this.props.optionTextStyle]}>{option.label}</Text>
Expand All @@ -144,14 +150,14 @@ export default class ModalSelector extends React.Component {
}}>
<View style={[styles.overlayStyle, this.props.overlayStyle]}>
<View style={[styles.optionContainer, this.props.optionContainerStyle]}>
<ScrollView keyboardShouldPersistTaps={this.props.keyboardShouldPersistTaps}>
<ScrollView keyboardShouldPersistTaps={this.props.keyboardShouldPersistTaps} accessible={this.props.accessible} accessibilityLabel={this.props.scrollViewAccessibilityLabel}>
<View style={{paddingHorizontal: 10}}>
{options}
</View>
</ScrollView>
</View>
<View style={[styles.cancelContainer, this.props.cancelContainerStyle]}>
<TouchableOpacity onPress={this.close}>
<TouchableOpacity onPress={this.close} accessible={this.props.accessible} accessibilityLabel={this.props.cancelButtonAccessibilityLabel}>
<View style={[styles.cancelStyle, this.props.cancelStyle]}>
<Text style={[styles.cancelTextStyle,this.props.cancelTextStyle]}>{this.props.cancelText}</Text>
</View>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-native-modal-selector",
"version": "0.0.24",
"version": "0.0.25",
"description": "A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.",
"main": "index.js",
"scripts": {
Expand Down
Loading

0 comments on commit fdbea99

Please sign in to comment.