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

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,

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

@@ -75,10 +75,18 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
     return null;
   }
 
+  const replyCountLabel =
+    message.reply_count === 1
+      ? t('1 Reply')
+      : t('{{ replyCount }} Replies', { replyCount: message.reply_count });
+
   return (
     <View style={[styles.container, container]}>
       {alignment === 'left' ? connector : null}
       <Pressable
+        accessibilityHint={t('a11y/Double tap to view thread')}
+        accessibilityLabel={replyCountLabel}
+        accessibilityRole='button'
         disabled={preventPress}
         onLongPress={(event) => {
           if (onLongPress) {
@@ -114,13 +122,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
         testID='message-replies'
       >
         <MessageRepliesAvatars />
-        <Text style={[styles.messageRepliesText, messageRepliesText]}>
-          {message.reply_count === 1
-            ? t('1 Reply')
-            : t('{{ replyCount }} Replies', {
-                replyCount: message.reply_count,
-              })}
-        </Text>
+        <Text style={[styles.messageRepliesText, messageRepliesText]}>{replyCountLabel}</Text>
       </Pressable>
       {alignment === 'right' ? connector : null}
     </View>

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

@@ -24,7 +24,11 @@ export const MessageRepliesAvatarsWithContext = (props: MessageRepliesAvatarsPro
   const avatars = message?.thread_participants || [];
 
   return (
-    <View style={avatarStackContainer}>
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility='no-hide-descendants'
+      style={avatarStackContainer}
+    >
       <UserAvatarStack users={avatars} avatarSize='sm' maxVisible={3} overlap={0.4} />
     </View>
   );

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

@@ -31,7 +31,13 @@ export type MessageTextProps = MessageTextContainerProps & {
 
 export type MessageTextContainerPropsWithContext = Pick<
   MessageContextValue,
-  'message' | 'onLongPress' | 'onlyEmojis' | 'onPress' | 'preventPress' | 'isMyMessage'
+  | 'hasInteractiveAccessibilityContent'
+  | 'isMyMessage'
+  | 'message'
+  | 'onLongPress'
+  | 'onlyEmojis'
+  | 'onPress'
+  | 'preventPress'
 > &
   Pick<MessagesContextValue, 'markdownRules' | 'myMessageTheme' | 'messageTextNumberOfLines'> & {
     markdownStyles?: MarkdownStyle;
@@ -45,6 +51,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
   const theme = useTheme();
 
   const {
+    hasInteractiveAccessibilityContent,
     isMyMessage,
     markdownRules,
     markdownStyles: markdownStylesProp = {},
@@ -81,6 +88,8 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
 
   return (
     <View
+      accessible={hasInteractiveAccessibilityContent || undefined}
+      accessibilityRole={hasInteractiveAccessibilityContent ? 'text' : undefined}
       style={[styles.textContainer, textContainer, stylesProp.textContainer]}
       testID='message-text-container'
     >
@@ -113,18 +122,24 @@ const areEqual = (
   nextProps: MessageTextContainerPropsWithContext,
 ) => {
   const {
+    hasInteractiveAccessibilityContent: prevHasInteractiveAccessibilityContent,
     markdownStyles: prevMarkdownStyles,
     message: prevMessage,
     myMessageTheme: prevMyMessageTheme,
     onlyEmojis: prevOnlyEmojis,
   } = prevProps;
   const {
+    hasInteractiveAccessibilityContent: nextHasInteractiveAccessibilityContent,
     markdownStyles: nextMarkdownStyles,
     message: nextMessage,
     myMessageTheme: nextMyMessageTheme,
     onlyEmojis: nextOnlyEmojis,
   } = nextProps;
 
+  if (prevHasInteractiveAccessibilityContent !== nextHasInteractiveAccessibilityContent) {
+    return false;
+  }
+
   const messageStatusEqual = prevMessage.status === nextMessage.status;
   if (!messageStatusEqual) {
     return false;
@@ -182,16 +197,24 @@ const MemoizedMessageTextContainer = React.memo(
 export type MessageTextContainerProps = Partial<MessageTextContainerPropsWithContext>;
 
 export const MessageTextContainer = (props: MessageTextContainerProps) => {
-  const { message, onLongPress, onlyEmojis, onPress, preventPress, isMyMessage } =
-    useMessageContext();
+  const {
+    hasInteractiveAccessibilityContent,
+    isMyMessage,
+    message,
+    onLongPress,
+    onlyEmojis,
+    onPress,
+    preventPress,
+  } = useMessageContext();
   const { markdownRules, messageTextNumberOfLines, myMessageTheme } = useMessagesContext();
 
   return (
     <MemoizedMessageTextContainer
       {...{
+        hasInteractiveAccessibilityContent,
+        isMyMessage,
         markdownRules,
         message,
-        isMyMessage,
         messageTextNumberOfLines,
         myMessageTheme,
         onLongPress,

package/src/components/Message/MessageItemView/ReactionList/ReactionListItem.tsx

@@ -72,6 +72,8 @@ export const ReactionListItem = (props: ReactionListItemProps) => {
 
   return (
     <ReactionListItemWrapper
+      accessibilityRole='button'
+      accessibilityState={{ selected }}
       disabled={preventPress}
       key={reaction.type}
       testID='reaction-list-item'

package/src/components/Message/MessageItemView/__tests__/Message.test.tsx

@@ -171,10 +171,17 @@ describe('Message', () => {
 
     fireEvent(getByTestId('custom-overlay-trigger'), 'longPress');
 
+    // Once the overlay opens, the host layer's `accessibilityViewIsModal`
+    // marks the chat-side subtree as hidden to RNTL. The overlay target's
+    // children are Portal-teleported but their React parent stays in the
+    // chat, so default visibility filtering excludes them. Pass
+    // `includeHiddenElements` to look past the modal-sibling heuristic.
     await waitFor(() => {
-      expect(getByText('outside:normal')).toBeTruthy();
-      expect(getByText('inside:overlay')).toBeTruthy();
-      expect(getByTestId('custom-overlay-target-placeholder')).toBeTruthy();
+      expect(getByText('outside:normal', { includeHiddenElements: true })).toBeTruthy();
+      expect(getByText('inside:overlay', { includeHiddenElements: true })).toBeTruthy();
+      expect(
+        getByTestId('custom-overlay-target-placeholder', { includeHiddenElements: true }),
+      ).toBeTruthy();
     });
   });
 });

package/src/components/Message/MessageItemView/__tests__/MessageReplies.test.tsx

@@ -33,7 +33,11 @@ describe('MessageReplies', () => {
     );
 
     await waitFor(() => {
-      expect(screen.getByTestId('message-replies')).toBeTruthy();
+      const pluralPressable = screen.getByTestId('message-replies');
+      expect(pluralPressable).toBeTruthy();
+      expect(pluralPressable.props.accessibilityRole).toBe('button');
+      expect(pluralPressable.props.accessibilityLabel).toBe('{{ replyCount }} Replies');
+      expect(pluralPressable.props.accessibilityHint).toBe('a11y/Double tap to view thread');
       expect(t).toHaveBeenCalledWith('{{ replyCount }} Replies', {
         replyCount: message.reply_count,
       });
@@ -57,7 +61,11 @@ describe('MessageReplies', () => {
 
     await waitFor(() => {
       expect(onPressMock).toHaveBeenCalled();
-      expect(screen.getByTestId('message-replies')).toBeTruthy();
+      const singularPressable = screen.getByTestId('message-replies');
+      expect(singularPressable).toBeTruthy();
+      expect(singularPressable.props.accessibilityRole).toBe('button');
+      expect(singularPressable.props.accessibilityLabel).toBe('1 Reply');
+      expect(singularPressable.props.accessibilityHint).toBe('a11y/Double tap to view thread');
       expect(t).toHaveBeenCalledWith('1 Reply');
       expect(screen.getByText('1 Reply')).toBeTruthy();
     });

package/src/components/Message/hooks/useCreateMessageContext.ts

@@ -1,5 +1,6 @@
 import { useMemo, useRef } from 'react';
 
+import { useAccessibilityContext } from '../../../contexts/accessibilityContext/AccessibilityContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 
 import { stringifyMessage } from '../../../utils/utils';
@@ -58,7 +59,7 @@ export const useCreateMessageContext = ({
   threadList,
   videos,
   setQuotedMessage,
-}: MessageContextValue) => {
+}: Omit<MessageContextValue, 'hasInteractiveAccessibilityContent'>) => {
   const stableGroupStyles = useStableRefValue(groupStyles);
   const reactionsValue = reactions.map(({ count, own, type }) => `${own}${type}${count}`).join();
   const stringifiedMessage = stringifyMessage({ message });
@@ -70,6 +71,14 @@ export const useCreateMessageContext = ({
     ? stringifyMessage({ includeReactions: false, message: message.quoted_message })
     : '';
 
+  // Resolved here (not at each consumer) so the boolean lives on MessageContext
+  // and downstream components (MessageContent, MessageTextContainer) read it
+  // directly. The predicate's identity is stable in the default case; an
+  // integrator override is expected to be stable too (documented on the config).
+  const { hasInteractiveAccessibilityContent: hasInteractiveAccessibilityContentPredicate } =
+    useAccessibilityContext();
+  const hasInteractiveAccessibilityContent = hasInteractiveAccessibilityContentPredicate(message);
+
   const messageContext: MessageContextValue = useMemo(
     () => ({
       actionsEnabled,
@@ -85,6 +94,7 @@ export const useCreateMessageContext = ({
       hasAttachmentActions,
       handleReaction,
       handleToggleReaction,
+      hasInteractiveAccessibilityContent,
       hasReactions,
       messageHasOnlySingleAttachment,
       images,
@@ -123,6 +133,7 @@ export const useCreateMessageContext = ({
       goToMessage,
       stableGroupStyles,
       hasAttachmentActions,
+      hasInteractiveAccessibilityContent,
       hasReactions,
       messageHasOnlySingleAttachment,
       lastGroupMessage,

package/src/components/MessageInput/__tests__/__snapshots__/AttachButton.test.tsx.snap

@@ -818,6 +818,7 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
     </View>
   </View>
   <View
+    accessibilityViewIsModal={false}
     collapsable={false}
     pointerEvents="box-none"
     style={
@@ -1733,6 +1734,7 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
     </View>
   </View>
   <View
+    accessibilityViewIsModal={false}
     collapsable={false}
     pointerEvents="box-none"
     style={
@@ -2648,6 +2650,7 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
     </View>
   </View>
   <View
+    accessibilityViewIsModal={false}
     collapsable={false}
     pointerEvents="box-none"
     style={

package/src/components/MessageInput/__tests__/__snapshots__/SendButton.test.tsx.snap

@@ -816,6 +816,7 @@ exports[`SendButton should render a SendButton 1`] = `
     </View>
   </View>
   <View
+    accessibilityViewIsModal={false}
     collapsable={false}
     pointerEvents="box-none"
     style={
@@ -1729,6 +1730,7 @@ exports[`SendButton should render a disabled SendButton 1`] = `
     </View>
   </View>
   <View
+    accessibilityViewIsModal={false}
     collapsable={false}
     pointerEvents="box-none"
     style={

package/src/components/MessageList/InlineDateSeparator.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, View } from 'react-native';
 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';
 
 /**
  * Props for the `InlineDateSeparator` component.
@@ -17,7 +17,7 @@ export type InlineDateSeparatorProps = {
 };
 
 export const InlineDateSeparator = ({ date }: InlineDateSeparatorProps) => {
-  const { t, tDateTimeParser } = useTranslationContext();
+  const { t, tDateTimeParser, userLanguage } = useTranslationContext();
   const styles = useStyles();
 
   const dateString = useMemo(
@@ -31,9 +31,16 @@ export const InlineDateSeparator = ({ date }: InlineDateSeparatorProps) => {
     [date, t, tDateTimeParser],
   );
 
+  const a11yDateString = useMemo(
+    () => getDateStringForA11y({ date, tDateTimeParser, userLanguage }),
+    [date, tDateTimeParser, userLanguage],
+  );
+
   return (
     <View style={styles.container} testID='date-separator'>
-      <Text style={styles.text}>{dateString}</Text>
+      <Text accessibilityLabel={a11yDateString} style={styles.text}>
+        {dateString}
+      </Text>
     </View>
   );
 };

package/src/components/MessageMenu/ReactionButton.tsx

@@ -49,17 +49,10 @@ export const ReactionButton = (props: ReactionButtonProps) => {
     () => <Icon size={reactionIconSize ?? 24} />,
     [Icon, reactionIconSize],
   );
-  const selectedLabelState = selected ? 'selected' : 'unselected';
-  const accessibilityLabelParams = useMemo(
-    () => ({ selected: selectedLabelState, type }),
-    [selectedLabelState, type],
-  );
 
   return (
     <View style={styles.reactionButton}>
       <Button
-        accessibilityLabelKey='a11y/reaction-button-{{type}}-{{selected}}'
-        accessibilityLabelParams={accessibilityLabelParams}
         variant={'secondary'}
         type={'outline'}
         iconOnly={!count}

package/src/components/MessageMenu/__tests__/ReactionButton.test.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 
 import { Text } from 'react-native';
 
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+import { cleanup, fireEvent, render } from '@testing-library/react-native';
 
-import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { IconProps } from '../../../icons';
@@ -38,18 +37,6 @@ describe('ReactionButton', () => {
     expect(getByText('24')).toBeTruthy();
   });
 
-  it('uses the released reaction button label when accessibility labels are translated', async () => {
-    render(
-      <OverlayProvider accessibility={{ enabled: true }}>
-        <ReactionButton {...defaultProps} />
-      </OverlayProvider>,
-    );
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('reaction-button-like-unselected')).toBeTruthy();
-    });
-  });
-
   it('should call onPress function with the correct reaction type when pressed', () => {
     const { getByRole } = render(
       <ThemeProvider theme={defaultTheme}>