diff --git a/index.d.ts b/index.d.ts index 146b5b4..bb8d68e 100644 --- a/index.d.ts +++ b/index.d.ts @@ -93,6 +93,7 @@ export interface PickerSelectProps { useNativeAndroidPickerStyle?: boolean; fixAndroidTouchableBug?: boolean; doneText?: string; + dismissText?: string; onDonePress?: () => void; onUpArrow?: () => void; onDownArrow?: () => void; diff --git a/src/index.js b/src/index.js index 1ea651e..a712c19 100644 --- a/src/index.js +++ b/src/index.js @@ -57,6 +57,7 @@ export default class RNPickerSelect extends PureComponent { // Custom Modal props (iOS only) doneText: PropTypes.string, + dismissText: PropTypes.string, onDonePress: PropTypes.func, onUpArrow: PropTypes.func, onDownArrow: PropTypes.func, @@ -98,6 +99,7 @@ export default class RNPickerSelect extends PureComponent { useNativeAndroidPickerStyle: true, fixAndroidTouchableBug: false, doneText: 'Done', + dismissText: 'Dismiss', onDonePress: null, onUpArrow: null, onDownArrow: null, @@ -510,7 +512,8 @@ export default class RNPickerSelect extends PureComponent { } renderIOS() { - const { disabled, style, modalProps, pickerProps, touchableWrapperProps } = this.props; + const { disabled, style, modalProps, pickerProps, touchableWrapperProps, dismissText } = + this.props; const { animationType, orientation, selectedItem, showPicker } = this.state; const accessibilityLabel = pickerProps && pickerProps.accessibilityLabel; @@ -558,6 +561,8 @@ export default class RNPickerSelect extends PureComponent { onPress={() => { this.togglePicker(true); }} + accessibilityRole="button" + accessibilityLabel={dismissText} /> {this.renderInputAccessoryView()} { expect(doneButton.props().accessibilityLabel).toEqual("Confirm"); }); + + it("should announce the dismiss overlay as a button labeled Dismiss by default (iOS)", () => { + const wrapper = shallow( + , + ); + + const dismissOverlay = wrapper.find('[testID="ios_modal_top"]'); + + expect(dismissOverlay.props().accessibilityRole).toEqual("button"); + expect(dismissOverlay.props().accessibilityLabel).toEqual("Dismiss"); + }); + + it("should use custom dismissText as accessibilityLabel on the dismiss overlay (iOS)", () => { + const wrapper = shallow( + , + ); + + const dismissOverlay = wrapper.find('[testID="ios_modal_top"]'); + + expect(dismissOverlay.props().accessibilityLabel).toEqual("Close"); + }); }); it("should call the onClose callback when set", () => {