From c1db67d6e49112f220d19a5331d0c62b91a8da4b Mon Sep 17 00:00:00 2001 From: Nitzan Yizhar Date: Tue, 25 Feb 2025 17:16:29 +0200 Subject: [PATCH 1/7] Increased default thumb hit slop --- src/components/slider/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/slider/index.tsx b/src/components/slider/index.tsx index db9bc89cba..2d988b0080 100644 --- a/src/components/slider/index.tsx +++ b/src/components/slider/index.tsx @@ -56,7 +56,7 @@ const defaultProps = { minimumValue: 0, maximumValue: 1, step: 0, - thumbHitSlop: {top: 10, bottom: 10, left: 24, right: 24}, + thumbHitSlop: {top: 24, bottom: 24, left: 24, right: 24}, useGap: true }; From f0ec8a920d05314c8580f7a41a00dde6109dddbe Mon Sep 17 00:00:00 2001 From: Nitzan Yizhar Date: Wed, 26 Feb 2025 12:14:12 +0200 Subject: [PATCH 2/7] Added hitslop to Incubator.Slider thumb --- src/incubator/slider/Thumb.tsx | 3 ++- src/incubator/slider/index.tsx | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/incubator/slider/Thumb.tsx b/src/incubator/slider/Thumb.tsx index 9ee5c58876..f5b72f5dae 100644 --- a/src/incubator/slider/Thumb.tsx +++ b/src/incubator/slider/Thumb.tsx @@ -28,6 +28,7 @@ interface ThumbProps extends ViewProps { const SHADOW_RADIUS = 4; const THUMB_SIZE = 24; +const DEFAULT_THUMB_HIT_SLOP = {top: 12, bottom: 12, left: 12, right: 12} as const; const Thumb = (props: ThumbProps) => { const { @@ -35,7 +36,7 @@ const Thumb = (props: ThumbProps) => { disableActiveStyling, activeStyle, defaultStyle, - hitSlop, + hitSlop = DEFAULT_THUMB_HIT_SLOP, onSeekStart, onSeekEnd, start, diff --git a/src/incubator/slider/index.tsx b/src/incubator/slider/index.tsx index 98f74e6a09..459e041bab 100644 --- a/src/incubator/slider/index.tsx +++ b/src/incubator/slider/index.tsx @@ -159,6 +159,8 @@ const THUMB_SIZE = 24; const THUMB_BORDER_WIDTH = 6; const SHADOW_RADIUS = 4; const GAP = Spacings.s2; +const ACCESSIBILITY_ADDTIONAL_HEIGHT = 48 - THUMB_SIZE - SHADOW_RADIUS; + const Slider = React.memo((props: Props) => { const themeProps = useThemeProps(props, 'Incubator.Slider'); @@ -195,7 +197,6 @@ const Slider = React.memo((props: Props) => { enableThumbShadow = true, throttleTime = 200 } = themeProps; - const accessibilityProps = useMemo(() => { if (accessible) { return { @@ -443,7 +444,7 @@ export default forwardRef, SliderRe const styles = StyleSheet.create({ container: { - height: THUMB_SIZE + SHADOW_RADIUS, + height: THUMB_SIZE + SHADOW_RADIUS + ACCESSIBILITY_ADDTIONAL_HEIGHT, justifyContent: 'center' }, disableRTL: { From fc97c2b0c41e805f067188097d1828bef24317d8 Mon Sep 17 00:00:00 2001 From: Nitzan Yizhar Date: Wed, 26 Feb 2025 13:56:14 +0200 Subject: [PATCH 3/7] Added hitslop to all thumbs --- src/components/slider/index.tsx | 2 +- src/incubator/slider/Thumb.tsx | 8 +++++++- src/incubator/slider/index.tsx | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/slider/index.tsx b/src/components/slider/index.tsx index 2d988b0080..e9f93d2e86 100644 --- a/src/components/slider/index.tsx +++ b/src/components/slider/index.tsx @@ -56,7 +56,7 @@ const defaultProps = { minimumValue: 0, maximumValue: 1, step: 0, - thumbHitSlop: {top: 24, bottom: 24, left: 24, right: 24}, + thumbHitSlop: {top: 12, bottom: 12, left: 24, right: 24}, useGap: true }; diff --git a/src/incubator/slider/Thumb.tsx b/src/incubator/slider/Thumb.tsx index f5b72f5dae..9e7aa67526 100644 --- a/src/incubator/slider/Thumb.tsx +++ b/src/incubator/slider/Thumb.tsx @@ -28,7 +28,13 @@ interface ThumbProps extends ViewProps { const SHADOW_RADIUS = 4; const THUMB_SIZE = 24; -const DEFAULT_THUMB_HIT_SLOP = {top: 12, bottom: 12, left: 12, right: 12} as const; +const THUMB_ACCESSIBLE_HITSLOP = Math.max(0, 48 - THUMB_SIZE) / 2; +const DEFAULT_THUMB_HIT_SLOP = { + top: THUMB_ACCESSIBLE_HITSLOP, + bottom: THUMB_ACCESSIBLE_HITSLOP, + left: THUMB_ACCESSIBLE_HITSLOP, + right: THUMB_ACCESSIBLE_HITSLOP +} as const; const Thumb = (props: ThumbProps) => { const { diff --git a/src/incubator/slider/index.tsx b/src/incubator/slider/index.tsx index 459e041bab..8c0ca4187c 100644 --- a/src/incubator/slider/index.tsx +++ b/src/incubator/slider/index.tsx @@ -444,7 +444,7 @@ export default forwardRef, SliderRe const styles = StyleSheet.create({ container: { - height: THUMB_SIZE + SHADOW_RADIUS + ACCESSIBILITY_ADDTIONAL_HEIGHT, + height: THUMB_SIZE + SHADOW_RADIUS, justifyContent: 'center' }, disableRTL: { From d9d9213999abe00b2a75ecf046e407b7d0064080 Mon Sep 17 00:00:00 2001 From: Nitzan Yizhar Date: Wed, 26 Feb 2025 13:56:46 +0200 Subject: [PATCH 4/7] Removed extra const --- src/incubator/slider/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/incubator/slider/index.tsx b/src/incubator/slider/index.tsx index 8c0ca4187c..e267438583 100644 --- a/src/incubator/slider/index.tsx +++ b/src/incubator/slider/index.tsx @@ -159,7 +159,6 @@ const THUMB_SIZE = 24; const THUMB_BORDER_WIDTH = 6; const SHADOW_RADIUS = 4; const GAP = Spacings.s2; -const ACCESSIBILITY_ADDTIONAL_HEIGHT = 48 - THUMB_SIZE - SHADOW_RADIUS; const Slider = React.memo((props: Props) => { From 92402798fc6e20c483ffbd622867b9093345a4e5 Mon Sep 17 00:00:00 2001 From: Nitzan Yizhar Date: Wed, 26 Feb 2025 13:57:06 +0200 Subject: [PATCH 5/7] Removed extra line --- src/incubator/slider/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/incubator/slider/index.tsx b/src/incubator/slider/index.tsx index e267438583..dc746c25c2 100644 --- a/src/incubator/slider/index.tsx +++ b/src/incubator/slider/index.tsx @@ -160,7 +160,6 @@ const THUMB_BORDER_WIDTH = 6; const SHADOW_RADIUS = 4; const GAP = Spacings.s2; - const Slider = React.memo((props: Props) => { const themeProps = useThemeProps(props, 'Incubator.Slider'); const { From 345b3fe59acd9a193c85c77b87aca885ea34dd5e Mon Sep 17 00:00:00 2001 From: Nitzan Yizhar Date: Wed, 26 Feb 2025 13:57:47 +0200 Subject: [PATCH 6/7] Revert old slider index changes --- src/incubator/slider/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/incubator/slider/index.tsx b/src/incubator/slider/index.tsx index dc746c25c2..98f74e6a09 100644 --- a/src/incubator/slider/index.tsx +++ b/src/incubator/slider/index.tsx @@ -195,6 +195,7 @@ const Slider = React.memo((props: Props) => { enableThumbShadow = true, throttleTime = 200 } = themeProps; + const accessibilityProps = useMemo(() => { if (accessible) { return { From b2a6e43fae79bc75cd558fb585f4c394093511de Mon Sep 17 00:00:00 2001 From: Nitzan Yizhar Date: Wed, 26 Feb 2025 14:08:53 +0200 Subject: [PATCH 7/7] Revert old slider index changes --- src/components/slider/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/slider/index.tsx b/src/components/slider/index.tsx index e9f93d2e86..db9bc89cba 100644 --- a/src/components/slider/index.tsx +++ b/src/components/slider/index.tsx @@ -56,7 +56,7 @@ const defaultProps = { minimumValue: 0, maximumValue: 1, step: 0, - thumbHitSlop: {top: 12, bottom: 12, left: 24, right: 24}, + thumbHitSlop: {top: 10, bottom: 10, left: 24, right: 24}, useGap: true };