@applicaster/zapp-react-native-ui-components 16.0.0-rc.81 → 16.0.0-rc.83

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -105,6 +105,7 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
       accessibilityHint={props?.accessibilityHint}
+      accessibilityRole="button"
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -91,6 +91,7 @@ function ButtonComponent(props: Props) {
       onPress={onPress}
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      accessibilityRole="button"
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/ModalComponent/Header/CloseButton.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
 import { TouchableOpacity } from "react-native";
 import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components";
+import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 // @ts-ignore
 import { defaultCloseAsset } from "./assets";
 
@@ -40,9 +41,20 @@ export function CloseButton(props: CloseButtonProps) {
 
   if (!enabled) return null;
 
+  // Expose the close button as its own accessible control so screen readers
+  // (e.g. iOS VoiceOver) can focus and activate it. The image-only button
+  // otherwise has no label/role, leaving it unreachable/unannounced. Uses the
+  // framework's localized "close" button config (label + hint + button role).
+  // Computed each render (not memoized) so runtime localization updates via
+  // AccessibilityManager.updateLocalizations() are picked up on re-render.
+  const accessibilityProps =
+    AccessibilityManager.getInstance().getButtonAccessibilityProps("close");
+
   return (
     <TouchableOpacity
       activeOpacity={1}
+      testID="closeButton"
+      {...accessibilityProps}
       style={{
         marginBottom,
         marginTop,

package/Components/ModalComponent/Header/__tests__/CloseButton.test.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { CloseButton, CloseButtonProps } from "../CloseButton";
+
+jest.mock("@applicaster/zapp-react-native-ui-components/Components", () => {
+  const { Image } = require("react-native");
+
+  return { QBImage: Image };
+});
+
+const mockGetButtonA11yProps = jest.fn(() => ({
+  accessible: true,
+  accessibilityLabel: "Close",
+  accessibilityHint: "Closes the sheet",
+  accessibilityRole: "button",
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager",
+  () => ({
+    AccessibilityManager: {
+      getInstance: () => ({
+        getButtonAccessibilityProps: mockGetButtonA11yProps,
+      }),
+    },
+  })
+);
+
+const baseProps: CloseButtonProps = {
+  enabled: true,
+  close: jest.fn(),
+  asset: "close.png",
+  assetFocused: "close_focused.png",
+  height: 24,
+  width: 24,
+  marginTop: 0,
+  marginBottom: 0,
+  marginLeft: 0,
+  marginRight: 0,
+};
+
+describe("ModalComponent Header CloseButton", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders as an accessible button reachable by screen readers", () => {
+    render(<CloseButton {...baseProps} />);
+
+    const button = screen.getByTestId("closeButton");
+
+    expect(button.props.accessible).toBe(true);
+    expect(button.props.accessibilityRole).toBe("button");
+    expect(button.props.accessibilityLabel).toBe("Close");
+    expect(mockGetButtonA11yProps).toHaveBeenCalledWith("close");
+  });
+
+  it("invokes close on press", () => {
+    const close = jest.fn();
+    render(<CloseButton {...baseProps} close={close} />);
+
+    fireEvent.press(screen.getByTestId("closeButton"));
+
+    expect(close).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders nothing when disabled", () => {
+    render(<CloseButton {...baseProps} enabled={false} />);
+
+    expect(screen.queryByTestId("closeButton")).toBeNull();
+  });
+});

package/Components/River/River.tsx

@@ -20,6 +20,8 @@ type Props = ZappScreenProps & {
   setIsScreenWrappedInContainer: (isInsideContainer: boolean) => void;
   screenContext: ZappRiver;
   river: ZappRiver;
+  /** Result channel for screens presented as a modal; forwarded to the resolved screen. */
+  resultCallback?: hookCallback;
 };
 
 export class RiverComponent extends React.Component<Props> {
@@ -64,6 +66,7 @@ export class RiverComponent extends React.Component<Props> {
       isInsideContainer,
       groupId,
       scrollViewExtraProps,
+      resultCallback,
     } = this.props;
 
     const { id, type } = river;
@@ -77,6 +80,7 @@ export class RiverComponent extends React.Component<Props> {
           })}
           screenId={id}
           screenType={type}
+          resultCallback={resultCallback}
         />
       );
     }

package/Components/River/__tests__/resultCallback.test.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+
+import { RiverComponent } from "../River";
+
+const mockResolverProps: any[] = [];
+
+jest.mock("../../ScreenResolver", () => ({
+  ScreenResolver: (props: any) => {
+    mockResolverProps.push(props);
+
+    return null;
+  },
+}));
+
+const river = { id: "river-parent-lock", type: "parent_lock" } as any;
+
+const baseProps = {
+  river,
+  screenData: {},
+  groupId: "group-1",
+  scrollViewExtraProps: {},
+  setIsScreenWrappedInContainer: jest.fn(),
+  screenContext: { navBar: { setTitle: jest.fn(), setSummary: jest.fn() } },
+} as any;
+
+const resolved = () => mockResolverProps[mockResolverProps.length - 1];
+
+describe("RiverComponent", () => {
+  beforeEach(() => {
+    mockResolverProps.length = 0;
+  });
+
+  it("forwards resultCallback to the screen it resolves", () => {
+    const resultCallback = jest.fn();
+
+    render(<RiverComponent {...baseProps} resultCallback={resultCallback} />);
+
+    expect(resolved().resultCallback).toBe(resultCallback);
+  });
+
+  it("resolves the screen without a resultCallback when none was given", () => {
+    render(<RiverComponent {...baseProps} />);
+
+    expect(resolved().resultCallback).toBeUndefined();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.81",
+  "version": "16.0.0-rc.83",
   "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": "16.0.0-rc.81",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.81",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.81",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.81",
+    "@applicaster/applicaster-types": "16.0.0-rc.83",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.83",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.83",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.83",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",