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

package/lib/typescript/utils/i18n/Streami18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Streami18n.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n/Streami18n.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Streami18n.d.ts","sourceRoot":"","sources":["../../../../src/utils/i18n/Streami18n.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "9.3.1-beta.6",
+  "version": "9.3.1-beta.7",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/a11y/hooks/useAnnounceOnShow.ts

@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+
+import { useAccessibilityAnnouncer } from '../../components/Accessibility/useAccessibilityAnnouncer';
+
+type Options = {
+  /** Delay before the announcement fires; lets entrance animations settle. */
+  delayMs?: number;
+  priority?: 'polite' | 'assertive';
+};
+
+/**
+ * Announces `message` once each time `visible` flips from false to true.
+ * Resets when `visible` flips back to false, so the next show re-announces —
+ * unlike `useAnnounceOnStateChange`, which announces on string change and
+ * dedupes consecutive identical strings.
+ *
+ * Use this for transient surfaces that appear and disappear repeatedly within
+ * a session (modals, autocomplete pickers, bottom sheets) where the user
+ * benefits from hearing the affordance on every reappearance.
+ *
+ * When `message` is undefined (typically because `useA11yLabel` returned
+ * undefined — a11y disabled or key missing), the hook is a no-op.
+ */
+export const useAnnounceOnShow = (
+  visible: boolean,
+  message: string | undefined,
+  { delayMs = 500, priority = 'polite' }: Options = {},
+) => {
+  const announce = useAccessibilityAnnouncer();
+  const announcedRef = useRef(false);
+
+  useEffect(() => {
+    if (!visible) {
+      announcedRef.current = false;
+      return;
+    }
+    if (!message || announcedRef.current) return;
+    const id = setTimeout(() => {
+      announce(message, priority);
+      announcedRef.current = true;
+    }, delayMs);
+    return () => clearTimeout(id);
+  }, [visible, message, announce, priority, delayMs]);
+};

package/src/a11y/index.ts

@@ -3,5 +3,6 @@ export * from './hooks/useScreenReaderEnabled';
 export * from './hooks/useReducedMotionPreference';
 export * from './hooks/useResolvedModalAccessibilityProps';
 export * from './hooks/useAnnounceOnStateChange';
+export * from './hooks/useAnnounceOnShow';
 export * from './hooks/useA11yLabel';
 export * from './hooks/useAccessibilityActivateAction';

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/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__/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');