feat(button & stepper): ensure minimum 48x48 hit target for better accessibility (#3522)

* Added hitslop calculation for button

* fixed ts error - not sure why it popped now

* Updated snapshots with hitslop

* Refactor getAccessibleHitSlop to simplify width calculation and improve hit slop logic

* Revert "Refactor getAccessibleHitSlop to simplify width calculation and improve hit slop logic"

This reverts commit c1b3ba1.

* fix(button): rename variable for clarity in getAccessibleHitSlop method

Author: nitzanyiz

demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

@@ -3555,6 +3555,14 @@ exports[`TextField Screen renders screen 1`] = `
           accessible={true}
           collapsable={false}
           focusable={true}
+          hitSlop={
+            {
+              "bottom": 15,
+              "left": 0,
+              "right": 0,
+              "top": 15,
+            }
+          }
           onClick={[Function]}
           onLayout={[Function]}
           onResponderGrant={[Function]}
@@ -3891,10 +3899,10 @@ exports[`TextField Screen renders screen 1`] = `
               focusable={true}
               hitSlop={
                 {
-                  "bottom": 20,
-                  "left": 20,
-                  "right": 20,
-                  "top": 20,
+                  "bottom": 7.5,
+                  "left": 10,
+                  "right": 10,
+                  "top": 7.5,
                 }
               }
               onClick={[Function]}
@@ -4613,6 +4621,14 @@ exports[`TextField Screen renders screen 1`] = `
             accessible={true}
             collapsable={false}
             focusable={true}
+            hitSlop={
+              {
+                "bottom": 7.5,
+                "left": 10,
+                "right": 10,
+                "top": 7.5,
+              }
+            }
             onClick={[Function]}
             onLayout={[Function]}
             onResponderGrant={[Function]}

src/components/button/ButtonConstants.ts

@@ -22,4 +22,11 @@ export const MIN_WIDTH = {
   LARGE: 90
 };
 
+export const SIZE_TO_VERTICAL_HITSLOP = {
+  [ButtonSize.xSmall]: 30,
+  [ButtonSize.small]: 25,
+  [ButtonSize.medium]: 20,
+  [ButtonSize.large]: 15
+} as const;
+
 export const DEFAULT_SIZE = ButtonSize.large;