feat: pass accessibility props to MotiPressable

nandorojo · Nov 19, 2021 · 38e7ca8 · 38e7ca8
1 parent b422314
commit 38e7ca8
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 2 deletions.
diff --git a/packages/interactions/src/pressable/pressable.tsx b/packages/interactions/src/pressable/pressable.tsx
@@ -43,6 +43,22 @@ export const MotiPressable = forwardRef<View, MotiPressableProps>(
       id,
       hoveredValue,
       pressedValue,
+      // Accessibility props
+      accessibilityActions,
+      accessibilityElementsHidden,
+      accessibilityHint,
+      accessibilityIgnoresInvertColors,
+      accessibilityLabel,
+      accessibilityLiveRegion,
+      accessibilityRole,
+      accessibilityState,
+      accessibilityValue,
+      accessibilityViewIsModal,
+      accessible,
+      onAccessibilityTap,
+      onAccessibilityAction,
+      onAccessibilityEscape,
+      importantForAccessibility,
     } = props
 
     const _hovered = useSharedValue(false)
@@ -112,6 +128,22 @@ export const MotiPressable = forwardRef<View, MotiPressableProps>(
             style={containerStyle}
             onPress={onPress}
             ref={ref}
+            // Accessibility props
+            accessibilityActions={accessibilityActions}
+            accessibilityElementsHidden={accessibilityElementsHidden}
+            accessibilityHint={accessibilityHint}
+            accessibilityIgnoresInvertColors={accessibilityIgnoresInvertColors}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityLiveRegion={accessibilityLiveRegion}
+            accessibilityRole={accessibilityRole}
+            accessibilityState={accessibilityState}
+            accessibilityValue={accessibilityValue}
+            accessibilityViewIsModal={accessibilityViewIsModal}
+            accessible={accessible}
+            onAccessibilityTap={onAccessibilityTap}
+            onAccessibilityAction={onAccessibilityAction}
+            onAccessibilityEscape={onAccessibilityEscape}
+            importantForAccessibility={importantForAccessibility}
           >
             {child}
           </Pressable>
@@ -131,6 +163,22 @@ export const MotiPressable = forwardRef<View, MotiPressableProps>(
           // TODO there is an added View child here, which Pressable doesn't  have.
           // should we wrap the pressable children too?
           containerStyle={containerStyle}
+          // Accessibility props
+          accessibilityActions={accessibilityActions}
+          accessibilityElementsHidden={accessibilityElementsHidden}
+          accessibilityHint={accessibilityHint}
+          accessibilityIgnoresInvertColors={accessibilityIgnoresInvertColors}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityLiveRegion={accessibilityLiveRegion}
+          accessibilityRole={accessibilityRole}
+          accessibilityState={accessibilityState}
+          accessibilityValue={accessibilityValue}
+          accessibilityViewIsModal={accessibilityViewIsModal}
+          accessible={accessible}
+          onAccessibilityTap={onAccessibilityTap}
+          onAccessibilityAction={onAccessibilityAction}
+          onAccessibilityEscape={onAccessibilityEscape}
+          importantForAccessibility={importantForAccessibility}
         >
           {child}
         </AnimatedTouchable>

diff --git a/packages/interactions/src/pressable/types.ts b/packages/interactions/src/pressable/types.ts
@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react'
 import type { MotiView } from '@motify/components'
-import type { ViewStyle, Insets } from 'react-native'
+import type { ViewStyle, Insets, PressableProps } from 'react-native'
 import type { MotiAnimationProp } from '@motify/core'
 import type Animated from 'react-native-reanimated'
 
@@ -69,4 +69,22 @@ export type MotiPressableProps = {
 } & Pick<
   ComponentProps<typeof MotiView>,
   'children' | 'exit' | 'from' | 'transition' | 'exitTransition' | 'style'
->
+> &
+  Pick<
+    PressableProps,
+    | 'accessibilityActions'
+    | 'accessibilityElementsHidden'
+    | 'accessibilityHint'
+    | 'accessibilityIgnoresInvertColors'
+    | 'accessibilityLabel'
+    | 'accessibilityLiveRegion'
+    | 'accessibilityRole'
+    | 'accessibilityState'
+    | 'accessibilityValue'
+    | 'accessibilityViewIsModal'
+    | 'accessible'
+    | 'onAccessibilityTap'
+    | 'onAccessibilityAction'
+    | 'onAccessibilityEscape'
+    | 'importantForAccessibility'
+  >;