stream-chat-react-native-core 9.3.1-beta.7 → 9.3.1-beta.8

package/src/components/Accessibility/__tests__/OverlayA11yShield.test.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Platform, Text } from 'react-native';
+
+import { act, render, screen } from '@testing-library/react-native';
+
+import { OverlayContext } from '../../../contexts/overlayContext/OverlayContext';
+import { overlayStore } from '../../../state-store/message-overlay-store';
+import { OverlayA11yShield } from '../OverlayA11yShield';
+
+const setPlatform = (os: typeof Platform.OS) => {
+  Object.defineProperty(Platform, 'OS', { configurable: true, get: () => os });
+};
+
+const renderShield = (overlay: 'none' | 'gallery' = 'none') =>
+  render(
+    <OverlayContext.Provider
+      value={
+        {
+          overlay,
+          setOverlay: () => undefined,
+          style: undefined,
+        } as never
+      }
+    >
+      <OverlayA11yShield>
+        <Text testID='child'>child</Text>
+      </OverlayA11yShield>
+    </OverlayContext.Provider>,
+  );
+
+// The wrapper sets `accessibilityElementsHidden` / `importantForAccessibility`
+// when an overlay is active — RTL v13 filters those elements out of a11y queries
+// by default. `includeHiddenElements: true` keeps them queryable for assertion.
+const wrapper = () => screen.queryByTestId('overlay-a11y-shield', { includeHiddenElements: true });
+
+describe('OverlayA11yShield', () => {
+  const originalOS = Platform.OS;
+  afterAll(() => setPlatform(originalOS));
+
+  beforeEach(() => {
+    act(() => {
+      overlayStore.partialNext({ closing: false, id: undefined, messageId: undefined });
+    });
+  });
+
+  describe('on Android', () => {
+    beforeAll(() => setPlatform('android'));
+
+    it('renders children inside the wrapper', () => {
+      renderShield();
+      expect(screen.getByTestId('child')).toBeTruthy();
+      expect(wrapper()).toBeTruthy();
+    });
+
+    it('does not hide descendants when no overlay is active', () => {
+      renderShield('none');
+      expect(wrapper()?.props.importantForAccessibility).toBe('auto');
+    });
+
+    it('hides descendants when the gallery overlay is active', () => {
+      renderShield('gallery');
+      expect(wrapper()?.props.importantForAccessibility).toBe('no-hide-descendants');
+    });
+
+    it('hides descendants when the message overlay opens', () => {
+      renderShield('none');
+      act(() => {
+        overlayStore.partialNext({ id: 'msg-1' });
+      });
+      expect(wrapper()?.props.importantForAccessibility).toBe('no-hide-descendants');
+    });
+  });
+
+  describe('on iOS', () => {
+    beforeAll(() => setPlatform('ios'));
+
+    it('renders children without a wrapper', () => {
+      renderShield();
+      expect(screen.getByTestId('child')).toBeTruthy();
+      expect(wrapper()).toBeNull();
+    });
+  });
+});

package/src/components/Attachment/Gallery.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import React, { useMemo, useRef } from 'react';
+import { findNodeHandle, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment, LocalMessage } from 'stream-chat';
 
@@ -14,6 +14,7 @@ import {
 
 import { openUrlSafely } from './utils/openUrlSafely';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useTranslationContext } from '../../contexts';
 import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
