stream-chat-react-native-core 9.3.0 → 9.3.1-beta.10

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

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

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

@@ -30,7 +30,7 @@ export type MessageWrapperProps = {
   nextMessage?: LocalMessage;
 };
 
-export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
+export const MessageWrapper = React.memo(function MessageWrapper(props: MessageWrapperProps) {
   const { message, previousMessage, nextMessage } = props;
   const { client } = useChatContext();
   const {
@@ -114,16 +114,14 @@ export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
         <MessageSystem message={message} style={messageContainer} />
       ) : wrapMessageInTheme ? (
         <ThemeProvider mergedStyle={modifiedTheme}>
-          <View testID={`message-list-item-${message.id}`}>
-            {renderDateSeperator}
-            {renderMessage}
-          </View>
+          {renderDateSeperator}
+          {renderMessage}
         </ThemeProvider>
       ) : (
-        <View testID={`message-list-item-${message.id}`}>
+        <>
           {renderDateSeperator}
           {renderMessage}
-        </View>
+        </>
       )}
       {showUnreadUnderlay && (
         <View style={styles.unreadUnderlayContainer}>

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,20 +120,23 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
         }
       }}
       style={containerStyle}
-      accessibilityLabel={accessibilityLabel}
     >
-      {reactions
-        ?.slice(0, 4)
-        .map((reaction) => (
+      {reactions?.slice(0, 4).map((reaction) => (
+        <Fragment key={reaction.type}>
           <Icon
-            key={reaction.type}
             size={icon.size}
             style={[styles.iconStyle, icon.style]}
             supportedReactions={supportedReactions}
             type={reaction.type}
           />
-        ))}
-      {reactionsCount > 4 ? <Text style={styles.reactionCount}>{reactionsCountText}</Text> : null}
+          {reaction.own ? <HiddenA11yText label={youReacted} /> : null}
+        </Fragment>
+      ))}
+      {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,15 @@ export const ReactionListItem = (props: ReactionListItemProps) => {
     },
   } = useTheme();
   const styles = useStyles();
+  const youReacted = useA11yLabel('a11y/you reacted');
 
   return (
     <ReactionListItemWrapper
-      accessibilityLabel='Reaction List Item'
+      accessibilityRole='button'
+      accessibilityState={{ selected }}
       disabled={preventPress}
       key={reaction.type}
+      testID='reaction-list-item'
       onLongPress={(event) => {
         if (onLongPress) {
           onLongPress({
@@ -121,6 +126,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__/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__/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__/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/MessageItemView/utils/renderText.tsx

@@ -101,6 +101,37 @@ const defaultMarkdownStyles: MarkdownStyle = {
     fontSize: primitives.typographyFontSizeMd,
     lineHeight: primitives.typographyLineHeightNormal,
   },
+  // Heading sizes are derived from the body font size (`typographyFontSizeMd`) so they
+  // scale with the integrator's typography settings. lineHeight = fontSize × 1.25 to
+  // give headings room to breathe. Both fields are required here: without lineHeight,
+  // the inherited `lineHeight: typographyLineHeightNormal` (20) from `styles.text` (set
+  // in renderText below) leaks into the heading's inner Text via the markdown library's
+  // text rule (`{...styles.text, ...state.style}`) and squishes larger heading fontSizes
+  // into a 20px line box.
+  heading1: {
+    fontSize: primitives.typographyFontSizeMd * 2,
+    lineHeight: primitives.typographyFontSizeMd * 2 * 1.25,
+  },
+  heading2: {
+    fontSize: primitives.typographyFontSizeMd * 1.5,
+    lineHeight: primitives.typographyFontSizeMd * 1.5 * 1.25,
+  },
+  heading3: {
+    fontSize: primitives.typographyFontSizeMd * 1.25,
+    lineHeight: primitives.typographyFontSizeMd * 1.25 * 1.25,
+  },
+  heading4: {
+    fontSize: primitives.typographyFontSizeMd,
+    lineHeight: primitives.typographyFontSizeMd * 1.25,
+  },
+  heading5: {
+    fontSize: primitives.typographyFontSizeMd * 0.875,
+    lineHeight: primitives.typographyFontSizeMd * 0.875 * 1.25,
+  },
+  heading6: {
+    fontSize: primitives.typographyFontSizeMd * 0.75,
+    lineHeight: primitives.typographyFontSizeMd * 0.75 * 1.25,
+  },
   inlineCode: {
     padding: primitives.spacingXxs,
     paddingHorizontal: primitives.spacingXxs,

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/Message/hooks/useMessageDeliveryData.ts

@@ -1,14 +1,18 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Event, LocalMessage, UserResponse } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStableCallback } from '../../../hooks';
 
 export const useMessageDeliveredData = ({ message }: { message?: LocalMessage }) => {
   const { channel } = useChannelContext();
   const { client } = useChatContext();
-  const calculate = useCallback(() => {
+
+  const messageIdRef = useRef<string>(message?.id);
+
+  const calculate = useStableCallback(() => {
     if (!message?.created_at) {
       return [];
     }
@@ -17,13 +21,14 @@ export const useMessageDeliveredData = ({ message }: { message?: LocalMessage })
       timestampMs: new Date(message.created_at).getTime(),
     };
     return channel.messageReceiptsTracker.deliveredForMessage(messageRef);
-  }, [channel, message]);
+  });
 
-  const [deliveredTo, setDeliveredTo] = useState<UserResponse[]>([]);
+  const [deliveredTo, setDeliveredTo] = useState<UserResponse[]>(() => calculate());
 
-  useEffect(() => {
+  if (!!messageIdRef.current && !!message?.id && messageIdRef.current !== message.id) {
     setDeliveredTo(calculate());
-  }, [calculate]);
+    messageIdRef.current = message.id;
+  }
 
   useEffect(() => {
     const { unsubscribe } = channel.on('message.delivered', (event: Event) => {

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

@@ -1,14 +1,18 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Event, LocalMessage, UserResponse } from 'stream-chat';
 
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useStableCallback } from '../../../hooks';
 
 export const useMessageReadData = ({ message }: { message?: LocalMessage }) => {
   const { channel } = useChannelContext();
   const { client } = useChatContext();
-  const calculate = useCallback(() => {
+
+  const messageIdRef = useRef<string>(message?.id);
+
+  const calculate = useStableCallback(() => {
     if (!message?.created_at) {
       return [];
     }
@@ -18,13 +22,14 @@ export const useMessageReadData = ({ message }: { message?: LocalMessage }) => {
     };
 
     return channel.messageReceiptsTracker.readersForMessage(messageRef);
-  }, [channel, message]);
+  });
 
-  const [readBy, setReadBy] = useState<UserResponse[]>([]);
+  const [readBy, setReadBy] = useState<UserResponse[]>(() => calculate());
 
-  useEffect(() => {
+  if (!!messageIdRef.current && !!message?.id && messageIdRef.current !== message.id) {
     setReadBy(calculate());
-  }, [calculate]);
+    messageIdRef.current = message.id;
+  }
 
   useEffect(() => {
     const { unsubscribe } = channel.on('message.read', (event: Event) => {