stream-chat-react-native-core 9.1.3 → 9.2.0-beta.1

package/src/components/Accessibility/hooks/useIncomingMessageAnnouncements.ts

@@ -0,0 +1,157 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import type { Channel, Event, MessageResponse } from 'stream-chat';
+
+import { useAccessibilityContext } from '../../../contexts/accessibilityContext/AccessibilityContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useAccessibilityAnnouncer } from '../useAccessibilityAnnouncer';
+
+const MESSAGE_ANNOUNCEMENT_THROTTLE_MS = 1000;
+
+const isAnnounceableIncomingMessage = (message: MessageResponse, ownUserId?: string): boolean => {
+  const messageUserId = message.user?.id;
+  if (!message.id || !messageUserId || messageUserId === ownUserId) return false;
+  return (
+    message.type !== 'deleted' &&
+    message.type !== 'ephemeral' &&
+    message.type !== 'error' &&
+    message.type !== 'system' &&
+    message.status !== 'failed' &&
+    message.status !== 'sending'
+  );
+};
+
+const getSenderName = (
+  message: MessageResponse,
+  t: ReturnType<typeof useTranslationContext>['t'],
+) => message.user?.name?.trim() || message.user?.id || t('Anonymous');
+
+export type UseIncomingMessageAnnouncementsParams = {
+  activeThreadId?: string;
+  channel?: Channel;
+  ownUserId?: string;
+  threadList?: boolean;
+};
+
+/**
+ * Mirrors stream-chat-react's `useIncomingMessageAnnouncements`:
+ *  - 1 message → "New message from {{user}}"
+ *  - >1 messages within throttle window → "{{count}} new messages"
+ *  - Throttled to one announcement per second
+ *  - Bounded `announcedMessageIds` set so a long-running session does not leak.
+ *
+ * Subscribes to `channel.on('message.new')`. When AccessibilityContext.enabled
+ * is false OR `announceNewMessages` is false, the hook is a no-op (no
+ * subscription is opened, no listener cost is paid).
+ */
+export const useIncomingMessageAnnouncements = ({
+  activeThreadId,
+  channel,
+  ownUserId,
+  threadList = false,
+}: UseIncomingMessageAnnouncementsParams) => {
+  const { announceNewMessages, enabled } = useAccessibilityContext();
+  const announce = useAccessibilityAnnouncer();
+  const { t } = useTranslationContext();
+  const lastAnnouncementTimestampRef = useRef(0);
+  const flushTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const announcedMessageIdsRef = useRef(new Set<string>());
+  const pendingAnnouncementBatchRef = useRef<{ count: number; firstSender: string | null }>({
+    count: 0,
+    firstSender: null,
+  });
+
+  const flushPendingAnnouncements = useCallback(() => {
+    const pending = pendingAnnouncementBatchRef.current;
+    if (pending.count <= 0) return;
+
+    if (pending.count === 1) {
+      announce(
+        t('a11y/New message from {{user}}', {
+          user: pending.firstSender || t('Anonymous'),
+        }),
+      );
+    } else {
+      announce(t('a11y/{{count}} new messages', { count: pending.count }));
+    }
+
+    pending.count = 0;
+    pending.firstSender = null;
+    lastAnnouncementTimestampRef.current = Date.now();
+  }, [announce, t]);
+
+  const scheduleFlush = useCallback(() => {
+    if (flushTimeoutRef.current) return;
+    const now = Date.now();
+    const elapsed = now - lastAnnouncementTimestampRef.current;
+    if (elapsed >= MESSAGE_ANNOUNCEMENT_THROTTLE_MS) {
+      flushPendingAnnouncements();
+      return;
+    }
+    flushTimeoutRef.current = setTimeout(() => {
+      flushTimeoutRef.current = undefined;
+      flushPendingAnnouncements();
+    }, MESSAGE_ANNOUNCEMENT_THROTTLE_MS - elapsed);
+  }, [flushPendingAnnouncements]);
+
+  useEffect(
+    () => () => {
+      if (flushTimeoutRef.current) clearTimeout(flushTimeoutRef.current);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!enabled || !announceNewMessages || !channel) return;
+
+    const handleMessageNew = (event: Event) => {
+      const message = event.message;
+      if (!message) return;
+      if (
+        (event.cid && event.cid !== channel.cid) ||
+        !isAnnounceableIncomingMessage(message, ownUserId)
+      ) {
+        return;
+      }
+
+      const isReply = !!message.parent_id;
+      const belongsToActiveThread = !!activeThreadId && message.parent_id === activeThreadId;
+      const shouldAnnounceInThreadList = threadList && belongsToActiveThread;
+      const shouldAnnounceInMainList = !threadList && !isReply;
+      if (!shouldAnnounceInThreadList && !shouldAnnounceInMainList) return;
+
+      if (announcedMessageIdsRef.current.has(message.id || '')) return;
+      if (message.id) {
+        if (announcedMessageIdsRef.current.size > 500) {
+          announcedMessageIdsRef.current.clear();
+        }
+        announcedMessageIdsRef.current.add(message.id);
+      }
+
+      pendingAnnouncementBatchRef.current.count += 1;
+      if (!pendingAnnouncementBatchRef.current.firstSender) {
+        pendingAnnouncementBatchRef.current.firstSender = getSenderName(message, t);
+      }
+
+      scheduleFlush();
+    };
+
+    const subscription = channel.on('message.new', handleMessageNew);
+    return () => {
+      subscription.unsubscribe();
+      if (flushTimeoutRef.current) {
+        clearTimeout(flushTimeoutRef.current);
+        flushTimeoutRef.current = undefined;
+      }
+    };
+  }, [
+    activeThreadId,
+    announceNewMessages,
+    channel,
+    enabled,
+    ownUserId,
+    scheduleFlush,
+    t,
+    threadList,
+  ]);
+};

