Carousel - page control hit slop fix a11y (#3763)

* Add accessible hit slop calculation to PageControl component

* getAccessibleHitSlop moved to StyleUtils

* Refactor hit slop calculation in PageControl component for improved accessibility

* Refactor hit slop calculation for consistency and improved accessibility

---------

Co-authored-by: Miki Leib <[email protected]>

Author: adids1221

src/components/checkbox/index.tsx

@@ -10,6 +10,7 @@ import {
   ImageStyle
 } from 'react-native';
 import {Colors, Spacings} from '../../style';
+import {StyleUtils} from '../../utils';
 //@ts-ignore
 import Assets from '../../assets';
 import {asBaseComponent} from '../../commons/new';
@@ -251,9 +252,7 @@ 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;
@@ -267,7 +266,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)}
+        hitSlop={StyleUtils.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}
       >
         {
           <Animated.View

src/components/pageControl/index.tsx

@@ -3,6 +3,7 @@ import React, {PureComponent} from 'react';
 import {StyleSheet, LayoutAnimation, StyleProp, ViewStyle} from 'react-native';
 import {asBaseComponent} from '../../commons/new';
 import {Colors} from '../../style';
+import {StyleUtils} from '../../utils';
 import TouchableOpacity, {TouchableOpacityProps} from '../touchableOpacity';
 import View from '../view';
 
@@ -114,14 +115,12 @@ class PageControl extends PureComponent<PageControlProps, State> {
 
     if (Array.isArray(props.size)) {
       if (props.size[0] >= props.size[1] || props.size[1] >= props.size[2]) {
-        console.warn(
-          'It is recommended that largeSize > mediumSize > smallSize, currently: smallSize=',
+        console.warn('It is recommended that largeSize > mediumSize > smallSize, currently: smallSize=',
           props.size[0],
           'mediumSize=',
           props.size[1],
           'largeSize=',
-          props.size[2]
-        );
+          props.size[2]);
       }
     }
   }
@@ -190,6 +189,8 @@ class PageControl extends PureComponent<PageControlProps, State> {
 
   renderIndicator(index: number, size: number, enlargeActive?: boolean) {
     const {currentPage, color, inactiveColor, onPagePress, spacing = PageControl.DEFAULT_SPACING} = this.props;
+    const hitSlopValue = StyleUtils.getAccessibleHitSlop(size);
+
     return (
       <TouchableOpacity
         customValue={index}
@@ -201,6 +202,10 @@ class PageControl extends PureComponent<PageControlProps, State> {
           getColorStyle(index === currentPage, color, inactiveColor),
           getSizeStyle(size, index, currentPage, enlargeActive)
         ]}
+        hitSlop={{
+          top: hitSlopValue,
+          bottom: hitSlopValue
+        }}
       />
     );
   }

src/components/radioButton/index.tsx

@@ -10,6 +10,7 @@ import {
   ViewStyle
 } from 'react-native';
 import {Colors} from '../../style';
+import {StyleUtils} from '../../utils';
 import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../../commons/new';
 import TouchableOpacity from '../touchableOpacity';
 import View, {ViewProps} from '../view';
@@ -257,18 +258,12 @@ 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;
+    const hitSlopValue = StyleUtils.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE);
 
     return (
       // @ts-ignore
@@ -280,7 +275,10 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
         style={containerStyle}
         onPress={this.onPress}
         {...this.getAccessibilityProps()}
-        hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}
+        hitSlop={{
+          top: hitSlopValue,
+          bottom: hitSlopValue
+        }}
       >
         {!contentOnLeft && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}

src/utils/styleUtils.ts

@@ -9,3 +9,7 @@ export function unpackStyle(style?: StyleProp<ViewStyle>, options: UnpackStyleOp
     return JSON.parse(JSON.stringify(options.flatten ? StyleSheet.flatten(style) : style));
   }
 }
+
+export function getAccessibleHitSlop(size: number) {
+  return Math.max(0, (48 - size) / 2);
+}