17016 migrate switch

src/components/OpacityView.js

@@ -21,7 +21,7 @@ const propTypes = {
      * @default []
      */
     // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.arrayOf(PropTypes.object),
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 
     /**
      * The value to use for the opacity when the view is dimmed

src/components/Switch.js

@@ -1,16 +1,21 @@
 import React, {Component} from 'react';
-import {TouchableOpacity, Animated} from 'react-native';
+import {Animated} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
+import * as Pressables from './Pressable';
 
 const propTypes = {
     /** Whether the switch is toggled to the on position */
     isOn: PropTypes.bool.isRequired,
 
     /** Callback to fire when the switch is toggled */
     onToggle: PropTypes.func.isRequired,
+
+    /** Accessibility label for the switch */
+    accessibilityLabel: PropTypes.string.isRequired,
 };
 
+const PressableWithFeedback = Pressables.PressableWithFeedback;
 class Switch extends Component {
     constructor(props) {
         super(props);
@@ -19,6 +24,7 @@ class Switch extends Component {
         this.offsetX = new Animated.Value(props.isOn ? this.onPosition : this.offPosition);
 
         this.toggleSwitch = this.toggleSwitch.bind(this);
+        this.toggleAction = this.toggleAction.bind(this);
     }
 
     componentDidUpdate(prevProps) {
@@ -29,6 +35,7 @@ class Switch extends Component {
         this.toggleSwitch();
     }
 
+    // animates the switch to the on or off position
     toggleSwitch() {
         Animated.timing(this.offsetX, {
             toValue: this.props.isOn ? this.onPosition : this.offPosition,
@@ -37,16 +44,28 @@ class Switch extends Component {
         }).start();
     }
 
+    // executes the callback passed in as a prop
+    toggleAction() {
+        this.props.onToggle(!this.props.isOn);
+    }
+
     render() {
         const switchTransform = {transform: [{translateX: this.offsetX}]};
         return (
-            <TouchableOpacity
+            <PressableWithFeedback
                 style={[styles.switchTrack, !this.props.isOn && styles.switchInactive]}
-                activeOpacity={0.8}
-                onPress={() => this.props.onToggle(!this.props.isOn)}
+                onPress={this.toggleAction}
+                onLongPress={this.toggleAction}
+                accessibilityRole="switch"
+                accessibilityState={{checked: this.props.isOn}}
+                aria-checked={this.props.isOn}
+                accessibilityLabel={this.props.accessibilityLabel}
+                // disable hover dim for switch
+                hoverDimmingValue={1}
+                pressDimmingValue={0.8}
             >
                 <Animated.View style={[styles.switchThumb, switchTransform]} />
-            </TouchableOpacity>
+            </PressableWithFeedback>
         );
     }
 }

src/components/TestToolMenu.js

@@ -51,6 +51,7 @@ const TestToolMenu = (props) => (
         {!CONFIG.IS_USING_LOCAL_WEB && (
             <TestToolRow title="Use Staging Server">
                 <Switch
+                    accessibilityLabel="Use Staging Server"
                     isOn={lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi())}
                     onToggle={() => User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))}
                 />
@@ -60,6 +61,7 @@ const TestToolMenu = (props) => (
         {/* When toggled the app will be forced offline. */}
         <TestToolRow title="Force offline">
             <Switch
+                accessibilityLabel="Force offline"
                 isOn={Boolean(props.network.shouldForceOffline)}
                 onToggle={() => Network.setShouldForceOffline(!props.network.shouldForceOffline)}
             />
@@ -68,6 +70,7 @@ const TestToolMenu = (props) => (
         {/* When toggled all network requests will fail. */}
         <TestToolRow title="Simulate failing network requests">
             <Switch
+                accessibilityLabel="Simulate failing network requests"
                 isOn={Boolean(props.network.shouldFailAllRequests)}
                 onToggle={() => Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)}
             />

src/pages/settings/Preferences/PreferencesPage.js

@@ -71,6 +71,7 @@ const PreferencesPage = (props) => {
                         </View>
                         <View style={[styles.flex1, styles.alignItemsEnd]}>
                             <Switch
+                                accessibilityLabel={props.translate('preferencesPage.receiveRelevantFeatureUpdatesAndExpensifyNews')}
                                 isOn={lodashGet(props.user, 'isSubscribedToNewsletter', true)}
                                 onToggle={User.updateNewsletterSubscription}
                             />

src/pages/settings/Profile/TimezoneInitialPage.js

@@ -55,6 +55,7 @@ const TimezoneInitialPage = (props) => {
                     <View style={[styles.flexRow, styles.mb5, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>
                         <Text>{props.translate('timezonePage.getLocationAutomatically')}</Text>
                         <Switch
+                            accessibilityLabel={props.translate('timezonePage.getLocationAutomatically')}
                             isOn={timezone.automatic}
                             onToggle={updateAutomaticTimezone}
                         />