package/src/components/Accessibility/index.ts

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

package/src/components/Accessibility/useAccessibilityAnnouncer.ts

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+
+export type AccessibilityAnnouncePriority = 'assertive' | 'polite';
+export type AccessibilityAnnounce = (
+  message: string,
+  priority?: AccessibilityAnnouncePriority,
+) => void;
+
+export type AccessibilityAnnouncerContextValue = {
+  announce: AccessibilityAnnounce;
+};
+
+const noopAnnounce: AccessibilityAnnounce = () => undefined;
+
+export const AccessibilityAnnouncerContext = createContext<
+  AccessibilityAnnouncerContextValue | undefined
+>(undefined);
+
+/**
+ * Returns the imperative announcer. When called outside the AccessibilityProvider's
+ * announcer context (which happens any time the SDK's a11y is disabled), this
+ * returns a no-op.
+ *
+ * Mirrors the React SDK's `useAriaLiveAnnouncer` so cross-SDK code reads the same.
+ */
+export const useAccessibilityAnnouncer = (): AccessibilityAnnounce => {
+  const contextValue = useContext(AccessibilityAnnouncerContext);
+  if (!contextValue) return noopAnnounce;
+  return contextValue.announce;
+};

package/src/components/Channel/Channel.tsx

@@ -49,6 +49,7 @@ import {
   AudioPlayerContextProps,
   AudioPlayerProvider,
 } from '../../contexts/audioPlayerContext/AudioPlayerContext';
+
 import { ChannelContextValue, ChannelProvider } from '../../contexts/channelContext/ChannelContext';
 import type { UseChannelStateValue } from '../../contexts/channelsStateContext/useChannelState';
 import { useChannelState } from '../../contexts/channelsStateContext/useChannelState';
@@ -111,6 +112,7 @@ import {
   MessageStatusTypes,
   ReactionData,
 } from '../../utils/utils';
+import { NotificationAnnouncer } from '../Accessibility/NotificationAnnouncer';
 import { AttachmentPicker } from '../AttachmentPicker/AttachmentPicker';
 import type { KeyboardCompatibleViewProps } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { Emoji } from '../MessageMenu/EmojiPickerList';
@@ -1754,6 +1756,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
                     <MessageComposerProvider value={messageComposerContext}>
                       <MessageInputProvider value={inputMessageInputContext}>
                         <AudioPlayerProvider value={audioPlayerContext}>
