Merge pull request #22 from TaduJR/fix/ios-voiceover-picker-accessibility

fix(a11y): add iOS VoiceOver support to picker and Done button

Author: inimaga

src/index.js

@@ -439,6 +439,8 @@ export default class RNPickerSelect extends PureComponent {
             left: 4,
           }}
           {...touchableDoneProps}
+          accessibilityRole="button"
+          accessibilityLabel={doneText}
         >
           <View testID="needed_for_touchable">
             <Text
@@ -492,6 +494,7 @@ export default class RNPickerSelect extends PureComponent {
       <View pointerEvents="box-only" style={containerStyle}>
         <TextInput
           testID="text_input"
+          pointerEvents="none"
           style={[
             Platform.OS === 'ios' ? style.inputIOS : style.inputAndroid,
             this.getPlaceholderStyle(),
@@ -507,9 +510,11 @@ export default class RNPickerSelect extends PureComponent {
   }
 
   renderIOS() {
-    const { style, modalProps, pickerProps, touchableWrapperProps } = this.props;
+    const { disabled, style, modalProps, pickerProps, touchableWrapperProps } = this.props;
     const { animationType, orientation, selectedItem, showPicker } = this.state;
 
+    const accessibilityLabel = pickerProps && pickerProps.accessibilityLabel;
+
     return (
       <View style={[defaultStyles.viewContainer, style.viewContainer]}>
         <TouchableOpacity
@@ -519,6 +524,11 @@ export default class RNPickerSelect extends PureComponent {
           }}
           activeOpacity={1}
           {...touchableWrapperProps}
+          accessible
+          // "combobox" has no effect on iOS (facebook/react-native#50123), use "button" instead
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          accessibilityState={{ disabled, expanded: showPicker }}
         >
           {this.renderTextInputOrChildren()}
         </TouchableOpacity>

test/test.js

@@ -657,6 +657,108 @@ describe("RNPickerSelect", () => {
     });
   });
 
+  describe("iOS mode accessibility", () => {
+    beforeEach(() => {
+      Platform.OS = "ios";
+    });
+
+    it("should have accessibility props on the wrapper (iOS)", () => {
+      const wrapper = shallow(
+        <RNPickerSelect
+          items={selectItems}
+          onValueChange={noop}
+          pickerProps={{
+            accessibilityLabel: "Select a language",
+          }}
+        />,
+      );
+
+      const touchable = wrapper.find('[testID="ios_touchable_wrapper"]');
+
+      expect(touchable.props().accessible).toEqual(true);
+      expect(touchable.props().accessibilityRole).toEqual("button");
+      expect(touchable.props().accessibilityLabel).toEqual("Select a language");
+      expect(touchable.props().accessibilityState).toEqual({ disabled: false, expanded: false });
+    });
+
+    it("should use accessibilityLabel from pickerProps (iOS)", () => {
+      const wrapper = shallow(
+        <RNPickerSelect
+          items={selectItems}
+          onValueChange={noop}
+          pickerProps={{
+            accessibilityLabel: "Choose a color",
+          }}
+        />,
+      );
+
+      const touchable = wrapper.find('[testID="ios_touchable_wrapper"]');
+
+      expect(touchable.props().accessibilityLabel).toEqual("Choose a color");
+    });
+
+    it("should have undefined accessibilityLabel when not provided via pickerProps (iOS)", () => {
+      const wrapper = shallow(
+        <RNPickerSelect items={selectItems} onValueChange={noop} />,
+      );
+
+      const touchable = wrapper.find('[testID="ios_touchable_wrapper"]');
+
+      expect(touchable.props().accessibilityLabel).toBeUndefined();
+    });
+
+    it("should set accessibilityState.expanded to true when picker is open (iOS)", () => {
+      const wrapper = shallow(
+        <RNPickerSelect items={selectItems} onValueChange={noop} />,
+      );
+
+      wrapper.find('[testID="ios_touchable_wrapper"]').simulate("press");
+
+      const touchable = wrapper.find('[testID="ios_touchable_wrapper"]');
+
+      expect(touchable.props().accessibilityState).toEqual({ disabled: false, expanded: true });
+    });
+
+    it("should set accessibilityState.disabled to true when disabled (iOS)", () => {
+      const wrapper = shallow(
+        <RNPickerSelect items={selectItems} onValueChange={noop} disabled />,
+      );
+
+      const touchable = wrapper.find('[testID="ios_touchable_wrapper"]');
+
+      expect(touchable.props().accessibilityState).toEqual({ disabled: true, expanded: false });
+    });
+
+    it("should have accessibilityRole button on Done button (iOS)", () => {
+      const wrapper = shallow(
+        <RNPickerSelect items={selectItems} onValueChange={noop} />,
+      );
+
+      wrapper.find('[testID="ios_touchable_wrapper"]').simulate("press");
+
+      const doneButton = wrapper.find('[testID="done_button"]');
+
+      expect(doneButton.props().accessibilityRole).toEqual("button");
+      expect(doneButton.props().accessibilityLabel).toEqual("Done");
+    });
+
+    it("should use custom doneText as accessibilityLabel on Done button (iOS)", () => {
+      const wrapper = shallow(
+        <RNPickerSelect
+          items={selectItems}
+          onValueChange={noop}
+          doneText="Confirm"
+        />,
+      );
+
+      wrapper.find('[testID="ios_touchable_wrapper"]').simulate("press");
+
+      const doneButton = wrapper.find('[testID="done_button"]');
+
+      expect(doneButton.props().accessibilityLabel).toEqual("Confirm");
+    });
+  });
+
   it("should call the onClose callback when set", () => {
     Platform.OS = "ios";
     const onCloseSpy = jest.fn();