stream-chat-react-native-core 9.3.0 → 9.3.1-beta.10

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   I18nManager,
   Platform,
@@ -109,6 +109,42 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
   const { command, text } = useStateStore(textComposer.state, textComposerStateSelector);
   const { enabled } = useStateStore(messageComposer.configState, configStateSelector);
 
+  // RN's onChangeText doesn't carry cursor info, and iOS / Android fire
+  // onChangeText vs onSelectionChange in different orders. Rather than derive
+  // the caret from a text-length delta (fragile — gets clobbered by re-renders
+  // and varies across platforms), we hold the latest values reported by native
+  // and call into the LLC once both have settled.
+  const latestTextRef = useRef('');
+  const latestSelectionRef = useRef<{ end: number; start: number }>({
+    end: 0,
+    start: 0,
+  });
+  const flushHandleRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const flushChange = useCallback(() => {
+    flushHandleRef.current = null;
+    textComposer.handleChange({
+      selection: latestSelectionRef.current,
+      text: latestTextRef.current,
+    });
+  }, [textComposer]);
+
+  // Defer to the next task so onChangeText and onSelectionChange both land
+  // before we forward to the LLC, regardless of platform ordering.
+  const scheduleChange = useCallback(() => {
+    if (flushHandleRef.current !== null) return;
+    flushHandleRef.current = setTimeout(flushChange, 0);
+  }, [flushChange]);
+
+  useEffect(() => {
+    return () => {
+      if (flushHandleRef.current !== null) {
+        clearTimeout(flushHandleRef.current);
+        flushHandleRef.current = null;
+      }
+    };
+  }, []);
+
   const maxMessageLength = useMemo(() => {
     return channel.getConfig()?.max_message_length;
   }, [channel]);
