17051 - migrated Checkbox to PressableWithFeedback

src/components/Checkbox.js

@@ -1,11 +1,12 @@
 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 themeColors from '../styles/themes/default';
 import stylePropTypes from '../styles/stylePropTypes';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
 
 const propTypes = {
     /** Whether checkbox is checked */
@@ -34,6 +35,9 @@ const propTypes = {
 
     /** A ref to forward to the Pressable */
     forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
+
+    /** A ref to forward to the Pressable */
+    accessibilityLabel: PropTypes.string,
 };
 
 const defaultProps = {
@@ -45,6 +49,7 @@ const defaultProps = {
     forwardedRef: undefined,
     children: null,
     onMouseDown: undefined,
+    accessibilityLabel: '',
 };
 
 function Checkbox(props) {
@@ -67,7 +72,7 @@ function Checkbox(props) {
     };
 
     return (
-        <Pressable
+        <PressableWithFeedback
             disabled={props.disabled}
             onPress={firePressHandlerOnClick}
             onMouseDown={props.onMouseDown}
@@ -76,6 +81,8 @@ function Checkbox(props) {
             onKeyDown={handleSpaceKey}
             accessibilityRole="checkbox"
             accessibilityState={{checked: props.isChecked}}
+            accessibilityLabel={props.accessibilityLabel}
+            pressDimmingValue={1}
         >
             {props.children ? (
                 props.children
@@ -100,7 +107,7 @@ function Checkbox(props) {
                     )}
                 </View>
             )}
-        </Pressable>
+        </PressableWithFeedback>
     );
 }
 

src/components/TextInput/BaseTextInput.js

@@ -343,7 +343,7 @@ class BaseTextInput extends Component {
                                 />
                                 {Boolean(this.props.secureTextEntry) && (
                                     <Checkbox
-                                        style={styles.textInputIconContainer}
+                                        style={[styles.flex1, styles.textInputIconContainer]}
                                         onPress={this.togglePasswordVisibility}
                                         onMouseDown={(e) => e.preventDefault()}
                                     >