Fix checkbox accessibility

src/CONST.js

@@ -693,6 +693,9 @@ const CONST = {
 
     // There's a limit of 60k characters in Auth - https://github.com/Expensify/Auth/blob/198d59547f71fdee8121325e8bc9241fc9c3236a/auth/lib/Request.h#L28
     MAX_COMMENT_LENGTH: 60000,
+    KEYCODE: {
+        SPACE: 32,
+    },
 };
 
 export default CONST;

src/components/Checkbox.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import {View, Pressable} from 'react-native';
+import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
+import CheckboxButton from './CheckboxButton';
 
 const propTypes = {
     /** Whether checkbox is checked */
@@ -32,7 +33,7 @@ const defaultProps = {
 };
 
 const Checkbox = props => (
-    <Pressable
+    <CheckboxButton
         disabled={props.disabled}
         onPress={() => props.onPress(!props.isChecked)}
         ref={props.forwardedRef}
@@ -47,7 +48,7 @@ const Checkbox = props => (
         >
             <Icon src={Expensicons.Checkmark} fill="white" height={14} width={14} />
         </View>
-    </Pressable>
+    </CheckboxButton>
 );
 
 Checkbox.propTypes = propTypes;

src/components/CheckboxButton/index.js

@@ -0,0 +1,87 @@
+import React, {Component} from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import CONST from '../../CONST';
+
+const propTypes = {
+    /** Should the input be disabled  */
+    disabled: PropTypes.bool,
+
+    /** A function that is called when the box/label is pressed */
+    onPress: PropTypes.func.isRequired,
+
+    /** Additional styles to add to checkbox button */
+    style: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.object,
+    ]),
+
+    /** A ref to forward to the Pressable */
+    forwardedRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+    ]),
+
+    /** Children to wrap in CheckboxButton. */
+    children: PropTypes.node.isRequired,
+};
+
+const defaultProps = {
+    disabled: false,
+    style: [],
+    forwardedRef: undefined,
+};
+
+class CheckboxButton extends Component {
+    constructor(props) {
+        super(props);
+
+        this.onClick = this.onClick.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.onToggle = this.onToggle.bind(this);
+    }
+
+    onClick() {
+        this.onToggle();
+    }
+
+    onKeyDown(event) {
+        if (event.keyCode !== CONST.KEYCODE.SPACE) {
+            return;
+        }
+
+        this.onToggle();
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    onToggle() {
+        if (this.props.disabled) {
+            return;
+        }
+
+        this.props.onPress();
+    }
+
+    render() {
+        return (
+            <View
+                focusable
+                onClick={this.onClick}
+                onKeyDown={this.onKeyDown}
+                ref={this.props.forwardedRef}
+                style={this.props.style}
+            >
+                {this.props.children}
+            </View>
+        );
+    }
+}
+
+CheckboxButton.propTypes = propTypes;
+CheckboxButton.defaultProps = defaultProps;
+
+export default React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <CheckboxButton {...props} forwardedRef={ref} />
+));

src/components/CheckboxButton/index.native.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import {Pressable} from 'react-native';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** Should the input be disabled  */
+    disabled: PropTypes.bool,
+
+    /** A function that is called when the box/label is pressed */
+    onPress: PropTypes.func.isRequired,
+
+    /** Additional styles to add to checkbox button */
+    style: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.object,
+    ]),
+
+    /** A ref to forward to the Pressable */
+    forwardedRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({current: PropTypes.instanceOf(React.Component)}),
+    ]),
+
+    /** Children to wrap in CheckboxButton. */
+    children: PropTypes.node.isRequired,
+};
+
+const defaultProps = {
+    disabled: false,
+    style: [],
+    forwardedRef: undefined,
+};
+
+const CheckboxButton = props => (
+    <Pressable
+        disabled={props.disabled}
+        onPress={props.onPress}
+        ref={props.forwardedRef}
+        style={props.style}
+    >
+        {props.children}
+    </Pressable>
+);
+
+CheckboxButton.propTypes = propTypes;
+CheckboxButton.defaultProps = defaultProps;
+CheckboxButton.displayName = 'CheckboxButton';
+
+export default React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <CheckboxButton {...props} forwardedRef={ref} />
+));

src/components/TextInput/BaseTextInput.js

@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
 import {
-    Animated, View, TouchableWithoutFeedback, Pressable, AppState, Keyboard,
+    Animated, View, TouchableWithoutFeedback, AppState, Keyboard,
 } from 'react-native';
 import Str from 'expensify-common/lib/str';
 import RNTextInput from '../RNTextInput';
@@ -14,6 +14,7 @@ import * as Expensicons from '../Icon/Expensicons';
 import Text from '../Text';
 import * as styleConst from './styleConst';
 import * as StyleUtils from '../../styles/StyleUtils';
+import CheckboxButton from '../CheckboxButton';
 
 class BaseTextInput extends Component {
     constructor(props) {
@@ -274,16 +275,15 @@ class BaseTextInput extends Component {
                                         showSoftInputOnFocus={!this.props.disableKeyboard}
                                     />
                                     {this.props.secureTextEntry && (
-                                        <Pressable
-                                            accessibilityRole="button"
+                                        <CheckboxButton
                                             style={styles.secureInputShowPasswordButton}
                                             onPress={this.togglePasswordVisibility}
                                         >
                                             <Icon
                                                 src={this.state.passwordHidden ? Expensicons.Eye : Expensicons.EyeDisabled}
                                                 fill={themeColors.icon}
                                             />
-                                        </Pressable>
+                                        </CheckboxButton>
                                     )}
                                 </View>
                             </View>