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

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/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx

@@ -2,13 +2,22 @@ import React, { useMemo } from 'react';
 
 import { Pressable, PressableProps, StyleSheet } from 'react-native';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { NewClose } from '../../../../icons/xmark';
 import { primitives } from '../../../../theme';
 
-type AttachmentRemoveControlProps = PressableProps;
+type AttachmentRemoveControlProps = PressableProps & {
+  accessibilityLabelKey?: string;
+  accessibilityLabelParams?: Record<string, unknown>;
+};
 
-export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProps) => {
+export const AttachmentRemoveControl = ({
+  accessibilityLabelKey = 'a11y/Remove attachment',
+  accessibilityLabelParams,
+  onPress,
+  ...rest
+}: AttachmentRemoveControlProps) => {
   const {
     theme: {
       semantics,
@@ -18,9 +27,15 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp
     },
   } = useTheme();
   const styles = useStyles();
+  const translatedAccessibilityLabel = useA11yLabel(
+    accessibilityLabelKey,
+    accessibilityLabelParams,
+  );
 
   return (
     <Pressable
+      accessibilityLabel={translatedAccessibilityLabel}
+      accessibilityRole='button'
       hitSlop={15}
       onPress={onPress}
       style={({ pressed }) => [
@@ -31,6 +46,7 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp
         dismiss,
       ]}
       testID='remove-upload-preview'
+      {...rest}
     >
       <NewClose
         height={16}

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

@@ -59,6 +59,7 @@ const StopRecording = ({
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Stop voice recording'
       variant='destructive'
       type='outline'
       size='sm'
@@ -83,6 +84,7 @@ const UploadRecording = ({
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Send voice recording'
       variant='primary'
       type='solid'
       onPress={onUploadVoiceRecording}
@@ -104,6 +106,7 @@ const DeleteRecording = ({
   };
   return (
     <Button
+      accessibilityLabelKey='a11y/Delete voice recording'
       variant='secondary'
       type='outline'
       size='sm'

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

@@ -10,6 +10,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { useActiveAudioPlayer } from '../../../../contexts/audioPlayerContext/AudioPlayerContext';
 import {
   MessageInputContextValue,
@@ -83,6 +84,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   const pressed = useSharedValue(false);
 
   const { t } = useTranslationContext();
+  const startVoiceRecordingAccessibilityLabel = useA11yLabel('a11y/Start voice recording');
   const {
     theme: {
       messageComposer: { micButtonContainer },
@@ -238,7 +240,12 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
 
   return (
     <GestureDetector gesture={Gesture.Simultaneous(panGesture, tapGesture)}>
-      <Animated.View style={[styles.container, animatedStyle, micButtonContainer]}>
+      <Animated.View
+        accessibilityLabel={startVoiceRecordingAccessibilityLabel}
+        accessibilityRole='button'
+        accessible
+        style={[styles.container, animatedStyle, micButtonContainer]}
+      >
         <Mic height={20} width={20} strokeWidth={1.5} stroke={buttonStyles.foregroundColor} />
       </Animated.View>
     </GestureDetector>

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -10,6 +10,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStableCallback } from '../../../../hooks';
+import { useAttachmentPickerState } from '../../../../hooks/useAttachmentPickerState';
 import { Plus } from '../../../../icons/plus';
 import { Button } from '../../../ui/';
 
@@ -18,6 +19,7 @@ type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttach
     disabled?: boolean;
     /** Function that opens attachment options bottom sheet */
     handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
+    isAttachmentPickerOpen?: boolean;
   } & { toggleAttachmentPicker: () => void };
 
 const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
@@ -25,6 +27,7 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
     disabled = false,
     handleAttachButtonPress,
     handleOnPress,
+    isAttachmentPickerOpen = false,
     toggleAttachmentPicker,
   } = props;
 
@@ -45,6 +48,9 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
 
   return (
     <Button
+      accessibilityLabelKey={
+        isAttachmentPickerOpen ? 'a11y/Close attachments' : 'a11y/Add attachment'
+      }
       variant='secondary'
       type='outline'
       size='lg'
@@ -61,15 +67,17 @@ const areEqual = (
   prevProps: AttachButtonPropsWithContext,
   nextProps: AttachButtonPropsWithContext,
 ) => {
-  const { handleOnPress: prevHandleOnPress } = prevProps;
-  const { handleOnPress: nextHandleOnPress } = nextProps;
+  const { handleOnPress: prevHandleOnPress, isAttachmentPickerOpen: prevIsAttachmentPickerOpen } =
+    prevProps;
+  const { handleOnPress: nextHandleOnPress, isAttachmentPickerOpen: nextIsAttachmentPickerOpen } =
+    nextProps;
 
   const handleOnPressEqual = prevHandleOnPress === nextHandleOnPress;
   if (!handleOnPressEqual) {
     return false;
   }
 
-  return true;
+  return prevIsAttachmentPickerOpen === nextIsAttachmentPickerOpen;
 };
 
 const MemoizedAttachButton = React.memo(
@@ -86,6 +94,7 @@ export const AttachButton = (props: AttachButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
   const { inputBoxRef, handleAttachButtonPress, openAttachmentPicker } = useMessageInputContext();
   const { attachmentPickerStore } = useAttachmentPickerContext();
+  const { selectedPicker } = useAttachmentPickerState();
 
   const toggleAttachmentPicker = useStableCallback(() => {
     if (attachmentPickerStore.state.getLatestValue().selectedPicker) {
@@ -100,6 +109,7 @@ export const AttachButton = (props: AttachButtonProps) => {
       {...{
         disableAttachmentPicker,
         handleAttachButtonPress,
+        isAttachmentPickerOpen: !!selectedPicker,
         toggleAttachmentPicker,
       }}
       {...props}

package/src/components/MessageInput/components/OutputButtons/EditButton.tsx

@@ -26,6 +26,7 @@ export const EditButton = (props: EditButtonProps) => {
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Save edited message'
       variant='primary'
       type='solid'
       LeadingIcon={Tick}

package/src/components/MessageInput/components/OutputButtons/SendButton.tsx

@@ -26,6 +26,7 @@ export const SendButton = (props: SendButtonProps) => {
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Send message'
       variant='primary'
       type='solid'
       disabled={disabled}

package/src/components/MessageList/MessageFlashList.tsx

@@ -14,6 +14,7 @@ import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
+import { useScrollToBottomAccessibilityAction } from './hooks/useScrollToBottomAccessibilityAction';
 import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollToRecentOnNewOwnMessage';
 import { useTypingUsers } from './hooks/useTypingUsers';
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
@@ -920,6 +921,19 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     });
   });
 
+  const scrollToBottomUnreadCount =
+    scrollToBottomButtonVisible && !threadList ? channel?.countUnread() : undefined;
+  const {
+    accessibilityActions: messageListAccessibilityActions,
+    onAccessibilityAction: messageListOnAccessibilityAction,
+  } = useScrollToBottomAccessibilityAction({
+    accessibilityActions: additionalFlashListProps?.accessibilityActions,
+    onAccessibilityAction: additionalFlashListProps?.onAccessibilityAction,
+    onScrollToBottom: goToNewMessages,
+    unreadCount: scrollToBottomUnreadCount,
+    visible: scrollToBottomButtonVisible,
+  });
+
   const dismissImagePicker = useStableCallback(() => {
     if (attachmentPickerStore.state.getLatestValue().selectedPicker) {
       attachmentPickerStore.setSelectedPicker(undefined);
@@ -1072,10 +1086,17 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             testID='message-flash-list'
             viewabilityConfig={flatListViewabilityConfig}
             {...additionalFlashListPropsExcludingStyle}
+            accessibilityActions={messageListAccessibilityActions}
+            onAccessibilityAction={messageListOnAccessibilityAction}
           />
         </MessageListItemProvider>
       )}
-      <View style={styles.stickyHeaderContainer}>
+      <View
+        accessibilityElementsHidden
+        accessible={false}
+        importantForAccessibility='no-hide-descendants'
+        style={styles.stickyHeaderContainer}
+      >
         {messageListLengthAfterUpdate && StickyHeader ? (
           <StickyHeader date={stickyHeaderDate} />
         ) : null}
@@ -1094,7 +1115,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
         <ScrollToBottomButton
           onPress={goToNewMessages}
           showNotification={scrollToBottomButtonVisible}
-          unreadCount={threadList ? 0 : channel?.countUnread()}
+          unreadCount={scrollToBottomUnreadCount}
         />
       </Animated.View>
       <NetworkDownIndicator />

package/src/components/MessageList/MessageList.tsx

@@ -18,6 +18,7 @@ import debounce from 'lodash/debounce';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
+import { useScrollToBottomAccessibilityAction } from './hooks/useScrollToBottomAccessibilityAction';
 import { useShouldScrollToRecentOnNewOwnMessage } from './hooks/useShouldScrollToRecentOnNewOwnMessage';
 
 import { InlineLoadingMoreIndicator } from './InlineLoadingMoreIndicator';
@@ -37,6 +38,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 +72,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 +368,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(
@@ -1037,6 +1047,19 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     });
   });
 
+  const scrollToBottomUnreadCount =
+    scrollToBottomButtonVisible && !threadList ? channel?.countUnread() : undefined;
+  const {
+    accessibilityActions: messageListAccessibilityActions,
+    onAccessibilityAction: messageListOnAccessibilityAction,
+  } = useScrollToBottomAccessibilityAction({
+    accessibilityActions: additionalFlatListProps?.accessibilityActions,
+    onAccessibilityAction: additionalFlatListProps?.onAccessibilityAction,
+    onScrollToBottom: goToNewMessages,
+    unreadCount: scrollToBottomUnreadCount,
+    visible: scrollToBottomButtonVisible,
+  });
+
   const scrollToIndexFailedRetryCountRef = useRef<number>(0);
   const failScrollTimeoutId = useRef<ReturnType<typeof setTimeout>>(undefined);
   const onScrollToIndexFailedRef = useRef<
@@ -1289,10 +1312,17 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
             testID='message-flat-list'
             viewabilityConfig={flatListViewabilityConfig}
             {...additionalFlatListPropsExcludingStyle}
+            accessibilityActions={messageListAccessibilityActions}
+            onAccessibilityAction={messageListOnAccessibilityAction}
           />
         </MessageListItemProvider>
       )}
-      <View style={styles.stickyHeaderContainer}>
+      <View
+        accessibilityElementsHidden
+        accessible={false}
+        importantForAccessibility='no-hide-descendants'
+        style={styles.stickyHeaderContainer}
+      >
         {messageListLengthAfterUpdate && StickyHeader ? (
           <StickyHeader date={stickyHeaderDate} />
         ) : null}
@@ -1312,7 +1342,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           <ScrollToBottomButton
             onPress={goToNewMessages}
             showNotification={scrollToBottomButtonVisible}
-            unreadCount={threadList ? 0 : channel?.countUnread()}
+            unreadCount={scrollToBottomUnreadCount}
           />
         </Animated.View>
       ) : null}

package/src/components/MessageList/ScrollToBottomButton.tsx

@@ -9,6 +9,10 @@ import { primitives } from '../../theme';
 import { BadgeNotification } from '../ui';
 import { Button } from '../ui/Button';
 
+export const SCROLL_TO_BOTTOM_ACCESSIBILITY_LABEL_KEY = 'a11y/Scroll to bottom';
+export const SCROLL_TO_BOTTOM_WITH_COUNT_ACCESSIBILITY_LABEL_KEY =
+  'a11y/Scroll to bottom, {{count}} new messages';
+
 export type ScrollToBottomButtonProps = {
   /** onPress handler */
   onPress: () => void;
@@ -22,6 +26,10 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
   const {
     theme: { semantics },
   } = useTheme();
+  const accessibilityLabelParams = React.useMemo(
+    () => (unreadCount ? { count: unreadCount } : undefined),
+    [unreadCount],
+  );
 
   if (!showNotification) {
     return null;
@@ -42,6 +50,12 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
         ]}
       >
         <Button
+          accessibilityLabelKey={
+            unreadCount
+              ? SCROLL_TO_BOTTOM_WITH_COUNT_ACCESSIBILITY_LABEL_KEY
+              : SCROLL_TO_BOTTOM_ACCESSIBILITY_LABEL_KEY
+          }
+          accessibilityLabelParams={accessibilityLabelParams}
           variant='secondary'
           type='outline'
           LeadingIcon={Down}
@@ -52,7 +66,11 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
         />
       </View>
 
-      <View style={styles.unreadCountNotificationContainer}>
+      <View
+        accessibilityElementsHidden
+        importantForAccessibility='no-hide-descendants'
+        style={styles.unreadCountNotificationContainer}
+      >
         {unreadCount ? (
           <BadgeNotification count={unreadCount} size='xs' type='primary' testID='unread-count' />
         ) : null}

package/src/components/MessageList/UnreadMessagesNotification.tsx

@@ -84,6 +84,7 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
       </View>
       <View style={styles.rightButtonContainer}>
         <Button
+          accessibilityLabelKey='a11y/Dismiss unread messages'
           variant='secondary'
           type='ghost'
           iconOnly