@applicaster/zapp-react-native-ui-components 12.0.25-rc.0 → 12.0.26-alpha.1009510827

package/Components/Cell/Cell.tsx

@@ -14,10 +14,7 @@ import { BaseFocusable } from "../BaseFocusable";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
-  item: {
-    id: string;
-    title: string;
-  };
+  item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
   shouldScrollVertically: (...args: any) => boolean | null | undefined;
@@ -83,7 +80,9 @@ const touchableStyles = {
 } as const;
 
 export class CellComponent extends React.Component<Props, State> {
-  constructor(props) {
+  accessibilityManager: AccessibilityManager;
+
+  constructor(props: Props) {
     super(props);
     this.onPress = this.onPress.bind(this);
     this.onFocus = this.onFocus.bind(this);
@@ -94,11 +93,15 @@ export class CellComponent extends React.Component<Props, State> {
     this.scrollToIndex = this.scrollToIndex.bind(this);
 
     this.state = {
-      hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
+      hasFocusableInside: props.CellRenderer.hasFocusableInside?.(
+        props.item as Record<string, any>
+      ),
     };
+
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
-  setScreenLayout(componentAnchorPointY, screenLayout) {
+  setScreenLayout(componentAnchorPointY: number, screenLayout: any) {
     if (componentAnchorPointY && screenLayout) {
       const updateLayout =
         componentAnchorPointY !== screenLayout?.componentAnchorPointY;
@@ -200,7 +203,7 @@ export class CellComponent extends React.Component<Props, State> {
     if (prevProps.item !== this.props.item) {
       this.setState({
         hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
-          this.props.item
+          this.props.item as Record<string, any>
         ),
       });
     }
@@ -270,20 +273,21 @@ export class CellComponent extends React.Component<Props, State> {
           style={baseCellStyles}
           isFocusable={isFocusable}
           skipFocusManagerRegistration={skipFocusManagerRegistration}
+          {...this.accessibilityManager.getButtonAccessibilityProps(
+            item?.extensions?.accessibility?.label || item?.title
+          )}
         >
           {(focused, event) => {
             const isFocused = this.isCellFocused(focused);
 
             if (isFocused) {
-              const accessibilityManager = AccessibilityManager.getInstance();
-
               const accessibilityTitle =
                 item?.extensions?.accessibility?.label || item?.title || "";
 
               const accessibilityHint =
                 item?.extensions?.accessibility?.hint || "";
 
-              accessibilityManager.readText({
+              this.accessibilityManager.readText({
                 text: `${accessibilityTitle} ${accessibilityHint}`,
               });
             }

package/Components/Focusable/Focusable.tsx

@@ -121,7 +121,7 @@ class Focusable extends BaseFocusable<Props> {
   }
 
   render() {
-    const { children, style } = this.props;
+    const { children, style, ...otherProps } = this.props;
     const { focused } = this.state;
 
     const id = this.getId();
@@ -139,6 +139,7 @@ class Focusable extends BaseFocusable<Props> {
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
         style={style}
+        {...otherProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/TextInputTv/index.tsx

@@ -4,6 +4,7 @@ import { Appearance, Platform, StyleSheet, TextInput } from "react-native";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = Partial<{
   style: any;
@@ -42,6 +43,8 @@ function TextInputTV(props: Props, ref) {
   const [colorScheme, setColorScheme] = useState(getInitialColorScheme());
   const isRTL = useIsRTL();
 
+  const accessibilityManager = useAccessibilityManager({});
+
   const onColorChange = useCallback(
     ({ colorScheme: color }) => {
       if (color !== colorScheme) {
@@ -153,6 +156,13 @@ function TextInputTV(props: Props, ref) {
       ])
     )(props);
 
+  const getAccessibilityProps = () => {
+    return {
+      accessibilityProps:
+        accessibilityManager.getInputAccessibilityProps("Search"),
+    };
+  };
+
   const inputProps = {
     ...getProps(),
     ...getStyle(),
@@ -161,6 +171,7 @@ function TextInputTV(props: Props, ref) {
     ...getSecureTextEntry(),
     ...getOnEndEditing(),
     ...getOnPress(),
+    ...getAccessibilityProps(),
   };
 
   if (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.25-rc.0",
+  "version": "12.0.26-alpha.1009510827",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.25-rc.0",
-    "@applicaster/zapp-react-native-bridge": "12.0.25-rc.0",
-    "@applicaster/zapp-react-native-redux": "12.0.25-rc.0",
-    "@applicaster/zapp-react-native-utils": "12.0.25-rc.0",
+    "@applicaster/applicaster-types": "12.0.26-alpha.1009510827",
+    "@applicaster/zapp-react-native-bridge": "12.0.26-alpha.1009510827",
+    "@applicaster/zapp-react-native-redux": "12.0.26-alpha.1009510827",
+    "@applicaster/zapp-react-native-utils": "12.0.26-alpha.1009510827",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",