@applicaster/zapp-react-native-ui-components 16.0.0-rc.82 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.82",
+  "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.82",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.82",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.82",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.82",
+    "@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",