@applicaster/zapp-react-native-ui-components 16.0.0-rc.82 → 16.0.0-rc.84

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/AudioPlayer/Components/Item.tsx

@@ -706,18 +706,31 @@ function ItemButton({
     }
   };
 
+  const buttonPadding = {
+    paddingTop: layout.paddingTop,
+    paddingRight: layout.paddingRight,
+    paddingBottom: layout.paddingBottom,
+    paddingLeft: layout.paddingLeft,
+  };
+
+  // A nested Pressable with no handler swallows the parent row press.
+  if (!onPress) {
+    return (
+      <View pointerEvents="none" style={buttonPadding}>
+        {renderIcon()}
+      </View>
+    );
+  }
+
   return (
     <Pressable
       onPress={(e: any) => {
         e?.stopPropagation?.();
-        onPress?.();
+        onPress();
       }}
       style={({ pressed }) => [
+        buttonPadding,
         {
-          paddingTop: layout.paddingTop,
-          paddingRight: layout.paddingRight,
-          paddingBottom: layout.paddingBottom,
-          paddingLeft: layout.paddingLeft,
           opacity: pressed || focused ? 0.7 : 1,
         },
       ]}
@@ -849,6 +862,10 @@ export function AudioPlayerTrackItem({
 
   const container = resolveContainerSpec(image);
 
+  const handleTrailingButtonPress =
+    onTrailingButtonPress ??
+    (data.trailingButton === "multiSelect" ? onPress : undefined);
+
   return (
     <ItemContainer
       image={image}
@@ -884,7 +901,7 @@ export function AudioPlayerTrackItem({
           focusedLeadingButton={focusedLeadingButton}
           focusedTrailingButton={focusedTrailingButton}
           onLeadingButtonPress={onLeadingButtonPress}
-          onTrailingButtonPress={onTrailingButtonPress}
+          onTrailingButtonPress={handleTrailingButtonPress}
           isSelected={data.isSelected}
           renderHandle={renderHandle}
           checkboxAssets={checkboxAssets}

package/Components/ModalComponent/AudioPlayer/Components/__tests__/Item.test.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
+import { AudioPlayerTrackItem, VARIANT_PLAYLIST_ITEM } from "../Item";
+
+const playlistItemData = {
+  textLabel1: "Queue",
+  textLabel2: "",
+  trailingButton: "multiSelect" as const,
+  isSelected: false,
+};
+
+describe("AudioPlayerTrackItem multiSelect checkbox", () => {
+  it("invokes onPress when the checkbox is pressed even if onTrailingButtonPress is omitted", () => {
+    const onPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+      />
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes onTrailingButtonPress instead of onPress when a dedicated trailing handler is provided", () => {
+    const onPress = jest.fn();
+    const onTrailingButtonPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+        onTrailingButtonPress={onTrailingButtonPress}
+      />
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onTrailingButtonPress).toHaveBeenCalledTimes(1);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it("invokes onPress when the row is pressed", () => {
+    const onPress = jest.fn();
+
+    render(
+      <AudioPlayerTrackItem
+        configuration={VARIANT_PLAYLIST_ITEM}
+        data={playlistItemData}
+        onPress={onPress}
+      />
+    );
+
+    fireEvent.press(screen.UNSAFE_getAllByType(Pressable)[0]);
+
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+});

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/ModalComponent/presets/__tests__/getCell.test.ts

@@ -1,3 +1,6 @@
+import React from "react";
+import { Pressable } from "react-native";
+import { fireEvent, render, screen } from "@testing-library/react-native";
 import { getCell } from "../index";
 import { standardCell } from "../standardCell";
 import { selectableCell } from "../selectableCell";
@@ -64,3 +67,24 @@ describe("mapMenuItemToPlaylistData", () => {
     expect(data.trailingButton).toBeUndefined();
   });
 });
+
+describe("selectableCell checkbox press", () => {
+  it("invokes onPress with the playlist item when the checkbox is pressed", () => {
+    const onPress = jest.fn();
+    const item = { id: "queue", title: "Queue" };
+
+    render(
+      selectableCell.renderItem({
+        item,
+        index: 0,
+        onPress,
+        context: { behavior: { selectMode: "multi" } } as any,
+      }) as React.ReactElement
+    );
+
+    const pressables = screen.UNSAFE_getAllByType(Pressable);
+    fireEvent.press(pressables[pressables.length - 1]);
+
+    expect(onPress).toHaveBeenCalledWith(item);
+  });
+});

package/Components/ModalComponent/presets/selectableCell.tsx

@@ -21,7 +21,7 @@ export const selectableCell: CellRenderer = {
                 title: item.title,
                 action: item.secondaryAction!.action,
               })
-          : undefined
+          : () => onPress(item)
       }
     />
   ),

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.84",
   "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.84",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.84",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.84",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.84",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "react-native-sortables": "1.7.1",