feat: added accessibility props on AutofocusContainer's Touchable container (#300)

* Add type helper PickAccessibleProps to internal package

* Add touchableContainerAccessibilityProps

* added changesets

Author: JDMathew

.changeset/fifty-rice-lick.md

@@ -0,0 +1,5 @@
+---
+'@react-native-ama/internal': patch
+---
+
+Added `PickAccessibleProps` type helper to AMA internal package

.changeset/six-goats-retire.md

@@ -0,0 +1,5 @@
+---
+'@react-native-ama/core': patch
+---
+
+Added `touchableContainerAccessibilityProps` prop to `AutofocusContainer` to fix issue with accessible view on container

packages/core/src/components/AutofocusContainer.tsx

@@ -1,20 +1,37 @@
 import * as React from 'react';
-import { TouchableWithoutFeedback, View, ViewProps } from 'react-native';
+import {
+  TouchableWithoutFeedback,
+  TouchableWithoutFeedbackProps,
+  View,
+  ViewProps,
+} from 'react-native';
 
 import { useFocus } from '../hooks/useFocus';
+import { PickAccessibleProps } from '@react-native-ama/internal';
 
-type AutofocusContainerProps = React.PropsWithChildren<
-  | ({
-      wrapChildrenInAccessibleView?: true;
-    } & ViewProps)
-  | {
-      wrapChildrenInAccessibleView: false;
-    }
+type TouchableAccessibleProps =
+  PickAccessibleProps<TouchableWithoutFeedbackProps>;
+
+export type AutofocusContainerProps = React.PropsWithChildren<
+  (
+    | ({
+        wrapChildrenInAccessibleView?: true;
+      } & ViewProps)
+    | {
+        wrapChildrenInAccessibleView: false;
+      }
+  ) & {
+    /**
+     * touchableContainerAccessibilityProps is provided as a workaround for any accessibility props that need to be passed to the TouchableWithoutFeedback component which are not recognized on the accessible view.
+     */
+    touchableContainerAccessibilityProps?: TouchableAccessibleProps;
+  }
 >;
 
 export const AutofocusContainer = ({
   children,
   wrapChildrenInAccessibleView = true,
+  touchableContainerAccessibilityProps,
   ...viewProps
 }: AutofocusContainerProps) => {
   const containerRef = React.useRef(null);
@@ -27,7 +44,9 @@ export const AutofocusContainer = ({
   }, [setFocus]);
 
   return wrapChildrenInAccessibleView ? (
-    <TouchableWithoutFeedback ref={containerRef}>
+    <TouchableWithoutFeedback
+      ref={containerRef}
+      {...touchableContainerAccessibilityProps}>
       <View
         accessible={true}
         testID="autofocusContainer.accessibleView"
@@ -36,7 +55,9 @@ export const AutofocusContainer = ({
       </View>
     </TouchableWithoutFeedback>
   ) : (
-    <TouchableWithoutFeedback ref={containerRef}>
+    <TouchableWithoutFeedback
+      ref={containerRef}
+      {...touchableContainerAccessibilityProps}>
       {children}
     </TouchableWithoutFeedback>
   );

packages/internal/src/index.ts

@@ -62,4 +62,8 @@ export {
 export { IS_ANDROID, IS_IOS } from './utils/platformHelpers';
 
 // Types
-export { type AMAAccessibilityState, type AccessibilityRoles } from './types';
+export {
+  type AMAAccessibilityState,
+  type AccessibilityRoles,
+  type PickAccessibleProps,
+} from './types';

packages/internal/src/types.ts

@@ -1,8 +1,17 @@
-/* istanbul ignore file */
 import type { AccessibilityState } from 'react-native';
 
 export type AMAAccessibilityState = Pick<AccessibilityState, 'busy'>;
 
+export type PickAccessibleProps<T> = {
+  [K in keyof T as K extends
+    | `${string}accessible${string}`
+    | `${string}accessibility${string}`
+    | `${string}Accessible${string}`
+    | `${string}Accessibility${string}`
+    ? K
+    : never]: T[K];
+};
+
 export type AccessibilityRoles =
   | {
       accessibilityRole: