@applicaster/zapp-react-native-ui-components 13.0.6-rc.0 → 13.0.7-alpha.2991546311

package/Components/Cell/Cell.tsx

@@ -15,6 +15,7 @@ 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;
@@ -70,6 +71,8 @@ type State = {
 };
 
 export class CellComponent extends React.Component<Props, State> {
+  accessibilityManager: AccessibilityManager;
+
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -79,10 +82,13 @@ 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),
     };
+
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -183,6 +189,24 @@ export class CellComponent extends React.Component<Props, State> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
+  handleAccessibilityFocus(item, index, dataLength) {
+    const accessibilityTitle =
+      item?.extensions?.accessibility?.label || item?.title || "";
+
+    const accessibilityHint = item?.extensions?.accessibility?.hint || "";
+
+    // For loop scrolling, calculate the correct logical index
+    const logicalIndex = dataLength ? index % dataLength : index;
+
+    const positionLabel = dataLength
+      ? `item ${logicalIndex + 1} of ${dataLength}`
+      : "";
+
+    this.accessibilityManager.readText({
+      text: `${accessibilityTitle} ${accessibilityHint} ${positionLabel}`,
+    });
+  }
+
   componentDidUpdate(prevProps: Readonly<Props>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
@@ -197,6 +221,7 @@ export class CellComponent extends React.Component<Props, State> {
     const {
       item,
       index,
+      dataLength,
       component,
       offsetUpdater,
       preferredFocus,
@@ -257,22 +282,15 @@ export class CellComponent extends React.Component<Props, State> {
           style={styles.baseCell}
           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({
-                text: `${accessibilityTitle} ${accessibilityHint}`,
-              });
+              this.handleAccessibilityFocus(item, index, dataLength);
             }
 
             return (

package/Components/Focusable/Focusable.tsx

@@ -5,6 +5,7 @@ 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;
@@ -28,6 +29,7 @@ class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
+  accessibilityManager: AccessibilityManager;
 
   constructor(props) {
     super(props);
@@ -42,6 +44,8 @@ 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();
   }
 
   /**
@@ -128,6 +132,9 @@ class Focusable extends BaseFocusable<Props> {
     const id = this.getId();
     const focusableId = `focusable-${id}`;
 
+    const accessibilityProps =
+      this.accessibilityManager.getWebAccessibilityProps(this.props);
+
     return (
       <div
         id={focusableId}
@@ -140,6 +147,7 @@ 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

@@ -33,6 +33,8 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
     focusedStyles,
     pluginIdentifier,
     preferredFocus,
+    index,
+    buttonsCount,
   } = otherProps;
 
   const focusableId = getFocusableId(prefixId, suffixId);
@@ -96,8 +98,10 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
     });
 
     if (ttsLabel) {
+      accessibilityManager.addHeading(ttsLabel);
+
       accessibilityManager.readText({
-        text: ttsLabel,
+        text: `button ${index + 1} of ${buttonsCount}`,
       });
     }
   };

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/Button.ts

@@ -51,6 +51,8 @@ type Props = {
   pluginIdentifier: string;
   suffixId: string;
   preferredFocus: boolean;
+  index: number;
+  buttonsCount: number;
 };
 
 export const Button = ({
@@ -60,6 +62,8 @@ export const Button = ({
   pluginIdentifier,
   suffixId,
   preferredFocus,
+  index,
+  buttonsCount,
 }: Props) => {
   if (!value(`${suffixId}_button_enabled`)) return null;
 
@@ -128,6 +132,8 @@ export const Button = ({
       },
       pluginIdentifier,
       preferredFocus,
+      index,
+      buttonsCount,
     },
   };
 };

package/Components/MasterCell/DefaultComponents/tv/TvActionButtons/index.ts

@@ -83,6 +83,8 @@ export const TvActionButtons = ({
           pluginIdentifier: getPluginIdentifier(configuration, PREFIX, index),
           suffixId: prefixSpecificButton,
           preferredFocus: index === 0,
+          index,
+          buttonsCount,
         });
       }, buttonsCount)
     ),

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

@@ -2,6 +2,19 @@
 
 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,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": "13.0.6-rc.0",
+  "version": "13.0.7-alpha.2991546311",
   "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.6-rc.0",
-    "@applicaster/zapp-react-native-bridge": "13.0.6-rc.0",
-    "@applicaster/zapp-react-native-redux": "13.0.6-rc.0",
-    "@applicaster/zapp-react-native-utils": "13.0.6-rc.0",
+    "@applicaster/applicaster-types": "13.0.7-alpha.2991546311",
+    "@applicaster/zapp-react-native-bridge": "13.0.7-alpha.2991546311",
+    "@applicaster/zapp-react-native-redux": "13.0.7-alpha.2991546311",
+    "@applicaster/zapp-react-native-utils": "13.0.7-alpha.2991546311",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",