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

src/components/checkbox/index.tsx

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

src/components/radioButton/index.tsx

@@ -257,6 +257,16 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
     );
   }
 
+  getAccessibleHitSlop() {
+    const {size = DEFAULT_SIZE} = this.props;
+    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 +281,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
         style={containerStyle}
         onPress={this.onPress}
         {...this.getAccessibilityProps()}
+        hitSlop={Container === TouchableOpacity ? this.getAccessibleHitSlop() : undefined}
       >
         {!contentOnLeft && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}