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

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

@@ -75,10 +75,18 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
     return null;
   }
 
+  const replyCountLabel =
+    message.reply_count === 1
+      ? t('1 Reply')
+      : t('{{ replyCount }} Replies', { replyCount: message.reply_count });
+
   return (
     <View style={[styles.container, container]}>
       {alignment === 'left' ? connector : null}
       <Pressable
+        accessibilityHint={t('a11y/Double tap to view thread')}
+        accessibilityLabel={replyCountLabel}
+        accessibilityRole='button'
         disabled={preventPress}
         onLongPress={(event) => {
           if (onLongPress) {
@@ -114,13 +122,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
         testID='message-replies'
       >
         <MessageRepliesAvatars />
-        <Text style={[styles.messageRepliesText, messageRepliesText]}>
-          {message.reply_count === 1
-            ? t('1 Reply')
-            : t('{{ replyCount }} Replies', {
-                replyCount: message.reply_count,
-              })}
-        </Text>
+        <Text style={[styles.messageRepliesText, messageRepliesText]}>{replyCountLabel}</Text>
       </Pressable>
       {alignment === 'right' ? connector : null}
     </View>

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

@@ -24,7 +24,11 @@ export const MessageRepliesAvatarsWithContext = (props: MessageRepliesAvatarsPro
   const avatars = message?.thread_participants || [];
 
   return (
-    <View style={avatarStackContainer}>
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility='no-hide-descendants'
+      style={avatarStackContainer}
+    >
       <UserAvatarStack users={avatars} avatarSize='sm' maxVisible={3} overlap={0.4} />
     </View>
   );

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/ReactionList/ReactionListItem.tsx

@@ -72,6 +72,8 @@ export const ReactionListItem = (props: ReactionListItemProps) => {
 
   return (
     <ReactionListItemWrapper
+      accessibilityRole='button'
+      accessibilityState={{ selected }}
       disabled={preventPress}
       key={reaction.type}
       testID='reaction-list-item'

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

@@ -50,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>

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/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -1017,6 +1017,7 @@ exports[`Thread should match thread snapshot 1`] = `
                   testID="date-separator"
                 >
                   <Text
+                    accessibilityLabel="May 5, 2020"
                     style={
                       {
                         "color": "#414552",

package/src/contexts/accessibilityContext/AccessibilityContext.tsx

@@ -8,6 +8,8 @@ import React, {
 } from 'react';
 import { AccessibilityInfo } from 'react-native';
 
+import type { LocalMessage } from 'stream-chat';
+
 import { AccessibilityAnnouncerContext } from '../../components/Accessibility/useAccessibilityAnnouncer';
 import type {
   AccessibilityAnnounce,
@@ -24,6 +26,39 @@ type TimeoutByPriority = {
 /** Tri-state for gesture-alternative toggles. */
 export type A11yMode = 'auto' | 'always' | 'never';
 
+/**
+ * Resolved predicate stored on the context - consumers call `(message)` and
+ * receive the boolean directly.
+ */
+export type HasInteractiveAccessibilityContent = (message: LocalMessage) => boolean;
+
+/**
+ * Integrator facing override shape. Receives the SDK's baseline boolean as the
+ * second argument so overrides can extend rather than replace:
+ *
+ * ```
+ *   hasInteractiveAccessibilityContent: (message, defaultValue) =>
+ *     defaultValue || !!message.my_custom_field
+ * ```
+ *
+ * To replace fully, ignore the second argument. Must be stable across renders
+ * an unstable function will rerender every Message context consumer on every
+ * downstream render.
+ */
+export type HasInteractiveAccessibilityContentConfig = (
+  message: LocalMessage,
+  defaultValue: boolean,
+) => boolean;
+
+/** SDK baseline — true when the message renders interactive children. */
+const defaultHasInteractiveAccessibilityContent: HasInteractiveAccessibilityContent = (message) =>
+  !!(
+    message.poll_id ||
+    message.quoted_message ||
+    message.attachments?.length ||
+    message.shared_location
+  );
+
 export type AccessibilityConfig = {
   /**
    * Master toggle. Default FALSE — integrators must opt in. When false, the SDK
@@ -45,10 +80,22 @@ export type AccessibilityConfig = {
   imageGalleryScreenReaderMode?: A11yMode;
   /** Message actions trigger. 'long-press' (no alt button), 'auto' (default — show button when SR is on), 'always-button'. */
   messageActionsTrigger?: 'long-press' | 'auto' | 'always-button';
+  /**
+   * Override the SDK's "this message has interactive children" decision.
+   * Will control what it means for a message to have interactive content.
+   * This affects the way we mark the message bubble as accessible and whether
+   * we let the children handle it on their own or whether we want the bubble to
+   * handle everything. See {@link HasInteractiveAccessibilityContentConfig}.
+   */
+  hasInteractiveAccessibilityContent?: HasInteractiveAccessibilityContentConfig;
 };
 
 /** Fully-resolved config — every field is populated with its default. */
-export type ResolvedAccessibilityConfig = Required<AccessibilityConfig>;
+export type ResolvedAccessibilityConfig = Required<
+  Omit<AccessibilityConfig, 'hasInteractiveAccessibilityContent'>
+> & {
+  hasInteractiveAccessibilityContent: HasInteractiveAccessibilityContent;
+};
 
 export const accessibilityContextDefaultValue: ResolvedAccessibilityConfig = {
   announceConnectionState: true,
@@ -57,6 +104,7 @@ export const accessibilityContextDefaultValue: ResolvedAccessibilityConfig = {
   audioRecorderTapMode: 'auto',
   enabled: false,
   forceScreenReaderMode: false,
+  hasInteractiveAccessibilityContent: defaultHasInteractiveAccessibilityContent,
   imageGalleryScreenReaderMode: 'auto',
   messageActionsTrigger: 'auto',
 };
@@ -124,6 +172,7 @@ export const AccessibilityProvider = ({
     audioRecorderTapMode = accessibilityContextDefaultValue.audioRecorderTapMode,
     enabled = accessibilityContextDefaultValue.enabled,
     forceScreenReaderMode = accessibilityContextDefaultValue.forceScreenReaderMode,
+    hasInteractiveAccessibilityContent,
     imageGalleryScreenReaderMode = accessibilityContextDefaultValue.imageGalleryScreenReaderMode,
     messageActionsTrigger = accessibilityContextDefaultValue.messageActionsTrigger,
   } = value ?? {};
@@ -136,6 +185,13 @@ export const AccessibilityProvider = ({
       audioRecorderTapMode,
       enabled,
       forceScreenReaderMode,
+      hasInteractiveAccessibilityContent: hasInteractiveAccessibilityContent
+        ? (message) =>
+            hasInteractiveAccessibilityContent(
+              message,
+              accessibilityContextDefaultValue.hasInteractiveAccessibilityContent(message),
+            )
+        : accessibilityContextDefaultValue.hasInteractiveAccessibilityContent,
       imageGalleryScreenReaderMode,
       messageActionsTrigger,
     }),
@@ -146,6 +202,7 @@ export const AccessibilityProvider = ({
       audioRecorderTapMode,
       enabled,
       forceScreenReaderMode,
+      hasInteractiveAccessibilityContent,
       imageGalleryScreenReaderMode,
       messageActionsTrigger,
     ],
@@ -162,38 +219,5 @@ export const AccessibilityProvider = ({
   );
 };
 
-export const useAccessibilityContext = (): ResolvedAccessibilityConfig => {
-  const {
-    announceConnectionState,
-    announceNewMessages,
-    announceTypingIndicator,
-    audioRecorderTapMode,
-    enabled,
-    forceScreenReaderMode,
-    imageGalleryScreenReaderMode,
-    messageActionsTrigger,
-  } = useContext(AccessibilityContext);
-
-  return useMemo(
-    () => ({
-      announceConnectionState,
-      announceNewMessages,
-      announceTypingIndicator,
-      audioRecorderTapMode,
-      enabled,
-      forceScreenReaderMode,
-      imageGalleryScreenReaderMode,
-      messageActionsTrigger,
-    }),
-    [
-      announceConnectionState,
-      announceNewMessages,
-      announceTypingIndicator,
-      audioRecorderTapMode,
-      enabled,
-      forceScreenReaderMode,
-      imageGalleryScreenReaderMode,
-      messageActionsTrigger,
-    ],
-  );
-};
+export const useAccessibilityContext = (): ResolvedAccessibilityConfig =>
+  useContext(AccessibilityContext);

package/src/contexts/messageContext/MessageContext.tsx

@@ -45,6 +45,14 @@ export type MessageContextValue = {
   /** Whether or not any message attachment exposes actions. */
   hasAttachmentActions: boolean;
   handleToggleReaction: (reactionType: string) => Promise<void>;
+  /**
+   * Whether the message renders interactive children (poll options, attachment
+   * cells, the quoted-reply navigator, shared location) and the row should
+   * therefore drop its single focusstop so VO/TalkBack can drill into them.
+   * Resolved from `AccessibilityContext.hasInteractiveAccessibilityContent` -
+   * integrators override there to include their own custom content.
+   */
+  hasInteractiveAccessibilityContent: boolean;
   /** Whether or not message has reactions */
   hasReactions: boolean;
   /** Whether or not message has only a single attachment */

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -269,7 +269,11 @@ export const MessageOverlayHostLayer = () => {
 
   return (
     <GestureDetector gesture={tap}>
-      <View pointerEvents='box-none' style={StyleSheet.absoluteFill}>
+      <View
+        accessibilityViewIsModal={isActive}
+        pointerEvents='box-none'
+        style={StyleSheet.absoluteFill}
+      >
         {isActive ? (
           <Animated.View pointerEvents='none' style={[StyleSheet.absoluteFill, backdropStyle]}>
             <OverlayBackground />

package/src/contexts/overlayContext/OverlayProvider.tsx

@@ -9,6 +9,7 @@ import { PortalProvider } from 'react-native-teleport';
 import { MessageOverlayHostLayer } from './MessageOverlayHostLayer';
 import { OverlayContext, OverlayProviderProps } from './OverlayContext';
 
+import { OverlayA11yShield } from '../../components/Accessibility/OverlayA11yShield';
 import { ImageGallery } from '../../components/ImageGallery/ImageGallery';
 import { useStreami18n } from '../../hooks/useStreami18n';
 
@@ -107,7 +108,7 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
           <ImageGalleryProvider value={imageGalleryProviderProps}>
             <ThemeProvider style={overlayContext.style}>
               <PortalProvider>
-                {children}
+                <OverlayA11yShield>{children}</OverlayA11yShield>
                 {overlay === 'gallery' && <ImageGallery overlayOpacity={overlayOpacity} />}
                 <MessageOverlayHostLayer />
               </PortalProvider>

package/src/i18n/ar.json

@@ -260,6 +260,7 @@
   "a11y/Direct chat with {{name}}": "محادثة مباشرة مع {{name}}",
   "a11y/Double tap to open": "انقر مرتين للفتح",
   "a11y/Double tap to view reactions": "انقر مرتين لعرض التفاعلات",
+  "a11y/Double tap to view thread": "انقر مرتين لعرض المحادثة الفرعية",
   "a11y/Editing message": "تعديل الرسالة",
   "a11y/Editing message: {{text}}": "تعديل الرسالة: {{text}}",
   "a11y/Last message {{date}}": "آخر رسالة {{date}}",
@@ -371,5 +372,10 @@
   "a11y/Swipe right to go through different actions": "اسحب لليمين للتنقل بين الإجراءات المختلفة",
   "a11y/Close": "Close",
   "a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.": "Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.",
-  "a11y/{{count}} unread messages": "{{count}} رسائل غير مقروءة"
+  "a11y/{{count}} unread messages": "{{count}} رسائل غير مقروءة",
+  "a11y/Message from you": "رسالة منك",
+  "a11y/Message from {{sender}}": "رسالة من {{sender}}",
+  "a11y/Gallery Image": "صورة من المعرض",
+  "a11y/Gallery Video": "فيديو من المعرض",
+  "a11y/{{position}} of {{count}}": "{{position}} من {{count}}"
 }

package/src/i18n/en.json

@@ -260,12 +260,15 @@
   "a11y/Direct chat with {{name}}": "Direct chat with {{name}}",
   "a11y/Double tap to open": "Double tap to open",
   "a11y/Double tap to view reactions": "Double tap to view reactions",
+  "a11y/Double tap to view thread": "Double tap to view thread",
   "a11y/Editing message": "Editing message",
   "a11y/Editing message: {{text}}": "Editing message: {{text}}",
   "a11y/Last message {{date}}": "Last message {{date}}",
   "a11y/Loading": "Loading",
   "a11y/Loading failed": "Loading failed",
   "a11y/Message actions": "Message actions",
+  "a11y/Message from you": "Message from you",
+  "a11y/Message from {{sender}}": "Message from {{sender}}",
   "a11y/Muted": "Muted",
   "a11y/New message from {{user}}": "New message from {{user}}",
   "a11y/Offline": "Offline",
@@ -371,5 +374,8 @@
   "size limit": "size limit",
   "unknown error": "unknown error",
   "unsupported file type": "unsupported file type",
-  "a11y/{{count}} unread messages": "{{count}} unread messages"
+  "a11y/{{count}} unread messages": "{{count}} unread messages",
+  "a11y/Gallery Image": "Gallery image",
+  "a11y/Gallery Video": "Gallery video",
+  "a11y/{{position}} of {{count}}": "{{position}} of {{count}}"
 }