Feat(ios): announce picker dismiss overlay to VoiceOver

index.d.ts

@@ -93,6 +93,7 @@ export interface PickerSelectProps {
   useNativeAndroidPickerStyle?: boolean;
   fixAndroidTouchableBug?: boolean;
   doneText?: string;
+  dismissText?: string;
   onDonePress?: () => void;
   onUpArrow?: () => void;
   onDownArrow?: () => void;

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()}
           <View

test/test.js

@@ -757,6 +757,31 @@ describe("RNPickerSelect", () => {
 
       expect(doneButton.props().accessibilityLabel).toEqual("Confirm");
     });
+
+    it("should announce the dismiss overlay as a button labeled Dismiss by default (iOS)", () => {
+      const wrapper = shallow(
+        <RNPickerSelect items={selectItems} onValueChange={noop} />,
+      );
+
+      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(
+        <RNPickerSelect
+          items={selectItems}
+          onValueChange={noop}
+          dismissText="Close"
+        />,
+      );
+
+      const dismissOverlay = wrapper.find('[testID="ios_modal_top"]');
+
+      expect(dismissOverlay.props().accessibilityLabel).toEqual("Close");
+    });
   });
 
   it("should call the onClose callback when set", () => {