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

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/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/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/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(() => {

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}>

package/src/components/Poll/Poll.tsx

@@ -6,18 +6,14 @@ import { PollOption as PollOptionClass } from 'stream-chat';
 import { PollOption, ShowAllOptionsButton } from './components';
 import { PollUIStateProvider } from './contexts/PollUIStateContext';
 
-import { usePollAccessibilityActions } from './hooks/usePollAccessibilityActions';
-import { usePollAccessibilityLabel } from './hooks/usePollAccessibilityLabel';
 import { usePollState } from './hooks/usePollState';
 
-import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import {
   PollContextProvider,
   PollContextValue,
   useTheme,
   useTranslationContext,
 } from '../../contexts';
-import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 
 import { primitives } from '../../theme';
@@ -54,7 +50,7 @@ export const PollHeader = () => {
   } = useTheme();
 
   return (
-    <View style={styles.headerContainer}>
+    <View accessible accessibilityRole='text' style={styles.headerContainer}>
       <Text style={[styles.headerTitle, header.title]}>{name}</Text>
       <Text style={[styles.headerSubtitle, header.subtitle]}>{subtitle}</Text>
     </View>
@@ -66,10 +62,6 @@ export const PollContent = () => {
   const styles = useStyles();
   const { PollButtons: PollButtonsComponent, PollHeader: PollHeaderComponent } =
     useComponentsContext();
-  const { enabled: a11yEnabled } = useAccessibilityContext();
-  const accessibilityHint = useA11yLabel('a11y/Double tap and hold to activate contextual menu');
-  const accessibilityLabel = usePollAccessibilityLabel();
-  const { accessibilityActions, onAccessibilityAction } = usePollAccessibilityActions();
 
   const {
     theme: {
@@ -79,24 +71,8 @@ export const PollContent = () => {
     },
   } = useTheme();
 
-  // NOTE: Android custom accessibilityActions are broken in RN < 0.83.2 —
-  // see facebook/react-native#47268, fixed by PR #52724. On affected versions
-  // the actions menu surfaces only a subset of the list and dispatch
-  // announces "Action not supported". iOS works correctly on all versions.
-  // Once the SDK's minimum RN reaches 0.83.2, wrap the descendants below in
-  // <View importantForAccessibility='no-hide-descendants'> so Android
-  // TalkBack groups them under the composite rather than exposing each
-  // interactive child as a separate focus stop.
   return (
-    <View
-      accessibilityActions={accessibilityActions}
-      accessibilityHint={accessibilityHint}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole={a11yEnabled ? 'button' : undefined}
-      accessible={a11yEnabled || undefined}
-      onAccessibilityAction={onAccessibilityAction}
-      style={[styles.container, container]}
-    >
+    <View style={[styles.container, container]}>
       <PollHeaderComponent />
       <View style={[styles.optionsWrapper, optionsWrapper]}>
         {options?.slice(0, defaultPollOptionCount)?.map((option: PollOptionClass) => (

package/src/components/Poll/components/PollOption.tsx

@@ -92,6 +92,7 @@ export const PollAllOptions = ({
 
 export const PollOption = ({ option, showProgressBar = true, forceIncoming }: PollOptionProps) => {
   const { latestVotesByOption, voteCountsByOption, voteCount } = usePollState();
+  const { t } = useTranslationContext();
   const styles = useStyles();
 
   const relevantVotes = useMemo(
@@ -141,7 +142,12 @@ export const PollOption = ({ option, showProgressBar = true, forceIncoming }: Po
               />
             ) : null}
 
-            <Text style={[styles.votesText, votesText]}>{voteCountsByOption[option.id] || 0}</Text>
+            <Text
+              accessibilityLabel={t('{{count}} votes', { count: votes })}
+              style={[styles.votesText, votesText]}
+            >
+              {votes}
+            </Text>
           </View>
         </View>
         {showProgressBar ? (

package/src/components/Reply/Reply.tsx

@@ -20,6 +20,7 @@ import {
 
 import { ReplyMessageView } from './ReplyMessageView';
 
+import { useAnnounceOnShow } from '../../a11y/hooks/useAnnounceOnShow';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
@@ -42,6 +43,8 @@ const messageComposerStateStoreSelector = (state: MessageComposerState) => ({
   quotedMessage: state.quotedMessage,
 });
 
+const ANNOUNCEMENT_TEXT_MAX_LENGTH = 120;
+
 const RightContent = React.memo(
   (props: Pick<ReplyPropsWithContext, 'ImageComponent' | 'message'>) => {
     const { ImageComponent, message } = props;
@@ -234,6 +237,43 @@ export const MemoizedReply = React.memo(ReplyWithContext, areEqual) as typeof Re
 export type ReplyProps = Partial<ReplyPropsWithContext> &
   Pick<ReplyPropsWithContext, 'mode' | 'onDismiss'>;
 
+/**
+ * Mounted only when the Reply is rendered as the composer header preview
+ * (edit/reply). Keeps the translation + announcer subscriptions off the
+ * per-row in-message quoted-reply render path.
+ */
+const ReplyComposerAnnouncer = ({
+  message,
+  mode,
+}: {
+  message: ReplyPropsWithContext['quotedMessage'];
+  mode: ReplyPropsWithContext['mode'];
+}) => {
+  const { t } = useTranslationContext();
+  const truncatedText = useMemo(() => {
+    const raw = message?.text?.trim();
+    if (!raw) return undefined;
+    return raw.length > ANNOUNCEMENT_TEXT_MAX_LENGTH
+      ? `${raw.slice(0, ANNOUNCEMENT_TEXT_MAX_LENGTH).trimEnd()}…`
+      : raw;
+  }, [message?.text]);
+  const announcement = useMemo(() => {
+    if (mode === 'edit') {
+      return truncatedText
+        ? t('a11y/Editing message: {{text}}', { text: truncatedText })
+        : t('a11y/Editing message');
+    }
+    const name = message?.user?.name;
+    if (!name) return undefined;
+    return truncatedText
+      ? t('a11y/Replying to {{user}}: {{text}}', { text: truncatedText, user: name })
+      : t('a11y/Replying to {{user}}', { user: name });
+  }, [mode, message?.user?.name, truncatedText, t]);
+
+  useAnnounceOnShow(true, announcement);
+  return null;
+};
+
 export const Reply = (props: ReplyProps) => {
   const { message: messageFromContext } = useMessageContext();
   const { client } = useChatContext();
@@ -251,14 +291,25 @@ export const Reply = (props: ReplyProps) => {
 
   const isMyMessage = client.user?.id === quotedMessage?.user?.id;
 
+  // Composer header passes `onDismiss`; the in-message quoted-reply renderer
+  // does not. Only the composer-preview path pays for announcement work.
+  const isComposerPreview = !!props.onDismiss;
+
   return (
-    <MemoizedReply
-      ImageComponent={ImageComponent}
-      isMyMessage={isMyMessage}
-      message={messageFromContext}
-      quotedMessage={quotedMessage}
-      {...props}
-    />
+    <>
+      {isComposerPreview ? (
+        // Edit passes the message via `quotedMessage` prop; reply uses the
+        // composer-state quoted message we computed locally.
+        <ReplyComposerAnnouncer message={props.quotedMessage ?? quotedMessage} mode={props.mode} />
+      ) : null}
+      <MemoizedReply
+        ImageComponent={ImageComponent}
+        isMyMessage={isMyMessage}
+        message={messageFromContext}
+        quotedMessage={quotedMessage}
+        {...props}
+      />
+    </>
   );
 };
 

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -588,6 +588,8 @@ exports[`Thread should match thread snapshot 1`] = `
                             </View>
                           </View>
                           <View
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               [
                                 {
@@ -920,6 +922,8 @@ exports[`Thread should match thread snapshot 1`] = `
                             </View>
                           </View>
                           <View
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               [
                                 {
@@ -1013,6 +1017,7 @@ exports[`Thread should match thread snapshot 1`] = `
                   testID="date-separator"
                 >
                   <Text
+                    accessibilityLabel="May 5, 2020"
                     style={
                       {
                         "color": "#414552",
@@ -1285,6 +1290,8 @@ exports[`Thread should match thread snapshot 1`] = `
                             </View>
                           </View>
                           <View
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               [
                                 {
@@ -1611,6 +1618,8 @@ exports[`Thread should match thread snapshot 1`] = `
                             </View>
                           </View>
                           <View
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               [
                                 {

package/src/components/ui/Avatar/ChannelAvatar.tsx

@@ -8,10 +8,12 @@ import { UserAvatarGroup } from './AvatarGroup';
 
 import { UserAvatar } from './UserAvatar';
 
+import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
 import { useChannelPreviewDisplayPresence } from '../../../components/ChannelPreview/hooks/useChannelPreviewDisplayPresence';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { hashStringToNumber } from '../../../utils/utils';
+import { CompositeAccessibilityProbe } from '../../Accessibility/CompositeAccessibilityProbe';
 
 export type ChannelAvatarProps = {
   channel: Channel;
@@ -47,34 +49,42 @@ export const ChannelAvatar = (props: ChannelAvatarProps) => {
 
   const channelName = (channel.data?.name as string | undefined) ?? channel.cid;
 
-  if (channelImage) {
-    return (
-      <Avatar
-        backgroundColor={avatarBackgroundColor}
-        imageUrl={channelImage}
-        name={channelName}
-        showBorder={showBorder}
-        size={size}
-      />
-    );
-  }
+  const memberCount = Object.keys(channel.state.members).length;
+  const isGroup = !!channel.data?.name || memberCount > 2;
+  const otherUserName = usersWithoutSelf[0]?.name || usersWithoutSelf[0]?.id;
+  const labelParams = useMemo(
+    () => ({ count: memberCount, name: otherUserName ?? '' }),
+    [memberCount, otherUserName],
+  );
+  const accessibilityLabel = useA11yLabel(
+    isGroup ? 'a11y/Channel with {{count}} members' : 'a11y/Direct chat with {{name}}',
+    labelParams,
+  );
 
-  if (usersWithoutSelf.length > 1) {
-    return (
-      <UserAvatarGroup
-        size={size}
-        users={usersForGroup}
-        showOnlineIndicator={showOnlineIndicator}
-      />
-    );
-  } else {
-    return (
-      <UserAvatar
-        user={usersWithoutSelf[0]}
-        size={size}
-        showBorder={showBorder}
-        showOnlineIndicator={showOnlineIndicator}
-      />
-    );
-  }
+  return (
+    <CompositeAccessibilityProbe label={accessibilityLabel}>
+      {channelImage ? (
+        <Avatar
+          backgroundColor={avatarBackgroundColor}
+          imageUrl={channelImage}
+          name={channelName}
+          showBorder={showBorder}
+          size={size}
+        />
+      ) : usersWithoutSelf.length > 1 ? (
+        <UserAvatarGroup
+          size={size}
+          users={usersForGroup}
+          showOnlineIndicator={showOnlineIndicator}
+        />
+      ) : (
+        <UserAvatar
+          user={usersWithoutSelf[0]}
+          size={size}
+          showBorder={showBorder}
+          showOnlineIndicator={showOnlineIndicator}
+        />
+      )}
+    </CompositeAccessibilityProbe>
+  );
 };

package/src/components/ui/Badge/BadgeNotification.tsx

@@ -9,6 +9,11 @@ export type BadgeNotificationProps = {
   count: number;
   size: 'sm' | 'xs';
   testID?: string;
+  /**
+   * Optional accessibility label override. When provided, screen readers
+   * announce this string instead of the bare count.
+   */
+  accessibilityLabel?: string;
 };
 
 const sizes = {
@@ -34,7 +39,7 @@ const textStyles = {
 };
 
 export const BadgeNotification = (props: BadgeNotificationProps) => {
-  const { type = 'primary', count, size = 'sm', testID } = props;
+  const { accessibilityLabel, type = 'primary', count, size = 'sm', testID } = props;
   const styles = useStyles();
   const {
     theme: { semantics },
@@ -49,7 +54,11 @@ export const BadgeNotification = (props: BadgeNotificationProps) => {
   return (
     <View style={styles.border}>
       <View style={[styles.container, { backgroundColor: colors[type] }, sizes[size]]}>
-        <Text style={[styles.text, textStyles[size]]} testID={testID}>
+        <Text
+          accessibilityLabel={accessibilityLabel}
+          style={[styles.text, textStyles[size]]}
+          testID={testID}
+        >
           {count}
         </Text>
       </View>