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

package/src/components/Accessibility/CompositeAccessibilityProbe.tsx

@@ -0,0 +1,48 @@
+import React, { PropsWithChildren } from 'react';
+import { View } from 'react-native';
+
+import { HiddenA11yText } from './HiddenA11yText';
+
+export type CompositeAccessibilityProbeProps = {
+  /**
+   * The accessibility label that VoiceOver / TalkBack should announce for the
+   * wrapped content. When `undefined`, the probe is a no-op and the children
+   * render with no a11y modifications — use this to skip the wrapper when the
+   * SDK's a11y opt-in is off.
+   */
+  label: string | undefined;
+};
+
+/**
+ * Wraps decorative visual content with a single, cross platform stable
+ * accessibility focus stop carrying the provided `label`.
+ *
+ * iOS auto collapses descendants when a parent View is `accessible`, but on
+ * Android `importantForAccessibility='no-hide-descendants'` on the parent
+ * gets defeated by deeply nested descendants that set their own
+ * `accessible={true}` (our SDK's `<Avatar>` does this). A zero size accessible
+ * `<Text>` sidesteps that - Text is always accessible by default on both
+ * platforms and carries the label cleanly, while the visual subtree is
+ * marked decorative. More importantly, it's discoverable very very easily
+ * by screen readers.
+ *
+ * Use this anywhere you have non-Text visual content (avatars, icons,
+ * composed graphics) that should announce as a single semantic unit with a
+ * curated label, rather than letting screen readers walk the visual tree
+ * verbosely.
+ */
+export const CompositeAccessibilityProbe = ({
+  children,
+  label,
+}: PropsWithChildren<CompositeAccessibilityProbeProps>) => {
+  if (!label) return <>{children}</>;
+
+  return (
+    <>
+      <HiddenA11yText label={label} />
+      <View accessibilityElementsHidden importantForAccessibility='no-hide-descendants'>
+        {children}
+      </View>
+    </>
+  );
+};

package/src/components/Accessibility/HiddenA11yText.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+export type HiddenA11yTextProps = {
+  /**
+   * The text to inject into the accessibility tree. Rendered as actual Text
+   * content (not as `accessibilityLabel`) so the parent's compose loop on
+   * Android picks it up — Text without its own label isn't
+   * `isAccessibilityFocusable`, so it gets concatenated into the parent's
+   * announcement rather than being skipped as a drill-in target.
+   *
+   * Pass the result of `useA11yLabel(...)` directly: when SDK a11y is
+   * opt-out the value is `undefined` and the component renders nothing.
+   */
+  label: string | undefined;
+};
+
+/**
+ * A visually invisible Text that exists only to contribute extra information
+ * to a screen reader's announcement. Use it inside a parent that auto-composes
+ * descendant labels (Pressable, or any View with `accessible` + `accessibilityRole`)
+ * to splice in supplementary state like "you reacted", "and N more", etc.
+ *
+ * Not for "this whole element should be one focus stop with a curated label" -
+ * use `CompositeAccessibilityProbe` for that.
+ */
+export const HiddenA11yText = ({ label }: HiddenA11yTextProps) => {
+  if (!label) return null;
+  // Both content and accessibilityLabel are set to the same string. Content
+  // keeps the Text on the parent's compose loop (label-only would make it
+  // `isAccessibilityFocusable` and potentially skipped on Android — though
+  // the opacity:0 hidden style usually saves it). accessibilityLabel keeps
+  // testing-library `getByLabelText(...)` queries working.
+  return (
+    <Text accessibilityLabel={label} style={styles.hidden}>
+      {label}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  hidden: {
+    height: 1,
+    opacity: 0,
+    overflow: 'hidden',
+    position: 'absolute',
+    width: 1,
+  },
+});

package/src/components/Accessibility/index.ts

@@ -1,3 +1,5 @@
+export * from './CompositeAccessibilityProbe';
+export * from './HiddenA11yText';
 export * from './NotificationAnnouncer';
 export * from './useAccessibilityAnnouncer';
 export * from './hooks/useIncomingMessageAnnouncements';

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,6 +4,7 @@ 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';
 
