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

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from 'react';
 import {
+  AccessibilityActionEvent,
   EventSubscription,
   Keyboard,
   KeyboardEvent,
@@ -37,11 +38,13 @@ import {
   getBottomSheetTopSnapIndex,
 } from './BottomSheetModal.utils';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useResolvedModalAccessibilityProps } from '../../a11y/hooks/useResolvedModalAccessibilityProps';
 import { BottomSheetProvider } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
+import { useAccessibilityAnnouncer } from '../Accessibility/useAccessibilityAnnouncer';
 
 export type BottomSheetModalProps = {
   /**
@@ -495,6 +498,37 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
 
   const modalA11yProps = useResolvedModalAccessibilityProps();
 
+  const announce = useAccessibilityAnnouncer();
+  const openAnnouncement = useA11yLabel(
+    'a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.',
+  );
+  const announcedOpenRef = useRef(false);
+  useEffect(() => {
+    if (!visible) {
+      announcedOpenRef.current = false;
+      return;
+    }
+    if (!openAnnouncement || announcedOpenRef.current) {
+      return;
+    }
+    const id = setTimeout(() => {
+      announce(openAnnouncement, 'polite');
+      announcedOpenRef.current = true;
+    }, 800);
+    return () => clearTimeout(id);
+  }, [visible, openAnnouncement, announce]);
+
+  const closeLabel = useA11yLabel('a11y/Close');
+  const closeAccessibilityActions = useMemo(
+    () => (closeLabel ? [{ label: closeLabel, name: 'activate' }] : undefined),
+    [closeLabel],
+  );
+  const onCloseAccessibilityAction = useStableCallback((event: AccessibilityActionEvent) => {
+    if (event.nativeEvent.actionName === 'activate') {
+      onClose();
+    }
+  });
+
   const bottomSheetModalContextValue = useMemo(
     () => ({
       close,
@@ -515,13 +549,22 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
           <Pressable onPress={onBackdropPress} style={StyleSheet.absoluteFill} />
 
           <Animated.View
+            onAccessibilityEscape={onClose}
             pointerEvents='box-none'
             style={[{ height: maxHeight }, sheetViewportAnimatedStyle]}
             {...modalA11yProps}
           >
             <GestureDetector gesture={panGesture}>
               <Animated.View style={[styles.container, { height: maxHeight }, container]}>
-                <View style={[styles.handle, handle]} />
+                <View
+                  accessibilityActions={closeAccessibilityActions}
+                  accessibilityLabel={closeLabel}
+                  accessibilityRole={closeLabel ? 'button' : undefined}
+                  accessible={closeLabel ? true : undefined}
+                  onAccessibilityAction={onCloseAccessibilityAction}
+                  onAccessibilityTap={closeLabel ? onClose : undefined}
+                  style={[styles.handle, handle]}
+                />
                 <View style={[styles.contentContainer, contentContainer]}>
                   {renderContent ? (
                     <BottomSheetProvider value={bottomSheetModalContextValue}>

package/src/components/UIComponents/SwipableWrapper.tsx

@@ -20,7 +20,6 @@ import { useStableCallback } from '../../hooks';
 
 const ACTION_WIDTH = 80;
 const MAX_RIGHT_ACTIONS_WIDTH = 240;
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 const animationOptions = {
   damping: 24,
@@ -107,17 +106,15 @@ export const RightActions = ({
       {actionItems.map((item) => {
         const Content = item.Content;
         return (
-          <AnimatedPressable
-            key={item.id}
-            onPress={item.action}
-            style={[styles.action, animatedActionWidthStyle]}
-          >
-            <View style={item.contentContainerStyle}>
-              <Animated.View style={animatedIconScaleStyle}>
-                <Content />
-              </Animated.View>
-            </View>
-          </AnimatedPressable>
+          <Animated.View key={item.id} style={[styles.action, animatedActionWidthStyle]}>
+            <Pressable onPress={item.action} style={StyleSheet.absoluteFill}>
+              <View style={item.contentContainerStyle}>
+                <Animated.View style={animatedIconScaleStyle}>
+                  <Content />
+                </Animated.View>
+              </View>
+            </Pressable>
+          </Animated.View>
         );
       })}
     </Animated.View>

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>

package/src/components/ui/Input/Input.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
 import {
+  BlurEvent,
+  FocusEvent,
   I18nManager,
   StyleProp,
   StyleSheet,
   Text,
   TextInput,
-  TextInputFocusEvent,
   TextInputProps,
   View,
   ViewStyle,
@@ -84,7 +85,7 @@ export const Input = ({
   });
 
   const handleFocus = useCallback(
-    (e: TextInputFocusEvent) => {
+    (e: FocusEvent) => {
       setIsFocused(true);
       onFocus?.(e);
     },
@@ -92,7 +93,7 @@ export const Input = ({
   );
 
   const handleBlur = useCallback(
-    (e: TextInputFocusEvent) => {
+    (e: BlurEvent) => {
       setIsFocused(false);
       onBlur?.(e);
     },

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import {
   I18nManager,
   Platform,
@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
+  type AnimatedStyle,
   clamp,
   runOnJS,
   useAnimatedStyle,
@@ -23,6 +24,8 @@ import { PortalHost } from 'react-native-teleport';
 
 import { ClosingPortalHostsLayer } from './ClosingPortalHostsLayer';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useAccessibilityAnnouncer } from '../../components/Accessibility/useAccessibilityAnnouncer';
 import {
   closeOverlay,
   finalizeCloseOverlay,
@@ -56,10 +59,10 @@ export const DefaultMessageOverlayBackground = () => {
 };
 
 export type MessageActionsProps = {
-  bottomItemStyle: StyleProp<ViewStyle>;
-  hostStyle: StyleProp<ViewStyle>;
+  bottomItemStyle: StyleProp<AnimatedStyle<ViewStyle>>;
+  hostStyle: StyleProp<AnimatedStyle<ViewStyle>>;
   portalHostStyle: StyleProp<ViewStyle>;
-  topItemStyle: StyleProp<ViewStyle>;
+  topItemStyle: StyleProp<AnimatedStyle<ViewStyle>>;
 };
 
 export const MessageOverlayHostLayer = () => {
@@ -81,6 +84,20 @@ export const MessageOverlayHostLayer = () => {
 
   const isActive = !!id;
 
+  const announce = useAccessibilityAnnouncer();
+  const overlayOpenHint = useA11yLabel('a11y/Swipe right to go through different actions');
+  const announcedOpenRef = useRef(false);
+  useEffect(() => {
+    if (isActive) {
+      if (overlayOpenHint && !announcedOpenRef.current) {
+        announce(overlayOpenHint, 'polite');
+        announcedOpenRef.current = true;
+      }
+    } else {
+      announcedOpenRef.current = false;
+    }
+  }, [isActive, overlayOpenHint, announce]);
+
   const padding = 8;
   const minY = topInset + padding;
   const maxY = screenH - bottomInset - padding;
@@ -252,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,11 @@ export const OverlayProvider = (props: PropsWithChildren<OverlayProviderProps>)
           <ImageGalleryProvider value={imageGalleryProviderProps}>
             <ThemeProvider style={overlayContext.style}>
               <PortalProvider>
-                {children}
+                {accessibility?.enabled ? (
+                  <OverlayA11yShield>{children}</OverlayA11yShield>
+                ) : (
+                  children
+                )}
                 {overlay === 'gallery' && <ImageGallery overlayOpacity={overlayOpacity} />}
                 <MessageOverlayHostLayer />
               </PortalProvider>

package/src/contexts/overlayContext/__tests__/MessageOverlayHostLayer.test.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
+import Animated from 'react-native-reanimated';
+
 import * as SafeAreaContext from 'react-native-safe-area-context';
 
 import { act, cleanup, fireEvent, render, screen } from '@testing-library/react-native';
@@ -100,9 +102,9 @@ const CustomMessageActions = ({
 }: MessageActionsProps) => (
   <>
     <Text testID='custom-message-actions'>Custom</Text>
-    <Text style={topItemStyle} testID='custom-message-actions-top' />
-    <Text style={hostStyle} testID='custom-message-actions-message' />
-    <Text style={bottomItemStyle} testID='custom-message-actions-bottom' />
+    <Animated.View style={topItemStyle} testID='custom-message-actions-top' />
+    <Animated.View style={hostStyle} testID='custom-message-actions-message' />
+    <Animated.View style={bottomItemStyle} testID='custom-message-actions-bottom' />
   </>
 );
 

package/src/i18n/ar.json

@@ -253,28 +253,44 @@
   "a11y/AI is generating": "AI is generating",
   "a11y/AI is thinking": "AI is thinking",
   "a11y/Avatar of {{name}}": "Avatar of {{name}}",
+  "a11y/Channel with {{count}} members": "قناة بها {{count}} أعضاء",
   "a11y/Connected": "Connected",
-  "a11y/Delivered": "Delivered",
+  "a11y/Delivered": "تم التسليم",
+  "a11y/Delivered, sent by you": "تم التسليم، مُرسلة منك",
+  "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}}",
   "a11y/Loading": "Loading",
   "a11y/Loading failed": "Loading failed",
   "a11y/Message actions": "Message actions",
+  "a11y/Muted": "مكتوم",
   "a11y/New message from {{user}}": "New message from {{user}}",
   "a11y/Offline": "Offline",
   "a11y/Open message actions": "Open message actions",
   "a11y/Reaction {{emoji}} by {{count}} users": "Reaction {{emoji}} by {{count}} users",
-  "a11y/Read": "Read",
+  "a11y/Read": "مقروءة",
+  "a11y/Read, sent by you": "مقروءة، مُرسلة منك",
   "a11y/Reconnecting": "Reconnecting",
   "a11y/Reply to {{user}}": "Reply to {{user}}",
   "a11y/Remove edit": "Remove edit",
   "a11y/Remove reply": "Remove reply",
+  "a11y/Replying to {{user}}": "الرد على {{user}}",
+  "a11y/Replying to {{user}}: {{text}}": "الرد على {{user}}: {{text}}",
   "a11y/Scroll to bottom": "Scroll to bottom",
   "a11y/Scroll to bottom, {{count}} new messages": "Scroll to bottom, {{count}} new messages",
   "a11y/Scroll to latest": "Scroll to latest",
   "a11y/Scroll to latest, {{count}} unread": "Scroll to latest, {{count}} unread",
   "a11y/Send message": "Send message",
   "a11y/Sending": "Sending",
-  "a11y/Sent": "Sent",
+  "a11y/Sent": "مُرسلة",
+  "a11y/Sent by you": "مُرسلة منك",
   "a11y/Voice message recording. Hold to record.": "Voice message recording. Hold to record.",
+  "a11y/and {{count}} more reactions": "و{{count}} تفاعلات أخرى",
+  "a11y/you reacted": "تفاعلت",
   "a11y/{{count}} new messages": "{{count}} new messages",
   "a11y/Add attachment": "Add attachment",
   "a11y/Close attachments": "Close attachments",
@@ -351,5 +367,15 @@
   "{{ user }} has been unmuted": "تم إلغاء كتم {{ user }}",
   "size limit": "حد الحجم",
   "unknown error": "خطأ غير معروف",
-  "unsupported file type": "نوع ملف غير مدعوم"
+  "unsupported file type": "نوع ملف غير مدعوم",
+  "a11y/Double tap and hold to activate contextual menu": "انقر نقرًا مزدوجًا مع الاستمرار لتفعيل قائمة السياق",
+  "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/Message from you": "رسالة منك",
+  "a11y/Message from {{sender}}": "رسالة من {{sender}}",
+  "a11y/Gallery Image": "صورة من المعرض",
+  "a11y/Gallery Video": "فيديو من المعرض",
+  "a11y/{{position}} of {{count}}": "{{position}} من {{count}}"
 }