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

src/components/checkbox/index.tsx

@@ -252,8 +252,22 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     };
   };
 
+  getAccessibleHitSlop() {
+    const {size = DEFAULT_SIZE} = this.props;
+    const verticalPadding = Math.max(0, (48 - size) / 2);
+    const horizontalPadding = verticalPadding;
+
+    return {
+      top: verticalPadding,
+      bottom: verticalPadding,
+      left: horizontalPadding,
+      right: horizontalPadding
+    };
+  }
+
   renderCheckbox() {
     const {selectedIcon, label, testID, style, containerStyle, indeterminate, ...others} = this.props;
+
     return (
       //@ts-ignore
       <TouchableOpacity
@@ -263,6 +277,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,8 +257,21 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
     );
   }
 
+  getAccessibleHitSlop() {
+    const {size = DEFAULT_SIZE} = this.props;
+    const verticalPadding = Math.max(0, (48 - size) / 2);
+    const horizontalPadding = verticalPadding;
+
+    return {
+      top: verticalPadding,
+      bottom: verticalPadding,
+      left: horizontalPadding,
+      right: horizontalPadding
+    };
+  }
+
   render() {
-    const {onPress, onValueChange, containerStyle, contentOnLeft, ...others} = this.props;
+    const {onPress, onValueChange, containerStyle, contentOnLeft, iconOnRight, ...others} = this.props;
     const Container = onPress || onValueChange ? TouchableOpacity : View;
 
     return (
@@ -271,10 +284,11 @@ 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()}
-        {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}
+        {iconOnRight ? this.renderLabel() : this.renderIcon()}
+        {iconOnRight ? this.renderIcon() : this.renderLabel()}
         {contentOnLeft && this.renderButton()}
       </Container>
     );