@@ -35,11 +36,16 @@ export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
     [created_at, t, tDateTimeParser],
   );
 
+  const visibleDate =
+    formatLatestMessageDate && latestMessageDate
+      ? formatLatestMessageDate(latestMessageDate).toString()
+      : formattedDate;
+  const labelParams = useMemo(() => ({ date: visibleDate ?? '' }), [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/Message/MessageItemView/MessageBubble.tsx

@@ -100,7 +100,6 @@ export const SwipableMessageWrapper = React.memo(function SwipableMessageWrapper
               dampingRatio: 1,
               duration: 500,
               overshootClamping: true,
-              stiffness: 1,
             },
             () => {
               runOnJS(setShouldRenderAnimatedWrapper)(false);

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

@@ -318,10 +318,21 @@ 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
+  );
+
   return (
     <Pressable
       accessibilityHint={accessibilityHint}
-      accessible={message.poll_id ? false : undefined}
+      accessible={hasInteractiveContent ? false : undefined}
       disabled={preventPress}
       onLongPress={(event) => {
         if (onLongPress) {

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

@@ -69,7 +69,12 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
   const isEdited = isEditedMessage(message) && !isAIGenerated;
 
   return (
-    <View style={[styles.container, container]} testID='message-status-time'>
+    <View
+      accessible
+      accessibilityRole='text'
+      style={[styles.container, container]}
+      testID='message-status-time'
+    >
       {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
         <Text numberOfLines={1} ellipsizeMode='tail' style={[styles.name, name]}>
           {message.user.name}

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

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import {
   MessageContextValue,
@@ -12,6 +13,7 @@ import { CheckAll } from '../../../icons/checks';
 import { Time } from '../../../icons/clock';
 import { primitives } from '../../../theme';
 import { MessageStatusTypes } from '../../../utils/utils';
+import { HiddenA11yText } from '../../Accessibility/HiddenA11yText';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 
 export type MessageStatusPropsWithContext = Pick<
@@ -32,10 +34,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
     },
   } = useTheme();
 
-  if (message.status === MessageStatusTypes.FAILED || message.type === 'error') {
-    return null;
-  }
-
   const hasReadByGreaterThanOne = typeof readBy === 'number' && readBy > 1;
 
   // Variables to determine the status of the message
@@ -48,42 +46,41 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
     !read &&
     message.type !== 'ephemeral';
 
+  const accessibilityLabel = useA11yLabel(
+    read
+      ? 'a11y/Read'
+      : delivered
+        ? 'a11y/Delivered'
+        : sending
+          ? 'a11y/Sending'
+          : sent
+            ? 'a11y/Sent'
+            : '',
+  );
+
+  if (message.status === MessageStatusTypes.FAILED || message.type === 'error') {
+    return null;
+  }
+
   return (
-    <View style={[styles.container, container]}>
-      {read ? (
-        <CheckAll
-          height={16}
-          stroke={styles.readCheck.color}
-          width={16}
-          accessibilityLabel='Read'
-          {...checkAllIcon}
-        />
-      ) : delivered ? (
-        <CheckAll
-          stroke={styles.deliveredCheck.color}
-          height={16}
-          width={16}
-          accessibilityLabel='Delivered'
-          {...checkAllIcon}
-        />
-      ) : sending ? (
-        <Time
-          stroke={styles.sendingCheck.color}
-          height={16}
-          width={16}
-          accessibilityLabel='Sending'
-          {...timeIcon}
-        />
-      ) : sent ? (
-        <Check
-          stroke={styles.sentCheck.color}
-          height={16}
-          width={16}
-          accessibilityLabel='Sent'
-          {...checkIcon}
-        />
-      ) : null}
-    </View>
+    <>
+      <HiddenA11yText label={accessibilityLabel} />
+      <View
+        accessibilityElementsHidden={!!accessibilityLabel}
+        importantForAccessibility={accessibilityLabel ? 'no-hide-descendants' : undefined}
+        style={[styles.container, container]}
+      >
+        {read ? (
+          <CheckAll height={16} stroke={styles.readCheck.color} width={16} {...checkAllIcon} />
+        ) : delivered ? (
+          <CheckAll stroke={styles.deliveredCheck.color} height={16} width={16} {...checkAllIcon} />
+        ) : sending ? (
+          <Time stroke={styles.sendingCheck.color} height={16} width={16} {...timeIcon} />
+        ) : sent ? (
+          <Check stroke={styles.sentCheck.color} height={16} width={16} {...checkIcon} />
+        ) : null}
+      </View>
+    </>
   );
 };
 

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

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, ViewStyle } from 'react-native';
 
 import { ReactionListItemWrapper } from './ReactionListItemWrapper';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import {
   MessageContextValue,
   useMessageContext,
@@ -19,6 +20,7 @@ import type { IconProps } from '../../../../icons/utils/base';
 
 import { primitives } from '../../../../theme';
 import type { ReactionData } from '../../../../utils/utils';
+import { HiddenA11yText } from '../../../Accessibility/HiddenA11yText';
 
 type Props = Pick<IconProps, 'pathFill' | 'style'> & {
   size: number;
@@ -65,6 +67,8 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
     },
   } = useTheme();
   const styles = useStyles();
+  const accessibilityHint = useA11yLabel('a11y/Double tap to view reactions');
+  const youReacted = useA11yLabel('a11y/you reacted');
   const supportedReactionTypes = supportedReactions?.map(
     (supportedReaction) => supportedReaction.type,
   );
@@ -72,6 +76,9 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
   const moreReactionsCount = reactionsCount - 4;
   const reactionsCountText =
     moreReactionsCount < 99 ? moreReactionsCount : `+${moreReactionsCount}`;
+  const moreReactionsA11yText = useA11yLabel('a11y/and {{count}} more reactions', {
+    count: moreReactionsCount,
+  });
 
   const hasSupportedReactions = reactions?.some((reaction) =>
     supportedReactionTypes?.includes(reaction.type),
@@ -83,6 +90,8 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
 
   return (
     <ReactionListItemWrapper
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
       disabled={preventPress}
       onPress={(event) => {
         if (onPress) {
@@ -111,18 +120,23 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
         }
       }}
       style={containerStyle}
-      accessibilityLabel={accessibilityLabel}
     >
       {reactions?.slice(0, 4).map((reaction) => (
-        <Icon
-          key={reaction.type}
-          size={icon.size}
-          style={[styles.iconStyle, icon.style]}
-          supportedReactions={supportedReactions}
-          type={reaction.type}
-        />
+        <Fragment key={reaction.type}>
+          <Icon
+            size={icon.size}
+            style={[styles.iconStyle, icon.style]}
+            supportedReactions={supportedReactions}
+            type={reaction.type}
+          />
+          {reaction.own ? <HiddenA11yText label={youReacted} /> : null}
+        </Fragment>
       ))}
-      {reactionsCount > 4 ? <Text style={styles.reactionCount}>{reactionsCountText}</Text> : null}
+      {reactionsCount > 4 ? (
+        <Text accessibilityLabel={moreReactionsA11yText} style={styles.reactionCount}>
+          {reactionsCountText}
+        </Text>
+      ) : null}
     </ReactionListItemWrapper>
   );
 };

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

@@ -3,6 +3,7 @@ import { StyleSheet, Text } from 'react-native';
 
 import { ReactionListItemWrapper } from './ReactionListItemWrapper';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
 import { MessagesContextValue } from '../../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
@@ -13,6 +14,7 @@ import type { IconProps } from '../../../../icons/utils/base';
 
 import { primitives } from '../../../../theme';
 import type { ReactionData } from '../../../../utils/utils';
+import { HiddenA11yText } from '../../../Accessibility/HiddenA11yText';
 import { ReactionSummary } from '../../hooks/useProcessReactions';
 
 type Props = Pick<IconProps, 'pathFill' | 'style'> & {
@@ -66,12 +68,13 @@ export const ReactionListItem = (props: ReactionListItemProps) => {
     },
   } = useTheme();
   const styles = useStyles();
+  const youReacted = useA11yLabel('a11y/you reacted');
 
   return (
     <ReactionListItemWrapper
-      accessibilityLabel='Reaction List Item'
       disabled={preventPress}
       key={reaction.type}
+      testID='reaction-list-item'
       onLongPress={(event) => {
         if (onLongPress) {
           onLongPress({
@@ -121,6 +124,7 @@ export const ReactionListItem = (props: ReactionListItemProps) => {
         type={reaction.type}
       />
       {showCount ? <Text style={styles.reactionCount}>{reaction.count}</Text> : null}
+      {selected ? <HiddenA11yText label={youReacted} /> : null}
     </ReactionListItemWrapper>
   );
 };

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

@@ -136,9 +136,16 @@ describe('MessageItemView', () => {
     renderMessage({ message });
 
     await waitFor(() => {
-      const gestureDetector = screen.UNSAFE_getByType(GestureDetector);
+      const gestureDetectors = screen.UNSAFE_getAllByType(GestureDetector);
+      const wrapsMessageItemView = gestureDetectors.some((detector) => {
+        try {
+          return Boolean(detector.findByProps({ testID: 'message-item-view-wrapper' }));
+        } catch {
+          return false;
+        }
+      });
 
-      expect(gestureDetector.findByProps({ testID: 'message-item-view-wrapper' })).toBeTruthy();
+      expect(wrapsMessageItemView).toBe(true);
     });
   });
 

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

@@ -5,6 +5,7 @@ import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
 import { Channel } from '../../..';
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+import { OverlayProvider } from '../../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
 import { generateChannelResponse } from '../../../../mock-builders/generator/channel';
@@ -54,13 +55,15 @@ describe('MessageStatus', () => {
     channelProps?: Partial<React.ComponentProps<typeof Channel>>,
   ) =>
     render(
-      <ChannelsStateProvider>
-        <Chat client={chatClient}>
-          <Channel channel={channel} {...channelProps}>
-            <MessageStatus {...options} />
-          </Channel>
-        </Chat>
-      </ChannelsStateProvider>,
+      <OverlayProvider accessibility={{ enabled: true }}>
+        <ChannelsStateProvider>
+          <Chat client={chatClient}>
+            <Channel channel={channel} {...channelProps}>
+              <MessageStatus {...options} />
+            </Channel>
+          </Chat>
+        </ChannelsStateProvider>
+      </OverlayProvider>,
     );
 
   // NOTE: Original source had `it.each('string', async () => { ... })` which was a

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

@@ -168,7 +168,7 @@ describe('ReactionListBottom', () => {
       { reactionListPosition: 'bottom', reactionListType: 'segmented' },
     );
 
-    const reactionListBottomItem = screen.getByLabelText('Reaction List Item');
+    const reactionListBottomItem = screen.getByTestId('reaction-list-item');
 
     fireEvent(reactionListBottomItem, 'onPress');
 

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

@@ -5,10 +5,12 @@ import { UserResponse } from 'stream-chat';
 
 import { useUserMuteActive } from './useUserMuteActive';
 
+import { useScreenReaderEnabled } from '../../../a11y/hooks/useScreenReaderEnabled';
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import { MessageComposerAPIContextValue } from '../../../contexts/messageComposerContext/MessageComposerAPIContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
+import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -67,6 +69,8 @@ export const useMessageActionHandlers = ({
   Pick<MessageComposerAPIContextValue, 'setEditingState' | 'setQuotedMessage'>) => {
   const { t } = useTranslationContext();
   const { addNotification } = useNotificationApi();
+  const { inputBoxRef } = useMessageInputContext();
+  const screenReaderEnabled = useScreenReaderEnabled();
   const handleResendMessage = useStableCallback(() => retrySendMessage(message));
   const translatedMessage = useTranslatedMessage(message);
 
@@ -74,6 +78,9 @@ export const useMessageActionHandlers = ({
 
   const handleQuotedReplyMessage = useStableCallback(() => {
     setQuotedMessage(message);
+    if (screenReaderEnabled) {
+      inputBoxRef.current?.focus();
+    }
   });
 
   const handleCopyMessage = useStableCallback(() => {