@applicaster/zapp-react-native-ui-components 13.0.10-alpha.9045951059 → 13.0.10-rc.0

package/Components/Cell/Cell.tsx

@@ -8,7 +8,6 @@ import { getItemType } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { CellFocusedStateContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/CellFocusedStateContext";
 
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
@@ -16,7 +15,6 @@ import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUt
 import { styles } from "./styles";
 
 type Props = {
-  dataLength: number;
   item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
@@ -69,12 +67,9 @@ type Props = {
 
 type State = {
   hasFocusableInside: boolean;
-  cellFocused: boolean;
 };
 
 export class CellComponent extends React.Component<Props, State> {
-  accessibilityManager: AccessibilityManager;
-
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -84,14 +79,10 @@ export class CellComponent extends React.Component<Props, State> {
     this.hasReceivedFocus = this.hasReceivedFocus.bind(this);
     this.scrollVertically = this.scrollVertically.bind(this);
     this.scrollToIndex = this.scrollToIndex.bind(this);
-    this.handleAccessibilityFocus = this.handleAccessibilityFocus.bind(this);
 
     this.state = {
       hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
-      cellFocused: false,
     };
-
-    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -139,8 +130,6 @@ export class CellComponent extends React.Component<Props, State> {
     } = this.props;
 
     if (isFocusable) {
-      this.setState({ cellFocused: true });
-
       if (
         shouldUpdate &&
         shouldScrollVertically?.(mouse, focusable, id, title)
@@ -150,9 +139,7 @@ export class CellComponent extends React.Component<Props, State> {
     }
   }
 
-  onBlur() {
-    this.setState({ cellFocused: false });
-  }
+  onBlur() {}
 
   willReceiveFocus() {}
 
@@ -196,25 +183,6 @@ export class CellComponent extends React.Component<Props, State> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
-  handleAccessibilityFocus(index, dataLength) {
-    // For loop scrolling, calculate the correct logical index
-    const logicalIndex = dataLength ? index % dataLength : index;
-
-    const positionLabel = dataLength
-      ? `item ${logicalIndex + 1} of ${dataLength}`
-      : "";
-
-    if (this.state.hasFocusableInside) {
-      this.accessibilityManager.readText({
-        text: " ",
-      });
-    } else {
-      this.accessibilityManager.readText({
-        text: `${positionLabel}`,
-      });
-    }
-  }
-
   componentDidUpdate(prevProps: Readonly<Props>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
@@ -223,8 +191,6 @@ export class CellComponent extends React.Component<Props, State> {
         ),
       });
     }
-
-    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
   }
 
   render() {
@@ -246,6 +212,7 @@ export class CellComponent extends React.Component<Props, State> {
     } = this.props;
 
     const { id } = item;
+
     const focusableId = join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
@@ -256,67 +223,73 @@ export class CellComponent extends React.Component<Props, State> {
 
     if (this.state.hasFocusableInside) {
       return (
-        <CellFocusedStateContextProvider cellFocused={this.state.cellFocused}>
-          <CellWithFocusable
-            CellRenderer={CellRenderer}
-            item={item}
-            id={focusableId}
-            groupId={groupId || component?.id}
-            onFocus={handleFocus}
-            onBlur={onBlur || this.onBlur}
-            index={index}
-            scrollTo={this.scrollToIndex()}
-            isFocusable={isFocusable}
-            skipFocusManagerRegistration={skipFocusManagerRegistration}
-            behavior={behavior}
-          />
-        </CellFocusedStateContextProvider>
+        <CellWithFocusable
+          CellRenderer={CellRenderer}
+          item={item}
+          id={focusableId}
+          groupId={groupId || component?.id}
+          onFocus={handleFocus}
+          index={index}
+          scrollTo={this.scrollToIndex()}
+          isFocusable={isFocusable}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
+          behavior={behavior}
+        />
       );
     }
 
     return (
-      <CellFocusedStateContextProvider cellFocused={this.state.cellFocused}>
-        <View
-          testID={`${component?.id}-${id}`}
-          accessible={false}
-          style={styles.touchableCell}
+      <View
+        testID={`${component?.id}-${id}`}
+        accessible={false}
+        style={styles.touchableCell}
+      >
+        <Focusable
+          id={focusableId}
+          groupId={groupId || component?.id}
+          onFocus={handleFocus}
+          onBlur={onBlur || this.onBlur}
+          onPress={this.onPress}
+          willReceiveFocus={willReceiveFocus || this.willReceiveFocus}
+          hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
+          preferredFocus={preferredFocus}
+          offsetUpdater={offsetUpdater}
+          style={styles.baseCell}
+          isFocusable={isFocusable}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
-          <Focusable
-            id={focusableId}
-            groupId={groupId || component?.id}
-            onFocus={handleFocus}
-            onBlur={onBlur || this.onBlur}
-            onPress={this.onPress}
-            willReceiveFocus={willReceiveFocus || this.willReceiveFocus}
-            hasReceivedFocus={hasReceivedFocus || this.hasReceivedFocus}
-            preferredFocus={preferredFocus}
-            offsetUpdater={offsetUpdater}
-            style={styles.baseCell}
-            isFocusable={isFocusable}
-            skipFocusManagerRegistration={skipFocusManagerRegistration}
-            {...this.accessibilityManager.getButtonAccessibilityProps(
-              item?.extensions?.accessibility?.label || item?.title
-            )}
-          >
-            {(focused, event) => {
-              const isFocused = this.isCellFocused(focused);
-
-              return (
-                <FocusableCell
-                  {...{
-                    index,
-                    CellRenderer,
-                    item,
-                    focused: isFocused,
-                    scrollTo: this.scrollToIndex(event),
-                    behavior,
-                  }}
-                />
-              );
-            }}
-          </Focusable>
-        </View>
-      </CellFocusedStateContextProvider>
+          {(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({
+                text: `${accessibilityTitle} ${accessibilityHint}`,
+              });
+            }
+
+            return (
+              <FocusableCell
+                {...{
+                  index,
+                  CellRenderer,
+                  item,
+                  focused: isFocused,
+                  scrollTo: this.scrollToIndex(event),
+                  behavior,
+                }}
+              />
+            );
+          }}
+        </Focusable>
+      </View>
     );
   }
 }

package/Components/Cell/CellWithFocusable.tsx

@@ -14,7 +14,6 @@ type Props = {
   id: string;
   groupId: string;
   onFocus: Function;
-  onBlur?: Function;
   index: number;
   scrollTo: Function;
   preferredFocus?: boolean;
@@ -34,7 +33,6 @@ export function CellWithFocusable(props: Props) {
     id,
     groupId,
     onFocus,
-    onBlur = noop,
     scrollTo = noop,
     preferredFocus,
     skipFocusManagerRegistration,
@@ -80,7 +78,6 @@ export function CellWithFocusable(props: Props) {
   const onGroupBlur = React.useCallback(() => {
     if (!skipFocusManagerRegistration) {
       setIsFocused(false);
-      onBlur?.();
     }
   }, [skipFocusManagerRegistration]);
 

package/Components/Focusable/Focusable.tsx

@@ -5,7 +5,6 @@ import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
-import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
   initialFocus?: boolean;
@@ -29,7 +28,6 @@ class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
-  accessibilityManager: AccessibilityManager;
 
   constructor(props) {
     super(props);
@@ -44,8 +42,6 @@ class Focusable extends BaseFocusable<Props> {
     this.resetLongPressTimeout = this.resetLongPressTimeout.bind(this);
     this.longPress = this.longPress.bind(this);
     this.press = this.press.bind(this);
-
-    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   /**
@@ -132,9 +128,6 @@ class Focusable extends BaseFocusable<Props> {
     const id = this.getId();
     const focusableId = `focusable-${id}`;
 
-    const accessibilityProps =
-      this.accessibilityManager.getWebAccessibilityProps(this.props);
-
     return (
       <div
         id={focusableId}
@@ -147,7 +140,6 @@ class Focusable extends BaseFocusable<Props> {
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
         style={style}
-        {...accessibilityProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/MasterCell/DefaultComponents/FocusableView/index.tsx

@@ -5,6 +5,7 @@ import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/acti
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 const { Logger } = getXray();
 
@@ -44,6 +45,11 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const actionContext = useActions(pluginIdentifier);
 
+  const accessibilityManager = useAccessibilityManager({});
+
+  const { ttsLabel = "" } =
+    actionContext?.initialEntryState(item)?.getAccessibility?.(item) || {};
+
   const onPress = (event) => {
     event?.preventDefault?.();
 
@@ -88,6 +94,12 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
         mouse: focusable.mouse,
       });
     });
+
+    if (ttsLabel) {
+      accessibilityManager.readText({
+        text: ttsLabel,
+      });
+    }
   };
 
   const handleBlur = (_focusable, _direction) => {

package/Components/MasterCell/DefaultComponents/Text/index.tsx

@@ -11,8 +11,6 @@ import { withScaledLineHeight } from "./utils";
 import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { CellFocusedStateContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellFocusedStateContext";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = {
   style: any;
@@ -37,9 +35,10 @@ const _Text = ({
 }: Props) => {
   const _label = useTextLabel({ label, entry });
   const isMeasurement = React.useContext(MeasurementPortalContext);
-  const cellFocused = React.useContext(CellFocusedStateContext);
 
-  const accessibilityManager = useAccessibilityManager({});
+  if (isNilOrEmpty(_label)) {
+    return null;
+  }
 
   // set maximum possible height for the text in case of measurement
   const height =
@@ -47,27 +46,6 @@ const _Text = ({
       ? toNumber(otherProps.numberOfLines) * toNumber(style.lineHeight)
       : undefined;
 
-  const textLabel = dateTransformEnabled
-    ? dateFormat(dateTransform, label)
-    : textTransform(transformText, _label);
-
-  React.useLayoutEffect(() => {
-    // For FocusableCells with action buttons
-    if (otherProps.state) {
-      if (otherProps.state === "focused" && cellFocused === true) {
-        accessibilityManager.addHeading(textLabel);
-      }
-    } else {
-      if (cellFocused === true) {
-        accessibilityManager.addHeading(textLabel);
-      }
-    }
-  }, [cellFocused, otherProps.state, textLabel]);
-
-  if (isNilOrEmpty(_label)) {
-    return null;
-  }
-
   return (
     <Text
       style={[
@@ -76,7 +54,9 @@ const _Text = ({
       ]}
       {...withoutLabel(otherProps)}
     >
-      {textLabel}
+      {dateTransformEnabled
+        ? dateFormat(dateTransform, label)
+        : textTransform(transformText, _label)}
     </Text>
   );
 };

package/Components/TextInputTv/__tests__/__snapshots__/TextInputTv.test.js.snap

@@ -2,19 +2,6 @@
 
 exports[`<TextInputTv /> renders 1`] = `
 <input
-  accessibilityProps={
-    {
-      "accessibilityHint": "Enter text into Search",
-      "accessibilityLabel": "Search",
-      "accessibilityRole": "text",
-      "accessible": true,
-      "aria-description": "Enter text into Search",
-      "aria-label": "Search",
-      "aria-role": "text",
-      "role": "text",
-      "tabindex": 0,
-    }
-  }
   testID="TextInput-tv"
 />
 `;

package/Components/TextInputTv/index.tsx

@@ -4,7 +4,6 @@ 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;
@@ -43,8 +42,6 @@ function TextInputTV(props: Props, ref) {
   const [colorScheme, setColorScheme] = useState(getInitialColorScheme());
   const isRTL = useIsRTL();
 
-  const accessibilityManager = useAccessibilityManager({});
-
   const onColorChange = useCallback(
     ({ colorScheme: color }) => {
       if (color !== colorScheme) {
@@ -156,13 +153,6 @@ function TextInputTV(props: Props, ref) {
       ])
     )(props);
 
-  const getAccessibilityProps = () => {
-    return {
-      accessibilityProps:
-        accessibilityManager.getInputAccessibilityProps("Search"),
-    };
-  };
-
   const inputProps = {
     ...getProps(),
     ...getStyle(),
@@ -171,7 +161,6 @@ 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": "13.0.10-alpha.9045951059",
+  "version": "13.0.10-rc.0",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.10-alpha.9045951059",
-    "@applicaster/zapp-react-native-bridge": "13.0.10-alpha.9045951059",
-    "@applicaster/zapp-react-native-redux": "13.0.10-alpha.9045951059",
-    "@applicaster/zapp-react-native-utils": "13.0.10-alpha.9045951059",
+    "@applicaster/applicaster-types": "13.0.10-rc.0",
+    "@applicaster/zapp-react-native-bridge": "13.0.10-rc.0",
+    "@applicaster/zapp-react-native-redux": "13.0.10-rc.0",
+    "@applicaster/zapp-react-native-utils": "13.0.10-rc.0",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",

package/Contexts/CellFocusedStateContext/index.tsx

@@ -1,27 +0,0 @@
-import React, { ReactNode } from "react";
-
-export const CellFocusedStateContext = React.createContext<boolean>(false);
-
-export const CellFocusedStateContextProvider = ({
-  cellFocused,
-  children,
-}: {
-  cellFocused: boolean;
-  children: ReactNode;
-}) => {
-  return (
-    <CellFocusedStateContext.Provider value={cellFocused}>
-      {children}
-    </CellFocusedStateContext.Provider>
-  );
-};
-
-export function withCellFocusedStateContext(
-  Component: React.ComponentType<any>
-) {
-  return function WithCellFocusedStateContextWrapper(props) {
-    const cellFocusedState = React.useContext(CellFocusedStateContext);
-
-    return <Component {...props} cellFocusedState={cellFocusedState} />;
-  };
-}