fix(Slider): make screen readers recognize correctly

GeekyAnts · Oct 18, 2021 · 1d226d9 · 1d226d9
1 parent 8fa432d
commit 1d226d9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 deletions.
diff --git 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';
@@ -64,22 +64,35 @@ function SliderThumb(props: ISliderThumbProps, ref: any) {
     return null;
   }
 
+  const styles = StyleSheet.create({
+    wrapper: {
+      width: '100%',
+    },
+  });
+
   return (
     <Box
+      accessible
+      {...inputProps}
       position="absolute"
-      {...thumbProps}
-      {...resolvedProps}
-      ref={ref}
-      style={[thumbStyles, props.style]}
-      // {...(isReadOnly && _readOnly)}
-      // {...(isDisabled && _disabled)}
+      pointerEvents="box-none"
+      style={styles.wrapper}
     >
-      {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
@@ -44,6 +44,8 @@ const SliderTrack = ({ children, ...props }: ISliderTrackProps, ref?: any) => {
 
   return (
     <Pressable
+      accessible={false}
+      importantForAccessibility={'no-hide-descendants'}
       onLayout={onTrackLayout}
       ref={ref}
       {...trackProps}