@@ -119,6 +155,14 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
 
   useEffect(() => {
     setLocalText(text);
+    // Only resync the refs when the text change came from outside (clear after
+    // send, draft restore, programmatic setText). For changes we triggered
+    // ourselves, latestTextRef is already up to date and overwriting the
+    // selection would clobber what onSelectionChange just told us.
+    if (text !== latestTextRef.current) {
+      latestTextRef.current = text;
+      latestSelectionRef.current = { end: text.length, start: text.length };
+    }
   }, [text]);
 
   const clearState = useCallback(() => {
@@ -148,24 +192,20 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
   const handleSelectionChange = useCallback(
     (e: TextInputSelectionChangeEvent) => {
       const { selection } = e.nativeEvent;
+      latestSelectionRef.current = selection;
       textComposer.setSelection(selection);
+      scheduleChange();
     },
-    [textComposer],
+    [scheduleChange, textComposer],
   );
 
   const onChangeTextHandler = useCallback(
     (newText: string) => {
       setLocalText(newText);
-
-      textComposer.handleChange({
-        selection: {
-          end: newText.length,
-          start: newText.length,
-        },
-        text: newText,
-      });
+      latestTextRef.current = newText;
+      scheduleChange();
     },
-    [textComposer],
+    [scheduleChange],
   );
 
   const {

package/src/components/AutoCompleteInput/__tests__/AutoCompleteInput.test.tsx

@@ -112,8 +112,13 @@ describe('AutoCompleteInput', () => {
 
     const input = queryByTestId('auto-complete-text-input')!;
 
+    // RN fires both events for every keystroke; we forward to the LLC once
+    // both have settled, so the test mirrors that.
     act(() => {
       fireEvent.changeText(input, 'hello');
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: 5, start: 5 } },
+      });
     });
 
     await waitFor(() => {
@@ -170,6 +175,119 @@ describe('AutoCompleteInput', () => {
     });
   });
 
+  it('forwards the real caret position to handleChange when typing in the middle of multi-line text', async () => {
+    // Regression: when the user inserts a character somewhere other than the
+    // end of the text (e.g. typing "@" between paragraphs), the original
+    // implementation passed selection.end = newText.length, which caused the
+    // LLC mention-trigger regex to miss "@" on multi-line input because it
+    // only tolerates one whitespace between "@" and end-of-string.
+    const { textComposer } = channel.messageComposer;
+    const spyHandleChange = jest.spyOn(textComposer, 'handleChange');
+
+    renderComponent({ channelProps: { channel }, client, props: {} });
+
+    const input = screen.getByTestId('auto-complete-text-input');
+
+    // Seed the input with some multi-line text and place the caret between
+    // the two leading newlines (position 6 — right after "asdf\n\n", before
+    // the trailing "\n\n dsfa").
+    const seeded = 'asdf\n\n\n\n dsfa';
+    const caret = 6;
+    act(() => {
+      fireEvent.changeText(input, seeded);
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: caret, start: caret } },
+      });
+    });
+
+    await waitFor(() => {
+      expect(spyHandleChange).toHaveBeenCalledWith({
+        selection: { end: caret, start: caret },
+        text: seeded,
+      });
+    });
+
+    spyHandleChange.mockClear();
+
+    // User types "@" at the caret. Both events fire in a single keystroke.
+    const inserted = 'asdf\n\n@\n\n dsfa';
+    const newCaret = caret + 1;
+    act(() => {
+      fireEvent.changeText(input, inserted);
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: newCaret, start: newCaret } },
+      });
+    });
+
+    await waitFor(() => {
+      // Must land right after the inserted "@", not at end-of-string —
+      // otherwise the LLC mention regex misses "@" because of the trailing
+      // "\n\n dsfa".
+      expect(spyHandleChange).toHaveBeenCalledWith({
+        selection: { end: newCaret, start: newCaret },
+        text: inserted,
+      });
+    });
+  });
+
+  it('forwards the real caret to handleChange when the user deletes "@" and retypes it', async () => {
+    // Regression: deleting "@" and retyping it on the same single line caused
+    // the picker to stay hidden on iOS — and on Android even with newlines.
+    // The bug was that we derived the caret from a text-length delta plus a
+    // stale ref; the coalesced flush now uses whatever native actually
+    // reported via onSelectionChange.
+    const { textComposer } = channel.messageComposer;
+    const spyHandleChange = jest.spyOn(textComposer, 'handleChange');
+
+    renderComponent({ channelProps: { channel }, client, props: {} });
+
+    const input = screen.getByTestId('auto-complete-text-input');
+
+    // 1. Seed "asdf @ dsfa" with the caret right after "@".
+    act(() => {
+      fireEvent.changeText(input, 'asdf @ dsfa');
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: 6, start: 6 } },
+      });
+    });
+
+    await waitFor(() => {
+      expect(spyHandleChange).toHaveBeenCalledWith({
+        selection: { end: 6, start: 6 },
+        text: 'asdf @ dsfa',
+      });
+    });
+
+    // 2. Delete the "@" — text shrinks by one, caret moves to position 5.
+    act(() => {
+      fireEvent.changeText(input, 'asdf  dsfa');
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: 5, start: 5 } },
+      });
+    });
+
+    spyHandleChange.mockClear();
+
+    // 3. Retype "@" at position 5.
+    act(() => {
+      fireEvent.changeText(input, 'asdf @ dsfa');
+      fireEvent(input, 'selectionChange', {
+        nativeEvent: { selection: { end: 6, start: 6 } },
+      });
+    });
+
+    await waitFor(() => {
+      // The cursor must be reported at 6 (right after the new "@"), not
+      // somewhere stale. With a wrong caret, the LLC slice would include
+      // " dsfa" after the "@" and the query would be " dsfa" instead of "",
+      // which returns zero users → picker stays hidden.
+      expect(spyHandleChange).toHaveBeenCalledWith({
+        selection: { end: 6, start: 6 },
+        text: 'asdf @ dsfa',
+      });
+    });
+  });
+
   it('should call the textComposer setSelection when the onSelectionChange is triggered', async () => {
     const { textComposer } = channel.messageComposer;
 

package/src/components/Channel/__tests__/ownCapabilities.test.tsx

@@ -3,7 +3,7 @@ import { FlatList } from 'react-native';
 
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
-import { act, fireEvent, render, waitFor } from '@testing-library/react-native';
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react-native';
 import type { Channel as ChannelType, LocalMessage, StreamChat } from 'stream-chat';
 
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
@@ -16,6 +16,7 @@ import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { registerNativeHandlers } from '../../../native';
+import { closeOverlay, finalizeCloseOverlay } from '../../../state-store';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
 import { MessageComposer } from '../../MessageInput/MessageComposer';
@@ -49,6 +50,15 @@ describe('Own capabilities', () => {
     });
   });
 
