feat(switch): ensure minimum 48x48 hit target for better accessibility (#3517)

* feat(switch): ensure minimum 48x48 hit target for better accessibility

Co-Authored-By: [email protected] <[email protected]>

* refactor: destructure props at top of render function

Co-Authored-By: [email protected] <[email protected]>

* refactor(switch): move hitSlop calculation to dedicated function

Co-Authored-By: [email protected] <[email protected]>

* refactor(switch): rename getHitSlopSize to getAccessibleHitSlop

Co-Authored-By: [email protected] <[email protected]>

* feat(switch): allow hitSlop override while maintaining default accessibility

Co-Authored-By: [email protected] <[email protected]>

* fix(switch): remove redundant hitSlop prop and fix prop spreading order

Co-Authored-By: [email protected] <[email protected]>

* chore(switch): remove unused import

Co-Authored-By: [email protected] <[email protected]>

---------

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

Author: devin-ai-integration[bot]

src/components/switch/index.tsx

@@ -150,13 +150,28 @@ class Switch extends Component<SwitchProps> {
     return <Animated.View style={[this.styles.thumb, thumbPositionStyle, thumbStyle]}/>;
   }
 
+  getAccessibleHitSlop() {
+    const {width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT} = this.props;
+    const verticalPadding = Math.max(0, (48 - height) / 2);
+    const horizontalPadding = Math.max(0, (48 - width) / 2);
+    
+    return {
+      top: verticalPadding,
+      bottom: verticalPadding,
+      left: horizontalPadding,
+      right: horizontalPadding
+    };
+  }
+
   render() {
     const {...others} = this.props;
+    
     return (
       // @ts-ignore
       <TouchableOpacity
         {...this.getAccessibilityProps()}
         activeOpacity={1}
+        hitSlop={this.getAccessibleHitSlop()}
         {...others}
         style={this.getSwitchStyle()}
         onPress={this.onPress}