@applicaster/zapp-react-native-ui-components 15.0.0-alpha.7877002324 → 15.0.0-alpha.8526950782

package/Components/Cell/Cell.tsx

@@ -208,14 +208,14 @@ export class CellComponent extends React.Component<Props, State> {
       this.accessibilityManager.readText({
         text: " ",
       });
-    } else if (this.state.cellFocused) {
+    } else {
       this.accessibilityManager.readText({
         text: `${positionLabel}`,
       });
     }
   }
 
-  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>) {
+  componentDidUpdate(prevProps: Readonly<Props>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
         hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
@@ -224,12 +224,7 @@ export class CellComponent extends React.Component<Props, State> {
       });
     }
 
-    if (
-      prevState.cellFocused !== this.state.cellFocused ||
-      this.state.hasFocusableInside
-    ) {
-      this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
-    }
+    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
   }
 
   render() {

package/Components/MasterCell/DefaultComponents/BorderContainerView/__tests__/index.test.tsx

@@ -1,8 +1,8 @@
-import * as React from "react";
 import {
   BorderContainerView,
   getBorderPadding, // Export for testing (using a double underscore prefix is a common convention)
 } from "../index";
+import * as React from "react";
 import { render } from "@testing-library/react-native";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { View } from "react-native";
@@ -11,15 +11,6 @@ jest.mock("@applicaster/zapp-react-native-utils/numberUtils", () => ({
   toNumberWithDefaultZero: jest.fn((value) => Number(value) || 0),
 }));
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks",
-  () => ({
-    useAccessibilityManager: jest.fn(() => ({
-      addHeading: jest.fn(),
-    })),
-  })
-);
-
 describe("BorderContainerView", () => {
   describe("getBorderPadding", () => {
     it("returns 0 for inside", () => {
@@ -51,8 +42,6 @@ describe("BorderContainerView", () => {
     };
 
     const borderPosition = null;
-    const mockEntry = { id: "test-entry" } as ZappEntry;
-    const mockHasFocusableInside = jest.fn(() => false);
 
     const { queryByTestId } = render(
       <BorderContainerView
@@ -63,10 +52,6 @@ describe("BorderContainerView", () => {
         borderPaddingRight={toNumberWithDefaultZero(padding.paddingRight)}
         borderPaddingBottom={toNumberWithDefaultZero(padding.paddingBottom)}
         borderPaddingLeft={toNumberWithDefaultZero(padding.paddingLeft)}
-        hasFocusableInside={mockHasFocusableInside}
-        entry={mockEntry}
-        state="focused"
-        hasTextLabels={false}
       >
         <View testID="child" />
       </BorderContainerView>

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

@@ -1,16 +1,10 @@
-import React, { useMemo, useContext, useEffect } from "react";
-import { ImageStyle, StyleSheet, View, ViewStyle } from "react-native";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-import { MeasurementPortalContext } from "../../../MeasurmentsPortal/MeasurementsPortal";
+import * as React from "react";
+import { ImageStyle, StyleSheet, View, ViewStyle } from "react-native";
 
 type BorderPosition = "inside" | "outside" | "center";
 
 interface Props {
-  hasFocusableInside: (entry: ZappEntry) => boolean;
-  entry: ZappEntry;
-  state: CellState;
-  hasTextLabels: boolean;
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
   borderPaddingTop: number;
@@ -124,30 +118,8 @@ export const BorderContainerView = (props: Props) => {
     borderPaddingLeft,
     style,
     children,
-    hasFocusableInside,
-    entry,
-    state,
-    hasTextLabels,
   } = props;
 
-  const accessibilityManager = useAccessibilityManager();
-  const isMeasurement = useContext(MeasurementPortalContext);
-
-  const isImageOnlyCell = useMemo(
-    () =>
-      !hasFocusableInside(entry) &&
-      !hasTextLabels &&
-      state === "focused" &&
-      !isMeasurement,
-    [hasFocusableInside, entry, hasTextLabels, state, isMeasurement]
-  );
-
-  useEffect(() => {
-    if (isImageOnlyCell && entry?.title) {
-      accessibilityManager.addHeading(String(entry.title));
-    }
-  }, [isImageOnlyCell, entry?.title]);
-
   const padding =
     borderPosition === "outside"
       ? {

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

@@ -52,14 +52,14 @@ const _Text = ({
     : textTransform(transformText, _label);
 
   React.useLayoutEffect(() => {
-    if (cellFocused) {
-      switch (otherProps.state) {
-        case "focused":
-          accessibilityManager.addHeading(textLabel);
-          break;
-        case "focused_selected":
-          accessibilityManager.addHeading(`${textLabel}, Selected`);
-          break;
+    // 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]);

package/Components/MasterCell/index.tsx

@@ -103,8 +103,6 @@ export function masterCellBuilder({
         wrapperRef,
         cellUUID,
         skipButtons,
-        hasFocusableInside,
-        entry: item,
       })
     );
 

package/Components/Tabs/TV/Tabs.tsx

@@ -8,7 +8,6 @@ import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 import { Gutter } from "../Gutter";
 import Tab from "./Tab";
 import { getStyles } from "./styles";
@@ -29,14 +28,11 @@ const TabsComponent = ({
   style,
   selectedEntryIndex,
   setSelectedEntry,
-  accessibility,
 }: TabsProps & Partial<TabsSelectionContextType>) => {
   const configuration = useConfiguration();
   const config = applyFontConfig(configuration);
   const styles = useMemo(() => getStyles(config), [config]);
 
-  const accessibilityManager = useAccessibilityManager({});
-
   const {
     tab_bar_gutter: horizontalGutter,
     tab_bar_background_image: bgImage,
@@ -64,20 +60,10 @@ const TabsComponent = ({
   );
 
   const onListElementFocus = useCallback(
-    (index, isSelected: boolean, item: ZappEntry) => {
-      if (isSelected) {
-        accessibilityManager.readText({
-          text: `${accessibility?.selectedHint} ${item.title}`,
-        });
-      } else {
-        accessibilityManager.readText({
-          text: `${accessibility?.hint} ${item.title}`,
-        });
-      }
-
+    (index) => {
       scrollToSelectedIndex(index, VIEW_POSITION);
     },
-    [scrollToSelectedIndex, accessibility]
+    [scrollToSelectedIndex]
   );
 
   const renderItem = useCallback(
@@ -108,7 +94,7 @@ const TabsComponent = ({
           id={itemId}
           testID={itemId}
           preferredFocus={isSelected}
-          onFocus={() => onListElementFocus(index, isSelected, item)}
+          onFocus={() => onListElementFocus(index)}
           onPress={() => setSelectedEntry && setSelectedEntry(item)}
           style={style}
         >
@@ -163,9 +149,6 @@ const TabsComponent = ({
         shouldUsePreferredFocus
         isWithMemory={false}
         nextFocusDown={parentFocus?.nextFocusDown}
-        onFocus={() => {
-          accessibilityManager.addHeading(accessibility?.announcement);
-        }}
       >
         <View style={tabs}>
           <ImageBackground

package/index.d.ts

@@ -228,12 +228,6 @@ declare type TabsSelectionContextType = {
   selectedEntryIndex: number;
 };
 
-declare type TabsAccessibility = {
-  announcement?: string;
-  selectedHint?: string;
-  hint?: string;
-};
-
 declare type TabsProps = {
   entry: ZappEntry[];
   groupId: string;
@@ -241,7 +235,6 @@ declare type TabsProps = {
   focused?: boolean;
   parentFocus?: ParentFocus;
   style?: ReactViewStyle;
-  accessibility?: TabsAccessibility;
 };
 
 declare type TabContentProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.7877002324",
+  "version": "15.0.0-alpha.8526950782",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.7877002324",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.7877002324",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.7877002324",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.7877002324",
+    "@applicaster/applicaster-types": "15.0.0-alpha.8526950782",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.8526950782",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.8526950782",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.8526950782",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"