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

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

@@ -36,13 +36,14 @@ exports[`SendButton should render a SendButton 1`] = `
         }
       >
         <View
+          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
               "disabled": false,
               "expanded": undefined,
-              "selected": undefined,
+              "selected": false,
             }
           }
           accessibilityValue={
@@ -194,13 +195,14 @@ exports[`SendButton should render a SendButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -333,13 +335,14 @@ exports[`SendButton should render a SendButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -501,13 +504,14 @@ exports[`SendButton should render a SendButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -636,13 +640,14 @@ exports[`SendButton should render a SendButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -903,13 +908,14 @@ exports[`SendButton should render a disabled SendButton 1`] = `
         }
       >
         <View
+          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
               "disabled": true,
               "expanded": undefined,
-              "selected": undefined,
+              "selected": false,
             }
           }
           accessibilityValue={
@@ -1061,13 +1067,14 @@ exports[`SendButton should render a disabled SendButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1200,13 +1207,14 @@ exports[`SendButton should render a disabled SendButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1368,13 +1376,14 @@ exports[`SendButton should render a disabled SendButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1503,13 +1512,14 @@ exports[`SendButton should render a disabled SendButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={

package/src/components/MessageList/MessageList.tsx

@@ -37,6 +37,7 @@ import {
   ChannelContextValue,
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
+
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useDebugContext } from '../../contexts/debugContext/DebugContext';
@@ -70,6 +71,7 @@ import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/transitions';
+import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
 // This is just to make sure that the scrolling happens in a different task queue.
@@ -365,6 +367,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     messageInputHeightStoreSelector,
   );
 
+  useIncomingMessageAnnouncements({
+    activeThreadId: thread?.id,
+    channel,
+    ownUserId: client.user?.id,
+    threadList,
+  });
+
   const myMessageThemeString = useMemo(() => JSON.stringify(myMessageTheme), [myMessageTheme]);
 
   const modifiedTheme = useMemo(

package/src/components/MessageList/ScrollToBottomButton.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Down } from '../../icons/arrow-up';
 import { primitives } from '../../theme';
@@ -22,6 +23,10 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
   const {
     theme: { semantics },
   } = useTheme();
+  const a11yLabel = useA11yLabel(
+    unreadCount ? 'a11y/Scroll to latest, {{count}} unread' : 'a11y/Scroll to latest',
+    { count: unreadCount ?? 0 },
+  );
 
   if (!showNotification) {
     return null;
@@ -42,6 +47,7 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
         ]}
       >
         <Button
+          accessibilityLabel={a11yLabel}
           variant='secondary'
           type='outline'
           LeadingIcon={Down}

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

@@ -50,13 +50,14 @@ exports[`ScrollToBottomButton should render the message notification and match s
       }
     >
       <View
+        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
             "checked": undefined,
             "disabled": false,
             "expanded": undefined,
-            "selected": undefined,
+            "selected": false,
           }
         }
         accessibilityValue={

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

@@ -87,6 +87,8 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
               testID="avatar-image"
             >
               <Image
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
                 onError={[Function]}
                 source={
                   {
@@ -147,6 +149,8 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
               testID="avatar-image"
             >
               <Image
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
                 onError={[Function]}
                 source={
                   {
@@ -186,6 +190,8 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
     }
   >
     <View
+      accessibilityElementsHidden={true}
+      importantForAccessibility="no-hide-descendants"
       style={
         [
           {

package/src/components/MessageMenu/MessageActionList.tsx

@@ -5,6 +5,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 
 import { MessageActionType } from './MessageActionListItem';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
@@ -24,6 +25,7 @@ export type MessageActionListProps = {
 export const MessageActionList = (props: MessageActionListProps) => {
   const { messageActions } = props;
   const { MessageActionListItem } = useComponentsContext();
+  const a11yLabel = useA11yLabel('a11y/Message actions');
   const {
     theme: {
       messageMenu: {
@@ -43,7 +45,8 @@ export const MessageActionList = (props: MessageActionListProps) => {
 
   return (
     <ScrollView
-      accessibilityLabel='Message action list'
+      accessibilityLabel={a11yLabel ?? 'Message action list'}
+      accessibilityRole='menu'
       contentContainerStyle={[styles.contentContainer, contentContainer]}
       style={[styles.container, container]}
     >

package/src/components/MessageMenu/MessageActionListItem.tsx

@@ -77,6 +77,7 @@ export const MessageActionListItem = (props: MessageActionListItemProps) => {
 
   return (
     <Pressable
+      accessibilityRole='menuitem'
       onPress={onActionPress}
       style={({ pressed }) => [
         styles.buttonContainer,

package/src/components/MessageMenu/MessageReactionPicker.tsx

@@ -163,6 +163,7 @@ export const MessageReactionPicker = (props: MessageReactionPickerProps) => {
   return (
     <View
       accessibilityLabel='Reaction Selector on long pressing message'
+      accessibilityRole='menu'
       style={[styles.container, container]}
     >
       <MessageReactionPickerList onSelectReaction={onSelectReaction} />

package/src/components/MessageMenu/ReactionButton.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { IconProps } from '../../icons';
 import { Button, ButtonProps } from '../ui';
@@ -50,10 +51,17 @@ export const ReactionButton = (props: ReactionButtonProps) => {
     [Icon, reactionIconSize],
   );
 
+  const a11yLabel = useA11yLabel('a11y/Reaction {{emoji}} by {{count}} users', {
+    count: count ?? '0',
+    emoji: type,
+  });
+
   return (
     <View style={styles.reactionButton}>
       <Button
-        accessibilityLabel={`reaction-button-${type}-${selected ? 'selected' : 'unselected'}`}
+        accessibilityLabel={
+          a11yLabel ?? `reaction-button-${type}-${selected ? 'selected' : 'unselected'}`
+        }
         variant={'secondary'}
         type={'outline'}
         iconOnly={!count}

package/src/components/Poll/components/PollOption.tsx

@@ -25,6 +25,11 @@ import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
 import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from '../hooks/usePollState';
 
+const pollVoteAccessibilityStates = {
+  checked: { checked: true, selected: true },
+  unchecked: { checked: false, selected: false },
+} as const;
+
 export type PollOptionProps = {
   option: PollOptionClass;
   showProgressBar?: boolean;
@@ -190,9 +195,15 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   }, [message, onPress, poll, toggleVote]);
 
   const hasVote = !!ownVotesByOptionId[option.id];
+  const accessibilityState = hasVote
+    ? pollVoteAccessibilityStates.checked
+    : pollVoteAccessibilityStates.unchecked;
 
   return ownCapabilities.castPollVote && !isClosed ? (
     <Pressable
+      accessibilityLabel={option.text}
+      accessibilityRole={poll.data?.enforce_unique_vote ? 'radio' : 'checkbox'}
+      accessibilityState={accessibilityState}
       onPress={onPressHandler}
       style={({ pressed }) => [
         { opacity: pressed ? 0.5 : 1 },

package/src/components/ProgressControl/ProgressControl.tsx

@@ -110,9 +110,17 @@ export const ProgressControl = (props: ProgressControlProps) => {
     [widthInNumbers],
   );
 
+  const progressPercent = Math.round(progress * 100);
+  const accessibilityValue = useMemo(
+    () => ({ max: 100, min: 0, now: progressPercent }),
+    [progressPercent],
+  );
+
   return (
     <GestureDetector gesture={pan}>
       <View
+        accessibilityRole={onEndDrag ? 'adjustable' : 'progressbar'}
+        accessibilityValue={accessibilityValue}
         onLayout={({ nativeEvent }) => {
           setWidthInNumbers(nativeEvent.layout.width);
         }}

package/src/components/Reply/Reply.tsx

@@ -151,7 +151,11 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
   }
 
   return (
-    <View style={[!messageFromContext?.quoted_message ? styles.wrapper : null, wrapper]}>
+    <View
+      accessibilityLabel={title}
+      accessibilityRole='text'
+      style={[!messageFromContext?.quoted_message ? styles.wrapper : null, wrapper]}
+    >
       <View style={[styles.container, container, stylesProp?.container]}>
         <View style={[styles.leftContainer, leftContainer, stylesProp?.leftContainer]}>
           <Text numberOfLines={1} style={[styles.title, titleStyle, stylesProp?.title]}>

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -412,6 +412,8 @@ exports[`Thread should match thread snapshot 1`] = `
                                 testID="avatar-image"
                               >
                                 <Image
+                                  accessibilityElementsHidden={true}
+                                  importantForAccessibility="no"
                                   onError={[Function]}
                                   source={
                                     {
@@ -753,6 +755,8 @@ exports[`Thread should match thread snapshot 1`] = `
                                 testID="avatar-image"
                               >
                                 <Image
+                                  accessibilityElementsHidden={true}
+                                  importantForAccessibility="no"
                                   onError={[Function]}
                                   source={
                                     {
@@ -1127,6 +1131,8 @@ exports[`Thread should match thread snapshot 1`] = `
                                 testID="avatar-image"
                               >
                                 <Image
+                                  accessibilityElementsHidden={true}
+                                  importantForAccessibility="no"
                                   onError={[Function]}
                                   source={
                                     {
@@ -1459,6 +1465,8 @@ exports[`Thread should match thread snapshot 1`] = `
                               testID="avatar-image"
                             >
                               <Image
+                                accessibilityElementsHidden={true}
+                                importantForAccessibility="no"
                                 onError={[Function]}
                                 source={
                                   {
@@ -1827,13 +1835,14 @@ exports[`Thread should match thread snapshot 1`] = `
                       }
                     >
                       <View
+                        accessibilityRole="button"
                         accessibilityState={
                           {
                             "busy": undefined,
                             "checked": undefined,
                             "disabled": false,
                             "expanded": undefined,
-                            "selected": undefined,
+                            "selected": false,
                           }
                         }
                         accessibilityValue={
@@ -2191,13 +2200,14 @@ exports[`Thread should match thread snapshot 1`] = `
                           }
                         >
                           <View
+                            accessibilityRole="button"
                             accessibilityState={
                               {
                                 "busy": undefined,
                                 "checked": undefined,
                                 "disabled": true,
                                 "expanded": undefined,
-                                "selected": undefined,
+                                "selected": false,
                               }
                             }
                             accessibilityValue={
@@ -2374,13 +2384,14 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         >
           <View
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
                 "checked": undefined,
                 "disabled": false,
                 "expanded": undefined,
-                "selected": undefined,
+                "selected": false,
               }
             }
             accessibilityValue={
@@ -2513,13 +2524,14 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         >
           <View
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
                 "checked": undefined,
                 "disabled": false,
                 "expanded": undefined,
-                "selected": undefined,
+                "selected": false,
               }
             }
             accessibilityValue={
@@ -2681,13 +2693,14 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         >
           <View
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
                 "checked": undefined,
                 "disabled": false,
                 "expanded": undefined,
-                "selected": undefined,
+                "selected": false,
               }
             }
             accessibilityValue={
@@ -2816,13 +2829,14 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         >
           <View
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
                 "checked": undefined,
                 "disabled": false,
                 "expanded": undefined,
-                "selected": undefined,
+                "selected": false,
               }
             }
             accessibilityValue={

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -38,6 +38,7 @@ import {
   getBottomSheetTopSnapIndex,
 } from './BottomSheetModal.utils';
 
+import { useResolvedModalAccessibilityProps } from '../../a11y/hooks/useResolvedModalAccessibilityProps';
 import { BottomSheetProvider } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
@@ -501,6 +502,8 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
 
   const onBackdropPress = useStableCallback(() => close());
 
+  const modalA11yProps = useResolvedModalAccessibilityProps();
+
   const bottomSheetModalContextValue = useMemo(
     () => ({
       close,
@@ -523,6 +526,7 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
           <Animated.View
             pointerEvents='box-none'
             style={[{ height: maxHeight }, sheetViewportAnimatedStyle]}
+            {...modalA11yProps}
           >
             <GestureDetector gesture={panGesture}>
               <Animated.View style={[styles.container, { height: maxHeight }, container]}>

package/src/components/index.ts

@@ -1,3 +1,5 @@
+export * from './Accessibility';
+
 export * from './Attachment/Attachment';
 export * from './Attachment/Audio';
 export * from './Attachment/UrlPreview';

package/src/components/ui/Avatar/Avatar.tsx

@@ -3,16 +3,28 @@ import { ColorValue, StyleProp, StyleSheet, View, ViewStyle } from 'react-native
 
 import { avatarSizes } from './constants';
 
+import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../theme';
 
 export type AvatarProps = {
   size: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+  /**
+   * Override for the auto-generated accessibility label. When omitted and a
+   * `name` is provided, the SDK uses `a11y/Avatar of {{name}}`.
+   */
+  accessibilityLabel?: string;
+  backgroundColor?: ColorValue;
   imageUrl?: string;
+  /**
+   * Display name of the entity this avatar represents (user, channel). Used to
+   * compose the default `accessibilityLabel`. Optional — when neither this nor
+   * `accessibilityLabel` is provided, the avatar is left unlabeled.
+   */
+  name?: string;
   placeholder?: React.ReactNode;
   showBorder?: boolean;
-  backgroundColor?: ColorValue;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -24,14 +36,18 @@ export const Avatar = (props: AvatarProps) => {
   const { ImageComponent } = useComponentsContext();
   const defaultAvatarBg = semantics.avatarPaletteBg1;
   const {
+    accessibilityLabel: accessibilityLabelOverride,
     backgroundColor = defaultAvatarBg,
-    size,
     imageUrl,
+    name,
     placeholder,
     showBorder,
+    size,
     style,
   } = props;
   const styles = useStyles();
+  const composedLabel = useA11yLabel('a11y/Avatar of {{name}}', { name: name ?? '' });
+  const accessibilityLabel = accessibilityLabelOverride ?? (name ? composedLabel : undefined);
 
   const onHandleError = useCallback(() => {
     setError(true);
@@ -39,6 +55,9 @@ export const Avatar = (props: AvatarProps) => {
 
   return (
     <View
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityLabel ? 'image' : undefined}
+      accessible={accessibilityLabel ? true : undefined}
       style={[
         styles.container,
         avatarSizes[size],
@@ -50,6 +69,8 @@ export const Avatar = (props: AvatarProps) => {
     >
       {imageUrl && !error ? (
         <ImageComponent
+          accessibilityElementsHidden
+          importantForAccessibility='no'
           onError={onHandleError}
           source={{ uri: imageUrl }}
           style={[styles.image, avatarSizes[size]]}

package/src/components/ui/Avatar/ChannelAvatar.tsx

@@ -45,11 +45,14 @@ export const ChannelAvatar = (props: ChannelAvatarProps) => {
     [usersForGroup, client.user?.id],
   );
 
+  const channelName = (channel.data?.name as string | undefined) ?? channel.cid;
+
   if (channelImage) {
     return (
       <Avatar
         backgroundColor={avatarBackgroundColor}
         imageUrl={channelImage}
+        name={channelName}
         showBorder={showBorder}
         size={size}
       />

package/src/components/ui/Avatar/UserAvatar.tsx

@@ -50,6 +50,7 @@ export const UserAvatar = (props: UserAvatarProps) => {
       <Avatar
         backgroundColor={avatarBackgroundColor}
         imageUrl={user?.image}
+        name={user?.name || user?.id}
         placeholder={placeholder}
         showBorder={showBorder}
         size={size}