@@ -236,12 +237,19 @@ const GalleryThumbnail = ({
   } = useTheme();
   const { t } = useTranslationContext();
   const styles = useStyles();
+  const isVideo = thumbnail.type === FileTypes.Video;
+  const thumbnailAccessibilityLabel = useA11yLabel(
+    isVideo ? 'a11y/Gallery Video' : 'a11y/Gallery Image',
+  );
+  const thumbnailAccessibilityHint = useA11yLabel('a11y/Double tap to open');
+  const thumbnailRef = useRef<View>(null);
   const openImageViewer = () => {
     if (!message) {
       return;
     }
     imageGalleryStateStore.openImageGallery({
       messages: [message],
+      requesterNode: findNodeHandle(thumbnailRef.current),
       selectedAttachmentUrl: thumbnail.url,
     });
     setOverlay('gallery');
@@ -260,8 +268,12 @@ const GalleryThumbnail = ({
   };
   return (
     <Pressable
+      accessibilityHint={thumbnailAccessibilityHint}
+      accessibilityLabel={thumbnailAccessibilityLabel}
+      accessibilityRole='button'
       disabled={preventPress}
       key={`gallery-item-${message.id}/${colIndex}/${rowIndex}/${imagesAndVideos.length}`}
+      ref={thumbnailRef}
       onLongPress={(event) => {
         if (onLongPress) {
           onLongPress({

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/ChannelPreviewStatus.tsx

@@ -9,7 +9,7 @@ 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,
@@ -19,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;
@@ -36,11 +36,25 @@ 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: visibleDate ?? '' }), [visibleDate]);
+  const labelParams = useMemo(
+    () => ({ date: a11yDate ?? visibleDate ?? '' }),
+    [a11yDate, visibleDate],
+  );
   const accessibilityLabel = useA11yLabel('a11y/Last message {{date}}', labelParams);
 
   return (

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');
     });
   });

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

@@ -0,0 +1,141 @@
+import React, { useEffect } from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+
+import { LocalMessage } from 'stream-chat';
+
+import {
+  ImageGalleryContext,
+  ImageGalleryContextValue,
+} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import {
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { ImageGalleryStateStore } from '../../../state-store/image-gallery-state-store';
+import { ImageGallery } from '../ImageGallery';
+
+jest.mock('../../../native.ts', () => {
+  const { View } = require('react-native');
+  return {
+    isFileSystemAvailable: jest.fn(() => true),
+    isImageMediaLibraryAvailable: jest.fn(() => true),
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
+    NativeHandlers: { Video: View },
+  };
+});
+
+type HarnessProps = {
+  message: LocalMessage;
+  accessibilityEnabled?: boolean;
+  store: ImageGalleryStateStore;
+};
+
+const Harness = ({ accessibilityEnabled = true, message, store }: HarnessProps) => {
+  useEffect(() => {
+    const unsubscribe = store.registerSubscriptions();
+    return () => unsubscribe();
+  }, [store]);
+
+  const { attachments } = message;
+  store.openImageGallery({
+    messages: [message],
+    selectedAttachmentUrl: attachments?.[0]?.asset_url || attachments?.[0]?.image_url || '',
+  });
+
+  return (
+    <OverlayProvider
+      accessibility={{ enabled: accessibilityEnabled }}
+      value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}
+    >
+      <ImageGalleryContext.Provider
+        value={{ imageGalleryStateStore: store } as unknown as ImageGalleryContextValue}
+      >
+        <ImageGallery />
+      </ImageGalleryContext.Provider>
+    </OverlayProvider>
+  );
+};
+
+const findGalleryRoot = () =>
+  screen.getByLabelText('Image Gallery', { includeHiddenElements: true });
+
+const fireAccessibilityAction = (actionName: 'increment' | 'decrement') => {
+  fireEvent(findGalleryRoot(), 'accessibilityAction', { nativeEvent: { actionName } });
+};
+
+const renderWithAssets = (assetsCount: number, accessibilityEnabled = true) => {
+  const attachments = [
+    ...Array.from({ length: Math.max(assetsCount - 1, 0) }, () => generateImageAttachment()),
+    ...(assetsCount > 0 ? [generateVideoAttachment({ type: 'video' })] : []),
+  ];
+  const message = generateMessage({ attachments });
+  const store = new ImageGalleryStateStore();
+  render(<Harness accessibilityEnabled={accessibilityEnabled} message={message} store={store} />);
+  return { store };
+};
+
+describe('ImageGallery adjustable cycling', () => {
+  it('marks the root as adjustable with the position value when a11y is enabled and there is more than one asset', async () => {
+    renderWithAssets(3);
+
+    await waitFor(() => {
+      const root = findGalleryRoot();
+      expect(root.props.accessibilityRole).toBe('adjustable');
+      expect(root.props.accessibilityValue).toEqual({ text: '1 of 3' });
+      expect(root.props.accessibilityActions).toEqual([
+        { name: 'increment' },
+        { name: 'decrement' },
+      ]);
+    });
+  });
+
+  it('does not apply the adjustable role when accessibility is disabled', async () => {
+    renderWithAssets(3, false);
+
+    await waitFor(() => {
+      const root = findGalleryRoot();
+      expect(root.props.accessibilityRole).toBeUndefined();
+      expect(root.props.accessibilityActions).toBeUndefined();
+    });
+  });
+
+  it('moves to the next asset on increment and clamps at the last asset', async () => {
+    const { store } = renderWithAssets(3);
+
+    await waitFor(() => expect(findGalleryRoot().props.accessibilityRole).toBe('adjustable'));
+
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(1);
+
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(2);
+
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(2);
+  });
+
+  it('moves to the previous asset on decrement and clamps at the first asset', async () => {
+    const { store } = renderWithAssets(3);
+
+    await waitFor(() => expect(findGalleryRoot().props.accessibilityRole).toBe('adjustable'));
+
+    act(() => fireAccessibilityAction('increment'));
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(2);
+
+    act(() => fireAccessibilityAction('decrement'));
+    expect(store.state.getLatestValue().currentIndex).toBe(1);
+
+    act(() => fireAccessibilityAction('decrement'));
+    expect(store.state.getLatestValue().currentIndex).toBe(0);
+
+    act(() => fireAccessibilityAction('decrement'));
+    expect(store.state.getLatestValue().currentIndex).toBe(0);
+  });
+});

package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx

@@ -33,7 +33,13 @@ const MessageReminderHeaderWithContext = (props: MessageReminderHeaderPropsWithC
       <Text style={styles.label}>
         {isReminderTimeLeft ? t('Reminder set') : t('Reminder overdue')}
       </Text>
-      <Text style={styles.dot}>·</Text>
+      <Text
+        accessibilityElementsHidden
+        importantForAccessibility='no-hide-descendants'
+        style={styles.dot}
+      >
+        ·
+      </Text>
       <Text style={styles.time}>
         {t('duration/Message reminder', {
           milliseconds: timeLeftMs,

package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx

@@ -43,7 +43,13 @@ const SentToChannelHeaderWithContext = (props: SentToChannelHeaderPropsWithConte
       </Text>
       {showViewText ? (
         <>
-          <Text style={styles.dot}>·</Text>
+          <Text
+            accessibilityElementsHidden
+            importantForAccessibility='no-hide-descendants'
+            style={styles.dot}
+          >
+            ·
+          </Text>
           <Pressable onPress={onPress}>
             <Text style={styles.link}>{t('View')}</Text>
           </Pressable>

package/src/components/Message/MessageItemView/MessageContent.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { ColorValue, Pressable, StyleSheet, View, ViewStyle } from 'react-native';
+import { ColorValue, Platform, Pressable, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { MessageTextContainer } from './MessageTextContainer';
 
@@ -55,6 +55,7 @@ export type MessageContentPropsWithContext = Pick<
   | 'alignment'
   | 'goToMessage'
   | 'groupStyles'
+  | 'hasInteractiveAccessibilityContent'
   | 'isMyMessage'
   | 'message'
   | 'messageContentOrder'
@@ -111,6 +112,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     enableMessageGroupingByUser,
     groupStyles,
     goToMessage,
+    hasInteractiveAccessibilityContent,
     isMessageAIGenerated,
     isMyMessage,
     isVeryLastMessage,
@@ -129,6 +131,10 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   } = props;
   const { client } = useChatContext();
   const accessibilityHint = useA11yLabel('a11y/Double tap and hold to activate contextual menu');
+  const a11ySenderLabel = useA11yLabel(
+    isMyMessage ? 'a11y/Message from you' : 'a11y/Message from {{sender}}',
+    isMyMessage ? undefined : { sender: message.user?.name || message.user?.id || '' },
+  );
   const {
     Attachment,
     FileAttachmentGroup,
@@ -317,22 +323,18 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
       )}
     </>
   );
-
-  // Drop the Pressable's single-focus-stop behavior when the message contains
-  // interactive children (poll options, attachment cells, the quoted-reply
-  // navigator, shared location). Without this, VO/TalkBack subsume those
-  // children into the row's one announcement and they can't be activated.
-  const hasInteractiveContent = !!(
-    message.poll_id ||
-    message.quoted_message ||
-    message.attachments?.length ||
-    message.shared_location
-  );
+  const a11yPressableLabel = useMemo(() => {
+    if (!a11ySenderLabel) return undefined;
+    return message.text && !hasInteractiveAccessibilityContent
+      ? `${a11ySenderLabel}. ${message.text}`
+      : a11ySenderLabel;
+  }, [a11ySenderLabel, hasInteractiveAccessibilityContent, message.text]);
 
   return (
     <Pressable
+      accessibilityLabel={a11yPressableLabel}
       accessibilityHint={accessibilityHint}
-      accessible={hasInteractiveContent ? false : undefined}
+      accessible={hasInteractiveAccessibilityContent ? false : undefined}
       disabled={preventPress}
       onLongPress={(event) => {
         if (onLongPress) {
@@ -382,6 +384,15 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
         ]}
         testID='message-content-wrapper'
       >
+        {a11ySenderLabel && Platform.OS !== 'android' && hasInteractiveAccessibilityContent ? (
+          <View
+            accessibilityLabel={a11ySenderLabel}
+            accessibilityHint={accessibilityHint}
+            accessible
+            pointerEvents='none'
+            style={StyleSheet.absoluteFill}
+          />
+        ) : null}
         {MessageContentTopView ? <MessageContentTopView /> : null}
         {hasContentSideViews ? (
           <View
@@ -414,6 +425,7 @@ const areEqual = (
     preventPress: prevPreventPress,
     goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
+    hasInteractiveAccessibilityContent: prevHasInteractiveAccessibilityContent,
     isAttachmentEqual,
     message: prevMessage,
     messageContentOrder: prevMessageContentOrder,
@@ -427,6 +439,7 @@ const areEqual = (
     preventPress: nextPreventPress,
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
+    hasInteractiveAccessibilityContent: nextHasInteractiveAccessibilityContent,
     message: nextMessage,
     messageContentOrder: nextMessageContentOrder,
     myMessageTheme: nextMyMessageTheme,
@@ -434,6 +447,10 @@ const areEqual = (
     t: nextT,
   } = nextProps;
 
+  if (prevHasInteractiveAccessibilityContent !== nextHasInteractiveAccessibilityContent) {
+    return false;
+  }
+
   if (prevBackgroundColor !== nextBackgroundColor) {
     return false;
   }
@@ -569,8 +586,11 @@ export type MessageContentProps = Partial<MessageContentPropsWithContext>;
 export const MessageContent = (props: MessageContentProps) => {
   const {
     alignment,
+    files,
     goToMessage,
     groupStyles,
+    hasInteractiveAccessibilityContent,
+    images,
     isMessageAIGenerated,
     isMyMessage,
     message,
@@ -581,8 +601,6 @@ export const MessageContent = (props: MessageContentProps) => {
     otherAttachments,
     preventPress,
     threadList,
-    files,
-    images,
     videos,
   } = useMessageContext();
   const {
@@ -637,6 +655,7 @@ export const MessageContent = (props: MessageContentProps) => {
         enableMessageGroupingByUser,
         goToMessage,
         groupStyles,
+        hasInteractiveAccessibilityContent,
         isAttachmentEqual,
         isMessageAIGenerated,
         isMyMessage,