feat(checkbox/radioButton): ensure minimum 48x48 hit target for better accessibility (#3518)

* feat(checkbox/radioButton): ensure minimum 48x48 hit target for better accessibility

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: nitzany@wix.com <nitzany@wix.com>

Author: devin-ai-integration[bot]

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -89,7 +89,7 @@ export default class CheckboxScreen extends Component {
             disabled
             value={this.state.value5}
             onValueChange={value5 => this.setState({value5})}
-            style={{marginRight: 10}}
+            style={{marginRight: 20}}
           />
           <Checkbox
             disabled

demo/src/screens/componentScreens/RadioButtonScreen.js

@@ -69,7 +69,7 @@ export default class RadioButtonScreen extends Component {
             Radio Buttons
           </Text>
 
-          <RadioGroup initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
+          <RadioGroup gap-s4 initialValue={this.state.color || null} onValueChange={value => this.setState({color: value})}>
             <Text marginB-20 text60 $textDefault>
               Select a color{'\n'}
               (enum with default value)
@@ -82,6 +82,7 @@ export default class RadioButtonScreen extends Component {
           </RadioGroup>
 
           <RadioGroup
+            gap-s4
             marginT-30
             initialValue={this.state.textSide}
             onValueChange={value => this.setState({textSide: value})}
@@ -96,7 +97,7 @@ export default class RadioButtonScreen extends Component {
             <Text marginT-10>You chose: {this.state.textSide}</Text>
           </RadioGroup>
 
-          <RadioGroup marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
+          <RadioGroup gap-s4 marginT-30 initialValue={this.state.value} onValueChange={value => this.setState({value})}>
             <Text marginB-20 text60 $textDefault>
               Yes or No?
             </Text>
@@ -112,6 +113,7 @@ export default class RadioButtonScreen extends Component {
           </Text>
           <View row centerV marginB-10>
             <RadioButton
+              gap-s4
               selected={this.state.individualValue2}
               onPress={() => this.setState({individualValue2: !this.state.individualValue2})}
               label="Individual Radio Button (with style)"

src/components/checkbox/index.tsx

@@ -252,8 +252,13 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     };
   };
 
+  getAccessibleHitSlop(size: number) {
+    return Math.max(0, (48 - size) / 2);    
+  }
+
   renderCheckbox() {
     const {selectedIcon, label, testID, style, containerStyle, indeterminate, ...others} = this.props;
+    
     return (
       //@ts-ignore
       <TouchableOpacity
@@ -263,6 +268,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
         {...others}
         style={[this.getBorderStyle(), style, !label && containerStyle]}
         onPress={this.onPress}
+        hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}
       >
         {
           <Animated.View

src/components/radioButton/index.tsx

@@ -257,6 +257,15 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
     );
   }
 
+  getAccessibleHitSlop(size: number) {
+    const verticalPadding = Math.max(0, (48 - size) / 2);
+    
+    return {
+      top: verticalPadding,
+      bottom: verticalPadding
+    };
+  }
+
   render() {
     const {onPress, onValueChange, containerStyle, contentOnLeft, ...others} = this.props;
     const Container = onPress || onValueChange ? TouchableOpacity : View;
@@ -271,6 +280,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
         style={containerStyle}
         onPress={this.onPress}
         {...this.getAccessibilityProps()}
+        hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}
       >
         {!contentOnLeft && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}