@applicaster/zapp-react-native-ui-components 15.0.0-alpha.9361645236 → 15.0.0-alpha.9667030680

package/Components/Cell/Cell.tsx

@@ -208,14 +208,14 @@ export class CellComponent extends React.Component<Props, State> {
       this.accessibilityManager.readText({
         text: " ",
       });
-    } else {
+    } else if (this.state.cellFocused) {
       this.accessibilityManager.readText({
         text: `${positionLabel}`,
       });
     }
   }
 
-  componentDidUpdate(prevProps: Readonly<Props>) {
+  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
         hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
@@ -224,7 +224,12 @@ export class CellComponent extends React.Component<Props, State> {
       });
     }
 
-    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
+    if (
+      prevState.cellFocused !== this.state.cellFocused ||
+      this.state.hasFocusableInside
+    ) {
+      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,6 +11,12 @@ 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", () => {
@@ -42,6 +48,8 @@ describe("BorderContainerView", () => {
     };
 
     const borderPosition = null;
+    const mockEntry = { id: "test-entry" } as ZappEntry;
+    const mockHasFocusableInside = jest.fn(() => false);
 
     const { queryByTestId } = render(
       <BorderContainerView
@@ -52,6 +60,10 @@ 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,10 +1,16 @@
-import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
-import * as React from "react";
+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";
 
 type BorderPosition = "inside" | "outside" | "center";
 
 interface Props {
+  hasFocusableInside: (entry: ZappEntry) => boolean;
+  entry: ZappEntry;
+  state: CellState;
+  hasTextLabels: boolean;
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
   borderPaddingTop: number;
@@ -118,8 +124,30 @@ 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(() => {
-    // For FocusableCells with action buttons
-    if (otherProps.state) {
-      if (otherProps.state === "focused" && cellFocused === true) {
-        accessibilityManager.addHeading(textLabel);
-      }
-    } else {
-      if (cellFocused === true) {
-        accessibilityManager.addHeading(textLabel);
+    if (cellFocused) {
+      switch (otherProps.state) {
+        case "focused":
+          accessibilityManager.addHeading(textLabel);
+          break;
+        case "focused_selected":
+          accessibilityManager.addHeading(`${textLabel}, Selected`);
+          break;
       }
     }
   }, [cellFocused, otherProps.state, textLabel]);

package/Components/MasterCell/index.tsx

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

package/Components/Tabs/TV/Tabs.tsx

@@ -8,6 +8,7 @@ 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";
@@ -28,11 +29,14 @@ 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,
@@ -60,10 +64,20 @@ const TabsComponent = ({
   );
 
   const onListElementFocus = useCallback(
-    (index) => {
+    (index, isSelected: boolean, item: ZappEntry) => {
+      if (isSelected) {
+        accessibilityManager.readText({
+          text: `${accessibility?.selectedHint} ${item.title}`,
+        });
+      } else {
+        accessibilityManager.readText({
+          text: `${accessibility?.hint} ${item.title}`,
+        });
+      }
+
       scrollToSelectedIndex(index, VIEW_POSITION);
     },
-    [scrollToSelectedIndex]
+    [scrollToSelectedIndex, accessibility]
   );
 
   const renderItem = useCallback(
@@ -94,7 +108,7 @@ const TabsComponent = ({
           id={itemId}
           testID={itemId}
           preferredFocus={isSelected}
-          onFocus={() => onListElementFocus(index)}
+          onFocus={() => onListElementFocus(index, isSelected, item)}
           onPress={() => setSelectedEntry && setSelectedEntry(item)}
           style={style}
         >
@@ -149,6 +163,9 @@ const TabsComponent = ({
         shouldUsePreferredFocus
         isWithMemory={false}
         nextFocusDown={parentFocus?.nextFocusDown}
+        onFocus={() => {
+          accessibilityManager.addHeading(accessibility?.announcement);
+        }}
       >
         <View style={tabs}>
           <ImageBackground

package/Components/VideoModal/PlayerWrapper.tsx

@@ -1,23 +1,11 @@
 import * as React from "react";
-import { StyleSheet, View, ViewStyle } from "react-native";
-import {
-  Edge,
-  SafeAreaView,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
+import { View, ViewStyle } from "react-native";
+import { Edge, SafeAreaView } from "react-native-safe-area-context";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { playerDimensionsHack } from "./utils";
-import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
-import {
-  DimensionsT,
-  Configuration,
-  getEdges,
-  getBaseDimensions,
-  calculateAspectRatio,
-  getPlayerDimensions,
-  getContainerDimensions,
-} from "./playerWrapperUtils";
+import { DimensionsT, Configuration, getEdges } from "./playerWrapperUtils";
+import { defaultStyles, useStyle } from "./playerWrapperStyle";
 
 type Props = {
   entry: ZappEntry;
@@ -34,10 +22,6 @@ type Props = {
   playerContent: (styles: ViewStyle) => React.ReactNode;
 };
 
-const defaultStyles = StyleSheet.create({
-  playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
-});
-
 const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
@@ -51,51 +35,21 @@ const PlayerWrapperComponent = (props: Props) => {
     playerContent,
   } = props;
 
+  const styles = useStyle({
+    style,
+    inline,
+    isModal,
+    isTabletPortrait,
+    configuration,
+    pip,
+  });
+
   const isTablet = useIsTablet();
 
   const isInlineModal = inline && isModal;
 
-  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
-
-  const tabletWidth = getTabletWidth(
-    configuration.tablet_landscape_sidebar_width,
-    style
-  );
-
-  const baseDimensions: DimensionsT = React.useMemo(
-    () => getBaseDimensions(isInlineModal, isTabletLandscape, tabletWidth),
-    [isInlineModal, isTabletLandscape, tabletWidth]
-  );
-
-  const insets = useSafeAreaInsets();
-
-  const aspectRatio = React.useMemo(
-    () => calculateAspectRatio(isInlineModal, pip, insets),
-    // ignoring insets - only initial needed
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isInlineModal, pip]
-  );
-
-  const playerDimensions = React.useMemo(
-    () => getPlayerDimensions(baseDimensions, aspectRatio),
-    [baseDimensions, aspectRatio]
-  );
-
-  const containerDimensions: DimensionsT = React.useMemo(
-    () => getContainerDimensions(baseDimensions, playerDimensions.aspectRatio),
-    [baseDimensions, playerDimensions.aspectRatio]
-  );
-
   const WrapperView = React.useMemo(() => (isTV() ? View : SafeAreaView), []);
 
-  const childrenStyles = React.useMemo(
-    () => ({
-      ...playerDimensions,
-      ...playerDimensionsHack,
-    }),
-    [playerDimensions]
-  );
-
   return (
     <WrapperView
       edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
@@ -106,11 +60,11 @@ const PlayerWrapperComponent = (props: Props) => {
         style={[
           defaultStyles.playerContainer,
           playerDimensionsHack,
-          containerDimensions,
+          styles.containerDimensions,
           containerStyle,
         ]}
       >
-        {playerContent(childrenStyles)}
+        {playerContent(styles.childrenStyles)}
       </View>
     </WrapperView>
   );

package/Components/VideoModal/hooks/useModalSize.ts

@@ -33,8 +33,12 @@ const MODAL_SIZE_FOR_LANDSCAPE: Size = {
   height: "100%",
 };
 
+const SAFE_AREA_BREAKING_API_VERSION = 35;
+
 const isOldAndroidDevice =
-  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
+  isAndroidPlatform() &&
+  !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION) &&
+  !isAndroidTablet();
 
 export const useModalSize = (): Size => {
   const frame = useSafeAreaFrame();

package/Components/VideoModal/playerWrapperStyle.ts

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { StyleSheet, ViewStyle } from "react-native";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { playerDimensionsHack } from "./utils";
+import { getTabletWidth } from "@applicaster/zapp-react-native-utils/playerUtils";
+import {
+  getBaseDimensions,
+  calculateAspectRatio,
+  getPlayerDimensions,
+  getContainerDimensions,
+} from "./playerWrapperUtils";
+
+export const defaultStyles = StyleSheet.create({
+  playerContainer: { position: "relative", alignSelf: "center", zIndex: 200 },
+});
+
+export const useStyle = ({
+  style,
+  inline,
+  isModal,
+  isTabletPortrait,
+  configuration,
+  pip,
+}) => {
+  const isTablet = useIsTablet();
+
+  const isInlineModal = inline && isModal;
+
+  const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
+
+  const tabletWidth = getTabletWidth(
+    configuration.tablet_landscape_sidebar_width,
+    style
+  );
+
+  const baseDimensions: ViewStyle = React.useMemo(
+    () => getBaseDimensions(isInlineModal, isTabletLandscape, tabletWidth),
+    [isInlineModal, isTabletLandscape, tabletWidth]
+  );
+
+  const aspectRatio = React.useMemo(
+    () => calculateAspectRatio(isInlineModal, pip),
+    // ignoring insets - only initial needed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isInlineModal, pip]
+  );
+
+  return React.useMemo(() => {
+    const playerDimensions: ViewStyle = getPlayerDimensions(
+      baseDimensions,
+      aspectRatio
+    );
+
+    const containerDimensions: ViewStyle = getContainerDimensions(
+      baseDimensions,
+      aspectRatio
+    );
+
+    const childrenStyles = {
+      ...playerDimensions,
+      ...playerDimensionsHack,
+    };
+
+    return StyleSheet.create({
+      containerDimensions,
+      childrenStyles,
+    });
+  }, [baseDimensions, aspectRatio]);
+};

package/Components/VideoModal/playerWrapperUtils.ts

@@ -1,16 +1,6 @@
-import { Dimensions, Platform } from "react-native";
+import { Dimensions, DimensionValue, Platform, ViewStyle } from "react-native";
 import { Edge } from "react-native-safe-area-context";
 
-import {
-  isAndroidPlatform,
-  isAndroidVersionAtLeast,
-} from "@applicaster/zapp-react-native-utils/reactUtils";
-
-const MIN_SUPPORTED_ANDROID_API = 34;
-
-export const isOldAndroidDevice =
-  isAndroidPlatform() && !isAndroidVersionAtLeast(MIN_SUPPORTED_ANDROID_API);
-
 export type DimensionsT = {
   width: number | string;
   height: number | string | undefined;
@@ -23,6 +13,10 @@ export type Configuration = {
   tablet_landscape_player_container_background_color?: string;
 };
 
+// This is safe, remembering screen dimensions once as they do not change during runtime
+// TODO: consider sharing screen orientation as a shared function for the app
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
+
 export const getWindowDimensions = () => {
   const { width, height } = Dimensions.get("window");
 
@@ -41,15 +35,11 @@ export const getMinWindowDimension = () => {
   return Math.min(width, height);
 };
 
-export const getScreenAspectRatio = (insets?: {
-  top: number;
-  bottom: number;
-}) => {
-  const longEdge = getMaxWindowDimension();
-  const shortEdge = getMinWindowDimension();
+export const getScreenAspectRatio = () => {
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
 
-  // subtract insets to get correct aspect ratio on devices with notches
-  return longEdge / (shortEdge - ((insets?.top ?? 0) + (insets?.bottom ?? 0)));
+  return longEdge / shortEdge;
 };
 
 export const getEdges = (
@@ -70,35 +60,32 @@ export const getEdges = (
 export const getBaseDimensions = (
   isInlineModal: boolean,
   isTabletLandscape: boolean,
-  tabletWidth: number | string
-): DimensionsT => ({
+  tabletWidth: DimensionValue
+): ViewStyle => ({
   width: isInlineModal && isTabletLandscape ? tabletWidth : "100%",
   height: undefined,
 });
 
 export const calculateAspectRatio = (
   isInlineModal: boolean,
-  pip?: boolean,
-  insets?: { top: number; bottom: number }
+  pip?: boolean
 ): number => {
-  return !isInlineModal && !pip
-    ? getScreenAspectRatio(isOldAndroidDevice ? insets : undefined)
-    : 16 / 9;
+  return !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9;
 };
 
 export const getPlayerDimensions = (
-  baseDimensions: DimensionsT,
+  baseDimensions: ViewStyle,
   aspectRatio: number
-): DimensionsT => ({
-  ...baseDimensions,
+): ViewStyle => ({
+  ...(baseDimensions as any),
   width: baseDimensions.width,
   aspectRatio,
 });
 
 export const getContainerDimensions = (
-  baseDimensions: DimensionsT,
-  playerAspectRatio?: number
-): DimensionsT => ({
+  baseDimensions: ViewStyle,
+  aspectRatio?: string | number
+): ViewStyle => ({
   ...baseDimensions,
-  aspectRatio: playerAspectRatio,
+  aspectRatio,
 });

package/index.d.ts

@@ -228,6 +228,12 @@ declare type TabsSelectionContextType = {
   selectedEntryIndex: number;
 };
 
+declare type TabsAccessibility = {
+  announcement?: string;
+  selectedHint?: string;
+  hint?: string;
+};
+
 declare type TabsProps = {
   entry: ZappEntry[];
   groupId: string;
@@ -235,6 +241,7 @@ 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.9361645236",
+  "version": "15.0.0-alpha.9667030680",
   "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.9361645236",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.9361645236",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.9361645236",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.9361645236",
+    "@applicaster/applicaster-types": "15.0.0-alpha.9667030680",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.9667030680",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.9667030680",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.9667030680",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"