diff --git a/src/components/OpacityView.js b/src/components/OpacityView.js index 1592befdf127..241d83973cf8 100644 --- a/src/components/OpacityView.js +++ b/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 diff --git a/src/components/Switch.js b/src/components/Switch.js index e4de23650556..f0fd20f7af48 100644 --- a/src/components/Switch.js +++ b/src/components/Switch.js @@ -1,7 +1,8 @@ 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 */ @@ -9,8 +10,12 @@ const propTypes = { /** 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 ( - 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} > - + ); } } diff --git a/src/components/TestToolMenu.js b/src/components/TestToolMenu.js index acf9a426d54f..2e9c7fd4027c 100644 --- a/src/components/TestToolMenu.js +++ b/src/components/TestToolMenu.js @@ -51,6 +51,7 @@ const TestToolMenu = (props) => ( {!CONFIG.IS_USING_LOCAL_WEB && ( User.setShouldUseStagingServer(!lodashGet(props, 'user.shouldUseStagingServer', ApiUtils.isUsingStagingApi()))} /> @@ -60,6 +61,7 @@ const TestToolMenu = (props) => ( {/* When toggled the app will be forced offline. */} Network.setShouldForceOffline(!props.network.shouldForceOffline)} /> @@ -68,6 +70,7 @@ const TestToolMenu = (props) => ( {/* When toggled all network requests will fail. */} Network.setShouldFailAllRequests(!props.network.shouldFailAllRequests)} /> diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index 4fdcef95d07e..03b79d2dcae2 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -71,6 +71,7 @@ const PreferencesPage = (props) => { diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.js index 7c5e68106d5d..1cf7a06f7e95 100644 --- a/src/pages/settings/Profile/TimezoneInitialPage.js +++ b/src/pages/settings/Profile/TimezoneInitialPage.js @@ -55,6 +55,7 @@ const TimezoneInitialPage = (props) => { {props.translate('timezonePage.getLocationAutomatically')}