+                          <NotificationAnnouncer />
                           <View style={{ height: '100%' }}>{children}</View>
                           <AttachmentPicker />
                         </AudioPlayerProvider>

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -5,6 +5,7 @@ import { LocalMessage, MessageResponse } from 'stream-chat';
 
 import { ChannelPreviewProps } from './ChannelPreview';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -61,6 +62,18 @@ export const ChannelMessagePreviewDeliveryStatus = ({
     isReadEventsEnabled: readEvents,
   });
 
+  const statusLabel = useA11yLabel(
+    message.status === MessageStatusTypes.SENDING
+      ? 'a11y/Sending'
+      : message.status === MessageStatusTypes.RECEIVED && status === MessageDeliveryStatus.READ
+        ? 'a11y/Read'
+        : status === MessageDeliveryStatus.DELIVERED
+          ? 'a11y/Delivered'
+          : status === MessageDeliveryStatus.SENT
+            ? 'a11y/Sent'
+            : 'a11y/Sending',
+  );
+
   if (!channel.data?.name && membersWithoutSelf.length === 1 && !isLastMessageByCurrentUser) {
     return null;
   }
@@ -70,7 +83,7 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   }
 
   return (
-    <View style={styles.container}>
+    <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 &&

package/src/components/Indicators/LoadingDots.tsx

@@ -31,7 +31,11 @@ export const LoadingDots = (props: Props) => {
   const offsetLength = duration / numberOfDots;
 
   return (
-    <View style={[{ flexDirection: 'row' }, container, style]}>
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility='no-hide-descendants'
+      style={[{ flexDirection: 'row' }, container, style]}
+    >
       {Array.from(Array(numberOfDots)).map((_item, index) => (
         <LoadingDot
           diameter={diameter}

package/src/components/Indicators/LoadingErrorIndicator.tsx

@@ -16,7 +16,13 @@ const LoadingErrorWrapper = (props: React.PropsWithChildren<LoadingErrorWrapperP
   const styles = useStyles();
 
   return (
-    <TouchableOpacity onPress={onPress} style={styles.container}>
+    <TouchableOpacity
+      accessibilityHint={onPress ? 'Tap to retry' : undefined}
+      accessibilityLiveRegion='assertive'
+      accessibilityRole={onPress ? 'button' : 'alert'}
+      onPress={onPress}
+      style={styles.container}
+    >
       <Text style={styles.errorText} testID='loading-error'>
         {text}
       </Text>

package/src/components/Indicators/LoadingIndicator.tsx

@@ -12,7 +12,7 @@ const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
   const styles = useStyles();
 
   return (
-    <View style={styles.container}>
+    <View accessibilityLiveRegion='polite' accessibilityRole='progressbar' style={styles.container}>
       <Spinner height={20} width={20} />
       {text ? (
         <Text style={styles.loadingText} testID='loading'>

package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.tsx.snap

@@ -34,6 +34,8 @@ exports[`MessageAuthor should render message author 1`] = `
       testID="avatar-image"
     >
       <Image
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
         onError={[Function]}
         source={
           {

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

@@ -36,13 +36,14 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
         }
       >
         <View
+          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
               "disabled": false,
               "expanded": undefined,
-              "selected": undefined,
+              "selected": false,
             }
           }
           accessibilityValue={
@@ -196,13 +197,14 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -335,13 +337,14 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -503,13 +506,14 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -638,13 +642,14 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -905,13 +910,14 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
         }
       >
         <View
+          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
               "disabled": false,
               "expanded": undefined,
-              "selected": undefined,
+              "selected": false,
             }
           }
           accessibilityValue={
@@ -1065,13 +1071,14 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1204,13 +1211,14 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1372,13 +1380,14 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1507,13 +1516,14 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1774,13 +1784,14 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
         }
       >
         <View
+          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
               "disabled": true,
               "expanded": undefined,
-              "selected": undefined,
+              "selected": false,
             }
           }
           accessibilityValue={
@@ -1934,13 +1945,14 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -2073,13 +2085,14 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -2241,13 +2254,14 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -2376,13 +2390,14 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={