From e800ba1ac2a9c5b51a3ab04c96b7ce72ee1852f4 Mon Sep 17 00:00:00 2001
From: grgr-dkrk <40130327+grgr-dkrk@users.noreply.github.com>
Date: Mon, 18 Oct 2021 15:26:49 +0900
Subject: [PATCH] fix(Slider): make screen readers recognize correctly

---
 .../primitives/Slider/SliderThumb.tsx         | 49 ++++++++++++++-----
 .../primitives/Slider/SliderTrack.tsx         |  2 +
 2 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/components/primitives/Slider/SliderThumb.tsx b/src/components/primitives/Slider/SliderThumb.tsx
index 10ee3808f..4ee38d151 100644
--- a/src/components/primitives/Slider/SliderThumb.tsx
+++ b/src/components/primitives/Slider/SliderThumb.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { Platform } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { useSliderThumb } from '@react-native-aria/slider';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { useToken } from '../../../hooks';
@@ -54,6 +54,7 @@ function SliderThumb(props: ISliderThumbProps, ref: any) {
       orientation === 'vertical'
         ? [{ translateY: parseInt(thumbAbsoluteSize) / 2 }]
         : [{ translateX: -parseInt(thumbAbsoluteSize) / 2 }],
+    position: orientation === 'vertical' ? 'absolute' : undefined,
   };
 
   thumbStyles.transform.push({
@@ -64,22 +65,44 @@ function SliderThumb(props: ISliderThumbProps, ref: any) {
     return null;
   }
 
+  const styles = StyleSheet.create({
+    wrapperHorizontal: {
+      width: '100%',
+    },
+    wrapperVertical: {
+      alignItems: 'center',
+      height: '100%',
+      width: thumbSize,
+    },
+  });
+
   return (
     <Box
+      accessible
+      {...inputProps}
       position="absolute"
-      {...thumbProps}
-      {...resolvedProps}
-      ref={ref}
-      style={[thumbStyles, props.style]}
-      // {...(isReadOnly && _readOnly)}
-      // {...(isDisabled && _disabled)}
+      pointerEvents="box-none"
+      style={
+        orientation !== 'vertical'
+          ? styles.wrapperHorizontal
+          : styles.wrapperVertical
+      }
     >
-      {props.children}
-      {Platform.OS === 'web' && (
-        <VisuallyHidden>
-          <input ref={inputRef} {...inputProps} />
-        </VisuallyHidden>
-      )}
+      <Box
+        {...thumbProps}
+        {...resolvedProps}
+        ref={ref}
+        style={[thumbStyles, props.style]}
+        // {...(isReadOnly && _readOnly)}
+        // {...(isDisabled && _disabled)}
+      >
+        {props.children}
+        {Platform.OS === 'web' && (
+          <VisuallyHidden>
+            <input ref={inputRef} {...inputProps} />
+          </VisuallyHidden>
+        )}
+      </Box>
     </Box>
   );
 }
diff --git a/src/components/primitives/Slider/SliderTrack.tsx b/src/components/primitives/Slider/SliderTrack.tsx
index 28cfcbfc8..58f148360 100644
--- a/src/components/primitives/Slider/SliderTrack.tsx
+++ b/src/components/primitives/Slider/SliderTrack.tsx
@@ -44,6 +44,8 @@ const SliderTrack = ({ children, ...props }: ISliderTrackProps, ref?: any) => {
 
   return (
     <Pressable
+      accessible={false}
+      importantForAccessibility={'no-hide-descendants'}
       onLayout={onTrackLayout}
       ref={ref}
       {...trackProps}