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

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 
-import Animated from 'react-native-reanimated';
+import Animated, { type AnimatedStyle } from 'react-native-reanimated';
 
 import dayjs from 'dayjs';
 
@@ -37,7 +37,7 @@ type AudioRecorderPropsWithContext = Pick<
     /**
      * Style used in slide to cancel container.
      */
-    slideToCancelStyle?: StyleProp<ViewStyle>;
+    slideToCancelStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
   };
 
 const StopRecording = ({

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
-import Animated, { LinearTransition } from 'react-native-reanimated';
+import Animated, { type AnimatedStyle, LinearTransition } from 'react-native-reanimated';
 
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { ChevronUp } from '../../../../icons/chevron-up';
@@ -18,7 +18,7 @@ export type AudioRecordingLockIndicatorProps = Pick<AudioRecorderManagerState, '
   /**
    * Styles of the lock indicator.
    */
-  style?: StyleProp<ViewStyle>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
 };
 
 /**

package/src/components/MessageList/__tests__/__snapshots__/ScrollToBottomButton.test.tsx.snap

@@ -50,124 +50,102 @@ exports[`ScrollToBottomButton should render the message notification and match s
       }
     >
       <View
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": false,
-            "expanded": undefined,
-            "selected": false,
-          }
+        handlerTags={
+          [
+            12,
+            11,
+            10,
+          ]
         }
-        accessibilityValue={
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerReanimatedEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onGestureHandlerTouchEvent={[Function]}
+        pointerEvents="box-none"
+        style={
           {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
+            "display": "contents",
           }
         }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          [
+      >
+        <RNGestureHandlerButton
+          accessibilityRole="button"
+          accessibilityState={
             {
-              "backgroundColor": "transparent",
-              "paddingHorizontal": 0,
-            },
+              "disabled": false,
+              "selected": false,
+            }
+          }
+          accessible={true}
+          enabled={true}
+          hitSlop={
             {
-              "alignItems": "center",
-              "borderRadius": 9999,
-              "flex": 1,
-              "flexDirection": "row",
-              "gap": 8,
-              "justifyContent": "center",
-            },
-          ]
-        }
-        testID="scroll-to-bottom-button"
-      >
-        <RNSVGSvgView
-          align="xMidYMid"
-          bbHeight={20}
-          bbWidth={20}
-          fill="none"
-          focusable={false}
-          height={20}
-          meetOrSlice={0}
-          minX={0}
-          minY={0}
-          stroke="#1a1b25"
-          strokeWidth={1.5}
+              "bottom": 0,
+              "left": 0,
+              "right": 0,
+              "top": 0,
+            }
+          }
+          onLayout={[Function]}
+          rippleColor="transparent"
           style={
             [
-              {
-                "backgroundColor": "transparent",
-                "borderWidth": 0,
-              },
-              {
-                "flex": 0,
-                "height": 20,
-                "width": 20,
-              },
+              {},
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "paddingHorizontal": 0,
+                },
+                {
+                  "alignItems": "center",
+                  "borderRadius": 9999,
+                  "flex": 1,
+                  "flexDirection": "row",
+                  "gap": 8,
+                  "justifyContent": "center",
+                },
+              ],
             ]
           }
-          vbHeight={20}
-          vbWidth={20}
-          width={20}
+          testID="scroll-to-bottom-button"
+          testOnly_onPress={[Function]}
         >
-          <RNSVGGroup
-            fill={null}
-            propList={
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight={20}
+            bbWidth={20}
+            fill="none"
+            focusable={false}
+            height={20}
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            stroke="#1a1b25"
+            strokeWidth={1.5}
+            style={
               [
-                "fill",
-                "stroke",
-                "strokeWidth",
+                {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                {
+                  "flex": 0,
+                  "height": 20,
+                  "width": 20,
+                },
               ]
             }
-            stroke={
-              {
-                "payload": 4279900965,
-                "type": 0,
-              }
-            }
-            strokeWidth={1.5}
+            vbHeight={20}
+            vbWidth={20}
+            width={20}
           >
-            <RNSVGPath
-              d="M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75"
-              fill={
-                {
-                  "payload": 4278190080,
-                  "type": 0,
-                }
-              }
-              matrix={
-                [
-                  -1,
-                  1.2246467991473532e-16,
-                  -1.2246467991473532e-16,
-                  -1,
-                  20,
-                  20,
-                ]
-              }
+            <RNSVGGroup
+              fill={null}
               propList={
                 [
+                  "fill",
                   "stroke",
                   "strokeWidth",
-                  "strokeLinecap",
-                  "strokeLinejoin",
                 ]
               }
               stroke={
@@ -176,12 +154,47 @@ exports[`ScrollToBottomButton should render the message notification and match s
                   "type": 0,
                 }
               }
-              strokeLinecap={1}
-              strokeLinejoin={1}
               strokeWidth={1.5}
-            />
-          </RNSVGGroup>
-        </RNSVGSvgView>
+            >
+              <RNSVGPath
+                d="M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75"
+                fill={
+                  {
+                    "payload": 4278190080,
+                    "type": 0,
+                  }
+                }
+                matrix={
+                  [
+                    -1,
+                    1.2246467991473532e-16,
+                    -1.2246467991473532e-16,
+                    -1,
+                    20,
+                    20,
+                  ]
+                }
+                propList={
+                  [
+                    "stroke",
+                    "strokeWidth",
+                    "strokeLinecap",
+                    "strokeLinejoin",
+                  ]
+                }
+                stroke={
+                  {
+                    "payload": 4279900965,
+                    "type": 0,
+                  }
+                }
+                strokeLinecap={1}
+                strokeLinejoin={1}
+                strokeWidth={1.5}
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </RNGestureHandlerButton>
       </View>
     </View>
   </View>

package/src/components/Poll/Poll.tsx

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

package/src/components/Reply/Reply.tsx

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