+  afterEach(() => {
+    cleanup();
+    // The overlay state-store is module-level, so an overlay opened by a
+    // previous test would still be `active` when the next test mounts.
+    // Reset it so each test starts with `isActive=false`.
+    closeOverlay();
+    finalizeCloseOverlay();
+  });
+
   const getComponent = (props: Partial<React.ComponentProps<typeof Channel>> = {}) => (
     <SafeAreaProvider>
       <OverlayProvider>
@@ -76,7 +86,20 @@ describe('Own capabilities', () => {
     targetMessage: LocalMessage,
     props: Partial<React.ComponentProps<typeof Channel>> = {},
   ) => {
-    const { findByTestId, queryByLabelText, queryByText, unmount } = render(getComponent(props));
+    const {
+      findByTestId,
+      queryByLabelText: rawQueryByLabelText,
+      queryByText,
+      unmount,
+    } = render(getComponent(props));
+    // After the overlay opens, the host layer's `accessibilityViewIsModal`
+    // marks the chat tree as hidden to RNTL. The message action list is
+    // Portal-teleported into the overlay but its React parent stays inside
+    // the chat, so the visible-elements filter excludes it. The list IS
+    // rendered (and visible in production); we pass `includeHiddenElements`
+    // to look past the modal-sibling heuristic.
+    const queryByLabelText: typeof rawQueryByLabelText = (text, options) =>
+      rawQueryByLabelText(text, { includeHiddenElements: true, ...options });
     await waitFor(() => queryByText(targetMessage.text as string));
 
     act(() => {

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -13,6 +13,7 @@ import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../../hooks';
 import { Check, CheckAll, Time } from '../../icons';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
+import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
 export type ChannelMessagePreviewDeliveryStatusProps = Pick<ChannelPreviewProps, 'channel'> & {
   message: MessageResponse | LocalMessage;
@@ -66,11 +67,11 @@ export const ChannelMessagePreviewDeliveryStatus = ({
     message.status === MessageStatusTypes.SENDING
       ? 'a11y/Sending'
       : message.status === MessageStatusTypes.RECEIVED && status === MessageDeliveryStatus.READ
-        ? 'a11y/Read'
+        ? 'a11y/Read, sent by you'
         : status === MessageDeliveryStatus.DELIVERED
-          ? 'a11y/Delivered'
+          ? 'a11y/Delivered, sent by you'
           : status === MessageDeliveryStatus.SENT
-            ? 'a11y/Sent'
+            ? 'a11y/Sent by you'
             : 'a11y/Sending',
   );
 
@@ -83,19 +84,21 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   }
 
   return (
-    <View accessibilityLabel={statusLabel} accessibilityRole='text' style={styles.container}>
-      {message.status === MessageStatusTypes.SENDING ? (
-        <Time stroke={semantics.chatTextTimestamp} height={16} width={16} {...timeIcon} />
-      ) : message.status === MessageStatusTypes.RECEIVED &&
-        status === MessageDeliveryStatus.READ ? (
-        <CheckAll stroke={semantics.accentPrimary} height={16} width={16} {...checkAllIcon} />
-      ) : status === MessageDeliveryStatus.DELIVERED ? (
-        <CheckAll stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkAllIcon} />
-      ) : status === MessageDeliveryStatus.SENT ? (
-        <Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
-      ) : null}
-      <Text style={styles.text}>{t('You')}:</Text>
-    </View>
+    <CompositeAccessibilityProbe label={statusLabel}>
+      <View style={styles.container}>
+        {message.status === MessageStatusTypes.SENDING ? (
+          <Time stroke={semantics.chatTextTimestamp} height={16} width={16} {...timeIcon} />
+        ) : message.status === MessageStatusTypes.RECEIVED &&
+          status === MessageDeliveryStatus.READ ? (
+          <CheckAll stroke={semantics.accentPrimary} height={16} width={16} {...checkAllIcon} />
+        ) : status === MessageDeliveryStatus.DELIVERED ? (
+          <CheckAll stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkAllIcon} />
+        ) : status === MessageDeliveryStatus.SENT ? (
+          <Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
+        ) : null}
+        <Text style={styles.text}>{t('You')}:</Text>
+      </View>
+    </CompositeAccessibilityProbe>
   );
 };
 

package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Mute } from '../../icons';
+import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
 /**
  * This UI component displays an avatar for a particular channel.
@@ -13,6 +15,11 @@ export const ChannelPreviewMutedStatus = () => {
       semantics,
     },
   } = useTheme();
+  const accessibilityLabel = useA11yLabel('a11y/Muted');
 
-  return <Mute height={20} fill={semantics.textTertiary} width={20} {...mutedStatus} />;
+  return (
+    <CompositeAccessibilityProbe label={accessibilityLabel}>
+      <Mute height={20} fill={semantics.textTertiary} width={20} {...mutedStatus} />
+    </CompositeAccessibilityProbe>
+  );
 };

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -4,11 +4,12 @@ import { StyleSheet, Text } from 'react-native';
 import type { ChannelPreviewProps } from './ChannelPreview';
 import type { ChannelPreviewViewPropsWithContext } from './ChannelPreviewView';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 import { primitives } from '../../theme';
-import { getDateString } from '../../utils/i18n/getDateString';
+import { getDateString, getDateStringForA11y } from '../../utils/i18n/getDateString';
 
 export type ChannelPreviewStatusProps = Pick<
   ChannelPreviewViewPropsWithContext,
@@ -18,7 +19,7 @@ export type ChannelPreviewStatusProps = Pick<
 
 export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
   const { formatLatestMessageDate, lastMessage } = props;
-  const { t, tDateTimeParser } = useTranslationContext();
+  const { t, tDateTimeParser, userLanguage } = useTranslationContext();
   const styles = useStyles();
 
   const created_at = lastMessage?.created_at;
@@ -35,11 +36,30 @@ export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
     [created_at, t, tDateTimeParser],
   );
 
+  const a11yDate = useMemo(
+    () =>
+      getDateStringForA11y({
+        calendarFormatOverrides: { sameDay: 'LT' },
+        date: created_at,
+        tDateTimeParser,
+        userLanguage,
+      }),
+    [created_at, tDateTimeParser, userLanguage],
+  );
+
+  const visibleDate =
+    formatLatestMessageDate && latestMessageDate
+      ? formatLatestMessageDate(latestMessageDate).toString()
+      : formattedDate;
+  const labelParams = useMemo(
+    () => ({ date: a11yDate ?? visibleDate ?? '' }),
+    [a11yDate, visibleDate],
+  );
+  const accessibilityLabel = useA11yLabel('a11y/Last message {{date}}', labelParams);
+
   return (
-    <Text style={styles.date}>
-      {formatLatestMessageDate && latestMessageDate
-        ? formatLatestMessageDate(latestMessageDate).toString()
-        : formattedDate}
+    <Text accessibilityLabel={accessibilityLabel} style={styles.date}>
+      {visibleDate}
     </Text>
   );
 };

package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { ChannelPreviewProps } from './ChannelPreview';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import type { ChannelsContextValue } from '../../contexts/channelsContext/ChannelsContext';
 import { BadgeNotification } from '../ui/Badge';
 
@@ -15,12 +16,15 @@ export type ChannelPreviewUnreadCountProps = Pick<ChannelsContextValue, 'maxUnre
 
 export const ChannelPreviewUnreadCount = (props: ChannelPreviewUnreadCountProps) => {
   const { maxUnreadCount, unread } = props;
+  const labelParams = useMemo(() => ({ count: unread ?? 0 }), [unread]);
+  const accessibilityLabel = useA11yLabel('a11y/{{count}} unread messages', labelParams);
   if (!unread) {
     return null;
   }
 
   return (
     <BadgeNotification
+      accessibilityLabel={accessibilityLabel}
       count={unread > maxUnreadCount ? maxUnreadCount : unread}
       size='sm'
       type='primary'

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -5,6 +5,7 @@ import type { ChannelPreviewProps } from './ChannelPreview';
 
 import type { LastMessageType } from './hooks/useChannelPreviewData';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import {
   ChannelsContextValue,
   useChannelsContext,
@@ -70,6 +71,7 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
   } = useTheme();
   const styles = useStyles();
   const swipeRegistry = useSwipeRegistryContext();
+  const accessibilityHint = useA11yLabel('a11y/Double tap to open');
 
   const onPress = useStableCallback(() => {
     if (swipeRegistry?.hasOpen()) {
@@ -84,6 +86,7 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
   return (
     <View style={[styles.wrapper, wrapper]}>
       <Pressable
+        accessibilityHint={accessibilityHint}
         onPress={onPress}
         style={({ pressed }) => [
           styles.container,

package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx

@@ -14,7 +14,6 @@ import { ChannelDetailsBottomSheet } from '../ChannelDetailsBottomSheet';
 type StreamBottomSheetModalFlatListProps = ComponentProps<typeof StreamBottomSheetModalFlatList>;
 
 const mockStreamBottomSheetModalFlatList = jest.fn(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   (_props: StreamBottomSheetModalFlatListProps) => null,
 );
 

package/src/components/ImageGallery/ImageGallery.tsx

@@ -1,5 +1,12 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Image, ImageStyle, StyleSheet, ViewStyle } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Image,
+  ImageStyle,
+  Platform,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
@@ -21,6 +28,8 @@ import type {
 
 import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   ImageGalleryProviderProps,
@@ -280,13 +289,82 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     setIsGridViewVisible(true);
   };
 
+  const { enabled: isAccessibilityEnabled } = useAccessibilityContext();
+  const assetsCount = assets.length;
+  const isAdjustable = isAccessibilityEnabled;
+  const accessibilityValueParams = useMemo(
+    () => ({ count: assetsCount, position: currentIndex + 1 }),
+    [currentIndex, assetsCount],
+  );
+  const accessibilityValueText = useA11yLabel(
+    'a11y/{{position}} of {{count}}',
+    accessibilityValueParams,
+  );
+  const accessibilityValue = useMemo(
+    () => (accessibilityValueText ? { text: accessibilityValueText } : undefined),
+    [accessibilityValueText],
+  );
+  const adjustableActions = useMemo(
+    () =>
+      isAdjustable ? [{ name: 'increment' as const }, { name: 'decrement' as const }] : undefined,
+    [isAdjustable],
+  );
+
+  const onAccessibilityAction = useCallback(
+    (event: { nativeEvent: { actionName: string } }) => {
+      if (!isAccessibilityEnabled) return;
+      const latest = imageGalleryStateStore.state.getLatestValue();
+      const latestCount = latest.assets.length;
+      const latestIndex = latest.currentIndex;
+      if (latestCount <= 1) return;
+      if (event.nativeEvent.actionName === 'increment') {
+        if (latestIndex < latestCount - 1) {
+          imageGalleryStateStore.currentIndex = latestIndex + 1;
+        }
+      } else if (event.nativeEvent.actionName === 'decrement') {
+        if (latestIndex > 0) {
+          imageGalleryStateStore.currentIndex = latestIndex - 1;
+        }
+      }
+    },
+    [imageGalleryStateStore, isAccessibilityEnabled],
+  );
+
+  useEffect(() => {
+    return () => {
+      const handle = imageGalleryStateStore.requesterNode;
+      if (handle == null) return;
+      imageGalleryStateStore.requesterNode = null;
+      // Because of the fact that iOS and Android handle supressing
+      // the content underneath differently, we have to wait a frame
+      // before iOS is allowed to attempt to refocus (it takes a frame
+      // for the native a11y tree to become aware that it no longer has
+      // an accessibilityViewIsModal sibling).
+      if (Platform.OS === 'android') {
+        AccessibilityInfo.setAccessibilityFocus(handle);
+      } else {
+        requestAnimationFrame(() => {
+          AccessibilityInfo.setAccessibilityFocus(handle);
+        });
+      }
+    };
+  }, [imageGalleryStateStore]);
+
   return (
     <Animated.View
-      accessibilityLabel='Image Gallery'
+      accessibilityViewIsModal
       pointerEvents={'auto'}
       style={[StyleSheet.absoluteFill, showScreenStyle]}
     >
-      <Animated.View style={[StyleSheet.absoluteFill, containerBackground]} />
+      <Animated.View
+        accessible
+        accessibilityActions={adjustableActions}
+        accessibilityLabel='Image Gallery'
+        accessibilityRole={isAdjustable ? 'adjustable' : undefined}
+        accessibilityValue={isAdjustable ? accessibilityValue : undefined}
+        onAccessibilityAction={isAdjustable ? onAccessibilityAction : undefined}
+        style={[StyleSheet.absoluteFill, containerBackground]}
+      />
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
         <Animated.View style={StyleSheet.absoluteFill}>
           <Animated.View

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -99,8 +99,16 @@ describe('ImageGallery', () => {
     );
 
     await waitFor(() => {
-      expect(screen.queryAllByLabelText('Image Item')).toHaveLength(2);
-      expect(screen.queryAllByLabelText('Image Gallery Video')).toHaveLength(1);
+      // The pager subtree is marked `accessibilityElementsHidden` /
+      // `importantForAccessibility='no-hide-descendants'` so screen readers
+      // can't land on the silent shadow views inside it; the queries here
+      // opt back into hidden elements so tests can still find the assets.
+      expect(
+        screen.queryAllByLabelText('Image Item', { includeHiddenElements: true }),
+      ).toHaveLength(2);
+      expect(
+        screen.queryAllByLabelText('Image Gallery Video', { includeHiddenElements: true }),
+      ).toHaveLength(1);
     });
   });
 
@@ -116,7 +124,9 @@ describe('ImageGallery', () => {
     );
 
     await waitFor(() => {
-      const pagerStyle = StyleSheet.flatten(screen.getByTestId('image-gallery-pager').props.style);
+      const pagerStyle = StyleSheet.flatten(
+        screen.getByTestId('image-gallery-pager', { includeHiddenElements: true }).props.style,
+      );
       expect(pagerStyle.direction).toBe('ltr');
     });
   });