@applicaster/zapp-react-native-utils 14.0.0-alpha.4385101226 → 14.0.0-alpha.4520122433

package/appUtils/accessibilityManager/const.ts

@@ -65,4 +65,17 @@ export const BUTTON_ACCESSIBILITY_KEYS = {
     label: "accessibility_menu_item_label",
     hint: "accessibility_menu_item_hint",
   },
+  skip_intro: {
+    label: "accessibility_skip_intro_label",
+    hint: "accessibility_skip_intro_hint",
+  },
+  // Top Menu Bar-specific buttons
+  top_menu_bar_item_selected: {
+    label: "accessibility_top_menu_bar_item_selected_label",
+    hint: "accessibility_top_menu_bar_item_selected_hint",
+  },
+  top_menu_title: {
+    label: "accessibility_top_menu_title_label",
+    hint: "accessibility_top_menu_hint",
+  },
 } as const;

package/appUtils/accessibilityManager/hooks.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { AccessibilityManager } from "./index";
 
 /**
@@ -38,3 +38,37 @@ export const useAccessibilityManager = (
 
   return accessibilityManager;
 };
+
+export const useInitialAnnouncementReady = (
+  accessibilityManager: AccessibilityManager
+) => {
+  const [isReady, setIsReady] = useState(
+    accessibilityManager.isInitialPlayerAnnouncementReady
+  );
+
+  useEffect(() => {
+    const subscription = accessibilityManager
+      .getInitialAnnouncementReadyObservable()
+      .subscribe(setIsReady);
+
+    return () => subscription.unsubscribe();
+  }, [accessibilityManager]);
+
+  return isReady;
+};
+
+export const useAnnouncementActive = (
+  accessibilityManager: AccessibilityManager
+) => {
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    const subscription = accessibilityManager
+      .getTTSStateObservable()
+      .subscribe(setIsActive);
+
+    return () => subscription.unsubscribe();
+  }, [accessibilityManager]);
+
+  return isActive;
+};

package/appUtils/accessibilityManager/index.ts

@@ -1,15 +1,19 @@
+import * as R from "ramda";
 import { BehaviorSubject } from "rxjs";
 import { accessibilityManagerLogger as logger } from "./logger";
 import { TTSManager } from "../platform";
 import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
 import { toString } from "../../utils";
+import { calculateReadingTime } from "./utils";
 import { AccessibilityRole } from "react-native";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
   private headingTimeout: NodeJS.Timeout | null = null;
-  private WORDS_PER_MINUTE = 160;
+  private announcementDelayTimeout: NodeJS.Timeout | null = null;
+  private WORDS_PER_MINUTE = 140;
   private MINIMUM_PAUSE = 500;
+  private ANNOUNCEMENT_DELAY = 700;
   private state$ = new BehaviorSubject<AccessibilityState>({
     screenReaderEnabled: false,
     reduceMotionEnabled: false,
@@ -25,6 +29,12 @@ export class AccessibilityManager {
   private ttsManager = TTSManager.getInstance();
   private localizations: { [key: string]: string } = {};
   private headingQueue: string[] = [];
+  private currentFocusId: string | null = null;
+  private headingFocusMap: Map<string, string> = new Map();
+  private pendingFocusId: string | null = null;
+  private isInitialPlayerAnnouncementReady$ = new BehaviorSubject<boolean>(
+    false
+  );
 
   private constructor() {}
 
@@ -36,6 +46,26 @@ export class AccessibilityManager {
     return AccessibilityManager._instance;
   }
 
+  public get isInitialPlayerAnnouncementReady(): boolean {
+    return this.isInitialPlayerAnnouncementReady$.getValue();
+  }
+
+  public setInitialPlayerAnnouncementReady(): void {
+    this.isInitialPlayerAnnouncementReady$.next(true);
+  }
+
+  public resetInitialPlayerAnnouncementReady(): void {
+    this.isInitialPlayerAnnouncementReady$.next(false);
+  }
+
+  public getInitialAnnouncementReadyObservable() {
+    return this.isInitialPlayerAnnouncementReady$.asObservable();
+  }
+
+  public getTTSStateObservable() {
+    return this.ttsManager.getStateAsObservable();
+  }
+
   /**
    * The method now accepts any object with localizations using a flattened structure
    *
@@ -46,7 +76,9 @@ export class AccessibilityManager {
    * i.e. localizations: [{ en: { accessibility_close_label: "Close", accessibility_close_hint: "Press here to close" } }]
    */
   public updateLocalizations(localizations: { [key: string]: string }) {
-    this.localizations = localizations;
+    if (!R.isEmpty(localizations)) {
+      this.localizations = localizations;
+    }
   }
 
   public getState(): AccessibilityState {
@@ -57,31 +89,25 @@ export class AccessibilityManager {
     return this.state$.asObservable();
   }
 
-  /** Calculates the reading time for a given text
-   * This method is a bit of a hack because we don't have a callback, or promise from VIZIO API
-   * @param text - The text to calculate the reading time for
-   * @returns The reading time in milliseconds
-   */
-  private calculateReadingTime(text: string): number {
-    const words = text.trim().split(/\s+/).length;
-
-    return Math.max(
-      this.MINIMUM_PAUSE,
-      (words / this.WORDS_PER_MINUTE) * 60 * 1000
-    );
-  }
-
   /**
    * Adds a heading to the queue, headings will be read before the next text
    * Each heading will be read once and removed from the queue
    */
   public addHeading(heading: string) {
+    if (!this.pendingFocusId) {
+      this.pendingFocusId = Date.now().toString();
+    }
+
+    this.headingFocusMap.set(heading, this.pendingFocusId);
     this.headingQueue.push(heading);
   }
 
   /**
    * text you want to be read, if you want to use localized text pass keyOfLocalizedText instead
    * keyOfLocalizedText is the key to the localized text
+   *
+   * Implements a delay mechanism to reduce noise during rapid navigation.
+   * Only the most recent announcement will be read after the delay period.
    */
   public readText({
     text,
@@ -112,19 +138,27 @@ export class AccessibilityManager {
       textToRead = localizedMessage;
     }
 
-    if (this.headingQueue.length > 0) {
-      const heading = this.headingQueue.shift()!;
-      this.ttsManager?.readText(heading);
+    const focusId = this.pendingFocusId || Date.now().toString();
+    this.currentFocusId = focusId;
+    this.pendingFocusId = null;
 
-      if (this.headingTimeout) {
-        clearTimeout(this.headingTimeout);
-      }
+    this.clearAnnouncement();
 
-      const pauseTime = this.calculateReadingTime(heading);
+    this.announcementDelayTimeout = setTimeout(() => {
+      this.executeAnnouncement(textToRead, keyOfLocalizedText, focusId);
+    }, this.ANNOUNCEMENT_DELAY);
+  }
 
-      this.headingTimeout = setTimeout(() => {
-        this.ttsManager?.readText(textToRead);
-      }, pauseTime);
+  /**
+   * Internal method to execute the actual announcement after the delay
+   */
+  private executeAnnouncement(
+    textToRead: string,
+    keyOfLocalizedText?: string,
+    focusId?: string
+  ) {
+    if (this.headingQueue.length > 0) {
+      this.processHeadingQueue(textToRead, focusId);
     } else {
       this.ttsManager?.readText(textToRead);
     }
@@ -136,6 +170,54 @@ export class AccessibilityManager {
     });
   }
 
+  /**
+   * Recursively processes all headings in the queue, reading them one by one
+   */
+  private processHeadingQueue(textToRead: string, focusId?: string) {
+    // If focus has changed, abort this announcement
+    if (focusId && this.currentFocusId !== focusId) {
+      return;
+    }
+
+    if (this.headingQueue.length === 0) {
+      if (focusId && this.currentFocusId === focusId) {
+        this.ttsManager?.readText(textToRead);
+      }
+
+      return;
+    }
+
+    const heading = this.headingQueue.shift()!;
+
+    const headingFocusId = this.headingFocusMap.get(heading);
+
+    if (headingFocusId && headingFocusId !== focusId) {
+      // This heading belongs to a previous focus, skip it
+      this.headingFocusMap.delete(heading);
+      this.processHeadingQueue(textToRead, focusId);
+
+      return;
+    }
+
+    this.ttsManager?.readText(heading);
+    this.headingFocusMap.delete(heading); // Clean up after reading
+
+    if (this.headingTimeout) {
+      clearTimeout(this.headingTimeout);
+    }
+
+    const pauseTime = calculateReadingTime(
+      heading,
+      this.WORDS_PER_MINUTE,
+      this.MINIMUM_PAUSE,
+      this.ANNOUNCEMENT_DELAY
+    );
+
+    this.headingTimeout = setTimeout(() => {
+      this.processHeadingQueue(textToRead, focusId);
+    }, pauseTime);
+  }
+
   public getButtonAccessibilityProps(name: string): AccessibilityProps {
     const buttonName = toString(name);
 
@@ -143,12 +225,15 @@ export class AccessibilityManager {
 
     if (!buttonConfig) {
       return {
+        accessible: true,
         accessibilityLabel: buttonName,
         accessibilityHint: `Press button to perform action on ${buttonName}`,
         "aria-label": buttonName,
         "aria-description": `Press button to perform action on ${buttonName}`,
-        accessibilityRole: "button",
+        accessibilityRole: "button" as AccessibilityRole,
         "aria-role": "button",
+        role: "button",
+        tabindex: 0,
       };
     }
 
@@ -162,23 +247,52 @@ export class AccessibilityManager {
       `Press button to perform action on ${buttonName}`;
 
     return {
+      accessible: true,
       accessibilityLabel: label,
       accessibilityHint: hint,
       "aria-label": label,
       "aria-description": hint,
-      accessibilityRole: "button",
+      accessibilityRole: "button" as AccessibilityRole,
       "aria-role": "button",
+      role: "button",
+      tabindex: 0,
     };
   }
 
   public getInputAccessibilityProps(inputName: string): AccessibilityProps {
     return {
+      accessible: true,
       accessibilityLabel: inputName,
       accessibilityHint: `Enter text into ${inputName}`,
       "aria-label": inputName,
       "aria-description": `Enter text into ${inputName}`,
-      accessibilityRole: "textbox" as AccessibilityRole,
-      "aria-role": "textbox",
+      accessibilityRole: "searchbox" as AccessibilityRole,
+      "aria-role": "searchbox",
+      role: "searchbox",
+      tabindex: 0,
+    };
+  }
+
+  /**
+   * Extracts accessibility props from component props and returns them as HTML attributes
+   * @param props - Component props containing accessibility properties
+   * @returns Object with accessibility HTML attributes
+   */
+  public getWebAccessibilityProps(props: any): AccessibilityProps {
+    const {
+      "aria-label": ariaLabel,
+      "aria-description": ariaDescription,
+      "aria-role": ariaRole,
+      role,
+      tabindex,
+    } = props;
+
+    return {
+      "aria-label": ariaLabel,
+      "aria-description": ariaDescription,
+      "aria-role": ariaRole,
+      role: role || ariaRole,
+      tabindex,
     };
   }
 
@@ -196,4 +310,11 @@ export class AccessibilityManager {
 
     return this.localizations[key];
   }
+
+  private clearAnnouncement() {
+    if (this.announcementDelayTimeout) {
+      clearTimeout(this.announcementDelayTimeout);
+      this.announcementDelayTimeout = null;
+    }
+  }
 }

package/appUtils/accessibilityManager/utils.ts

@@ -0,0 +1,24 @@
+/**
+ * Calculates the reading time for a given text based on word count
+ * @param text - The text to calculate the reading time for
+ * @param wordsPerMinute - Words per minute reading speed (default: 160)
+ * @param minimumPause - Minimum pause time in milliseconds (default: 500)
+ * @param announcementDelay - Additional delay for announcement in milliseconds (default: 700)
+ * @returns The reading time in milliseconds
+ */
+export function calculateReadingTime(
+  text: string,
+  wordsPerMinute: number = 140,
+  minimumPause: number = 500,
+  announcementDelay: number = 700
+): number {
+  const words = text
+    .trim()
+    .split(/(?<=\d)(?=[a-zA-Z])|(?<=[a-zA-Z])(?=\d)|[^\w\s]+|\s+/)
+    .filter(Boolean).length;
+
+  return (
+    Math.max(minimumPause, (words / wordsPerMinute) * 60 * 1000) +
+    announcementDelay
+  );
+}

package/appUtils/contextKeysManager/contextResolver.ts

@@ -1,10 +1,13 @@
 import { ContextKeysManager } from "./index";
 import * as R from "ramda";
+import * as _ from "lodash";
+import { useScreenStateStore } from "../../reactHooks/navigation/useScreenStateStore";
 
-interface IResolver {
+export interface IResolver {
   resolve: (string) => Promise<string | number | object>;
 }
 
+// TODO: Rename to ObjectKeyResolver or similar
 export class EntryResolver implements IResolver {
   entry: ZappEntry;
 
@@ -21,6 +24,28 @@ export class EntryResolver implements IResolver {
   }
 }
 
+// TODO: Move to proper place
+
+export class ScreenStateResolver implements IResolver {
+  constructor(
+    private screenStateStore: ReturnType<typeof useScreenStateStore>
+  ) {}
+
+  async resolve(key: string) {
+    const screenState = this.screenStateStore.getState().data;
+
+    if (!key || key.length === 0) {
+      return screenState;
+    }
+
+    if (key.includes(".")) {
+      return R.view(R.lensPath(key.split(".")), screenState);
+    }
+
+    return screenState?.[key];
+  }
+}
+
 export class ContextResolver implements IResolver {
   resolve = async (compositeKey: string) =>
     ContextKeysManager.instance.getKey(compositeKey);
@@ -64,3 +89,19 @@ export const resolveObjectValues = async (
 
   return Object.fromEntries(resolvedEntries);
 };
+
+export const extractAtValues = _.memoize((input: any): string[] => {
+  return _.flatMapDeep(input, (value: any) => {
+    if (_.isString(value)) {
+      const matches = value.match(/@\{([^}]*)\}/g);
+
+      return matches ? matches.map((match) => match.slice(2, -1)) : [];
+    }
+
+    if (_.isObject(value)) {
+      return extractAtValues(_.values(value));
+    }
+
+    return [];
+  });
+});

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -6,6 +6,8 @@ exports[`focusManager should be defined 1`] = `
   "disableFocus": [Function],
   "enableFocus": [Function],
   "findPreferredFocusChild": [Function],
+  "focusOnSelectedTab": [Function],
+  "focusOnSelectedTopMenuItem": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
     "root": {
@@ -24,7 +26,11 @@ exports[`focusManager should be defined 1`] = `
   "invokeHandler": [Function],
   "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
+  "isFocusOn": [Function],
+  "isFocusOnContent": [Function],
+  "isFocusOnMenu": [Function],
   "isGroupItemFocused": [Function],
+  "isTabsScreenContentFocused": [Function],
   "longPress": [Function],
   "moveFocus": [Function],
   "on": [Function],
@@ -63,6 +69,7 @@ exports[`focusManagerIOS should be defined 1`] = `
   "getGroupRootById": [Function],
   "getPreferredFocusChild": [Function],
   "invokeHandler": [Function],
+  "isFocusOn": [Function],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],
   "on": [Function],

package/appUtils/focusManager/__tests__/focusManager.test.js

@@ -33,7 +33,7 @@ describe("focusManager", () => {
 
     expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
-    expect(mockSetFocus).toBeCalledWith(null);
+    expect(mockSetFocus).toBeCalledWith(null, undefined);
   });
 
   describe("register", () => {});

package/appUtils/focusManager/events.ts

@@ -9,3 +9,5 @@ export const WILL_LOSE_FOCUS = "willLoseFocus";
 export const BLUR = "blur";
 
 export const HAS_LOST_FOCUS = "hasLostFocus";
+
+export const RESET = "reset";

package/appUtils/focusManager/index.ios.ts

@@ -1,6 +1,7 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
 
+import { isCurrentFocusOn } from "../focusManagerAux/utils";
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
@@ -391,6 +392,14 @@ export const focusManager = (function () {
     return node;
   }
 
+  function isFocusOn(id): boolean {
+    const currentFocusNode = focusableTree.findInTree(
+      getCurrentFocus()?.props?.id
+    );
+
+    return id && isCurrentFocusOn(id, currentFocusNode);
+  }
+
   return {
     on,
     invokeHandler,
@@ -412,5 +421,6 @@ export const focusManager = (function () {
     getGroupRootById,
     isGroupItemFocused,
     getPreferredFocusChild,
+    isFocusOn,
   };
 })();

package/appUtils/focusManager/index.ts

@@ -3,6 +3,7 @@ import {
   isNilOrEmpty,
   isNotNil,
 } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { getFocusableId } from "@applicaster/zapp-react-native-utils/screenPickerUtils";
 
 import { Tree } from "./treeDataStructure/Tree";
 import {
@@ -14,6 +15,13 @@ import { subscriber } from "../../functionUtils";
 import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
 
+import {
+  isTabsScreenOnContentFocused,
+  isCurrentFocusOnContent,
+  isCurrentFocusOnMenu,
+  isCurrentFocusOn,
+} from "../focusManagerAux/utils";
+
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -100,7 +108,7 @@ export const focusManager = (function () {
    * @private
    * @param {Object} direction of the navigation which led to this action
    */
-  function focus(direction) {
+  function focus(direction, context?: FocusManager.FocusContext) {
     const currentFocusable = getCurrentFocus();
 
     if (
@@ -108,7 +116,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.setFocus(direction);
+      currentFocusable.setFocus(direction, context);
     }
   }
 
@@ -205,7 +213,7 @@ export const focusManager = (function () {
    * @param {Array<string>} ids - An array of node IDs to update.
    * @param {boolean} setFocus - A flag indicating whether to set focus (true) or blur (false) on the nodes.
    */
-  const updateNodeFocus = (ids, action) => {
+  const updateNodeFocus = (ids, action, context: FocusManager.FocusContext) => {
     if (!ids || ids.length === 0) {
       return; // Nothing to do
     }
@@ -222,11 +230,13 @@ export const focusManager = (function () {
 
     // Function to apply the action (focus or blur)
     const applyAction = (node) => {
+      const direction = undefined;
+
       if (node && node.component) {
         if (action === "focus") {
-          node.component.setFocus();
+          node.component.setFocus(direction, context);
         } else if (action === "blur") {
-          node.component.setBlur();
+          node.component.setBlur(direction, context);
         }
       }
     };
@@ -253,7 +263,11 @@ export const focusManager = (function () {
    * @param {Object} direction of the navigation, which led to this focus change
    * to another group or not. defaults to false
    */
-  function setFocus(id: string, direction?: FocusManager.Web.Direction) {
+  function setFocus(
+    id: string,
+    direction?: FocusManager.Web.Direction,
+    context?: FocusManager.FocusContext
+  ) {
     if (focusDisabled) return false;
 
     // due to optimisiation it's recommanded to set currentFocusNode before setFocus
@@ -266,21 +280,68 @@ export const focusManager = (function () {
       );
 
       // Set focus on current node parents and blur on previous node parents
-      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS);
-      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR);
+      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS, context);
+      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR, context);
 
       currentFocusNode = focusableTree.findInTree(id);
     }
 
     setLastFocusOnParentNode(currentFocusNode);
 
-    focus(direction);
+    focus(direction, context);
+  }
+
+  function isFocusOnContent() {
+    return isCurrentFocusOnContent(currentFocusNode);
+  }
+
+  function isFocusOnMenu() {
+    return isCurrentFocusOnMenu(currentFocusNode);
+  }
+
+  function landFocusToWithoutScrolling(id) {
+    if (id) {
+      // set focus on selected menu item
+      const direction = undefined;
+
+      const context: FocusManager.FocusContext = {
+        source: "back",
+        preserveScroll: true,
+      };
+
+      logger.log({ message: "landFocusTo", data: { id } });
+
+      blur(direction);
+      setFocus(id, direction, context);
+    }
+  }
+
+  function isTabsScreenContentFocused() {
+    return isTabsScreenOnContentFocused(currentFocusNode);
+  }
+
+  function focusOnSelectedTab(item: ZappEntry): void {
+    // Move focus to appropriate top navigation tab with context
+    const selectedTabId = getFocusableId(item.id);
+
+    // Set focus with back button context to tabs-menu
+    landFocusToWithoutScrolling(selectedTabId);
+  }
+
+  function focusOnSelectedTopMenuItem(
+    selectedMenuItemId: Option<string>
+  ): void {
+    // Set focus with back button context to top-menu
+    landFocusToWithoutScrolling(selectedMenuItemId);
   }
 
   /**
    * sets the initial focus when the screen loads, or when focus is lost
    */
-  function setInitialFocus(lastAddedParentNode?: any) {
+  function setInitialFocus(
+    lastAddedParentNode?: any,
+    context?: FocusManager.FocusContext
+  ) {
     const preferredFocus = findPriorityItem(
       lastAddedParentNode?.children || focusableTree.root.children
     );
@@ -326,7 +387,7 @@ export const focusManager = (function () {
         },
       });
 
-      focusableItem && setFocus(focusCandidate.id, null);
+      focusableItem && setFocus(focusCandidate.id, null, context);
 
       return { success: true };
     }
@@ -546,6 +607,14 @@ export const focusManager = (function () {
     return preferredFocus[0];
   }
 
+  function isFocusOn(id): boolean {
+    return (
+      id &&
+      isCurrentFocusOnTheTopScreen() &&
+      isCurrentFocusOn(id, currentFocusNode)
+    );
+  }
+
   /**
    * this is the list of the functions available externally
    * when importing the focus manager
@@ -576,5 +645,11 @@ export const focusManager = (function () {
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
     findPreferredFocusChild,
+    isFocusOnContent,
+    isFocusOnMenu,
+    isFocusOn,
+    focusOnSelectedTopMenuItem,
+    focusOnSelectedTab,
+    isTabsScreenContentFocused,
   };
 })();