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

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx

@@ -6,6 +6,7 @@ import { FileReference, isLocalImageAttachment, isLocalVideoAttachment } from 's
 
 import { isIosLimited, type PhotoContentItemType } from './shared';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { useAttachmentPickerContext } from '../../../../contexts';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';
@@ -52,9 +53,11 @@ const AttachmentVideo = (props: AttachmentPickerItemType) => {
   const { duration: videoDuration, thumb_url } = asset;
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
+  const selected = selectedIndex !== -1;
+  const accessibilityLabel = useA11yLabel(selected ? 'a11y/Deselect video' : 'a11y/Select video');
 
   const onPressVideo = async () => {
-    if (selectedIndex !== -1) {
+    if (selected) {
       const attachment = attachments[selectedIndex];
       if (attachment) {
         attachmentManager.removeAttachments([attachment.localMetadata.id]);
@@ -70,6 +73,10 @@ const AttachmentVideo = (props: AttachmentPickerItemType) => {
 
   return (
     <BottomSheetTouchableOpacity
+      accessible={accessibilityLabel ? true : undefined}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityLabel ? 'button' : undefined}
+      accessibilityState={accessibilityLabel ? { selected } : undefined}
       onPress={onPressVideo}
       style={[
         {
@@ -110,11 +117,13 @@ const AttachmentImage = (props: AttachmentPickerItemType) => {
   );
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
+  const selected = selectedIndex !== -1;
+  const accessibilityLabel = useA11yLabel(selected ? 'a11y/Deselect image' : 'a11y/Select image');
 
   const { uri } = asset;
 
   const onPressImage = async () => {
-    if (selectedIndex !== -1) {
+    if (selected) {
       const attachment = attachments[selectedIndex];
       if (attachment) {
         await attachmentManager.removeAttachments([attachment.localMetadata.id]);
@@ -130,6 +139,10 @@ const AttachmentImage = (props: AttachmentPickerItemType) => {
 
   return (
     <BottomSheetTouchableOpacity
+      accessible={accessibilityLabel ? true : undefined}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityLabel ? 'button' : undefined}
+      accessibilityState={accessibilityLabel ? { selected } : undefined}
       onPress={onPressImage}
       style={[
         {

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -141,6 +141,7 @@ export const AttachmentCommandPicker = () => {
         renderItem={renderItem}
         data={commands}
         keyExtractor={keyExtractor}
+        showsVerticalScrollIndicator={false}
       />
     </>
   );

package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx

@@ -28,12 +28,14 @@ import { Button, ButtonProps } from '../../ui';
 import { BottomSheetModal } from '../../UIComponents';
 
 export type AttachmentTypePickerButtonProps = Pick<ButtonProps, 'selected' | 'onPress'> & {
+  accessibilityLabelKey?: string;
   Icon: ButtonProps['LeadingIcon'];
 } & Pick<PressableProps, 'testID'>;
 
 const hitSlop = { bottom: 15, top: 15 };
 
 export const AttachmentTypePickerButton = ({
+  accessibilityLabelKey,
   testID,
   selected,
   onPress: onPressProp,
@@ -52,6 +54,7 @@ export const AttachmentTypePickerButton = ({
 
   return (
     <Button
+      accessibilityLabelKey={accessibilityLabelKey}
       testID={testID}
       hitSlop={hitSlop}
       onPress={onPress}
@@ -80,6 +83,7 @@ export const MediaPickerButton = () => {
 
   return hasImagePicker ? (
     <AttachmentTypePickerButton
+      accessibilityLabelKey='a11y/Open photo picker'
       testID='upload-photo-touchable'
       Icon={Picture}
       selected={selectedPicker === 'images'}
@@ -113,6 +117,7 @@ export const CameraPickerButton = () => {
   return hasCameraPicker ? (
     <>
       <AttachmentTypePickerButton
+        accessibilityLabelKey='a11y/Open camera'
         testID='take-photo-touchable'
         Icon={Camera}
         selected={selectedPicker === 'camera-photo'}
@@ -120,6 +125,7 @@ export const CameraPickerButton = () => {
       />
       {Platform.OS === 'android' ? (
         <AttachmentTypePickerButton
+          accessibilityLabelKey='a11y/Open video recorder'
           Icon={VideoIcon}
           selected={selectedPicker === 'camera-video'}
           onPress={onVideoRecorderPickerPress}
@@ -144,6 +150,7 @@ export const FilePickerButton = () => {
 
   return hasFilePicker ? (
     <AttachmentTypePickerButton
+      accessibilityLabelKey='a11y/Open file picker'
       testID='upload-file-touchable'
       Icon={FilePickerIcon}
       selected={selectedPicker === 'files'}
@@ -171,6 +178,7 @@ export const PollPickerButton = () => {
 
   return !threadList && hasCreatePoll && ownCapabilities.sendPoll ? ( // do not allow poll creation in threads
     <AttachmentTypePickerButton
+      accessibilityLabelKey='a11y/Open poll creation'
       testID='create-poll-touchable'
       Icon={PollThumbnail}
       selected={selectedPicker === 'polls'}
@@ -198,6 +206,7 @@ export const CommandsPickerButton = () => {
   return hasCommands ? (
     <>
       <AttachmentTypePickerButton
+        accessibilityLabelKey='a11y/Open commands'
         testID='commands-touchable'
         Icon={CommandsIcon}
         selected={selectedPicker === 'commands'}

package/src/components/Channel/Channel.tsx

@@ -49,6 +49,7 @@ import {
   AudioPlayerContextProps,
   AudioPlayerProvider,
 } from '../../contexts/audioPlayerContext/AudioPlayerContext';
+
 import { ChannelContextValue, ChannelProvider } from '../../contexts/channelContext/ChannelContext';
 import type { UseChannelStateValue } from '../../contexts/channelsStateContext/useChannelState';
 import { useChannelState } from '../../contexts/channelsStateContext/useChannelState';
@@ -111,6 +112,7 @@ import {
   MessageStatusTypes,
   ReactionData,
 } from '../../utils/utils';
+import { NotificationAnnouncer } from '../Accessibility/NotificationAnnouncer';
 import { AttachmentPicker } from '../AttachmentPicker/AttachmentPicker';
 import type { KeyboardCompatibleViewProps } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { Emoji } from '../MessageMenu/EmojiPickerList';
@@ -1754,6 +1756,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
                     <MessageComposerProvider value={messageComposerContext}>
                       <MessageInputProvider value={inputMessageInputContext}>
                         <AudioPlayerProvider value={audioPlayerContext}>
+                          <NotificationAnnouncer />
                           <View style={{ height: '100%' }}>{children}</View>
                           <AttachmentPicker />
                         </AudioPlayerProvider>

package/src/components/ChannelList/__tests__/ChannelListView.test.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
 import { cleanup, render, waitFor } from '@testing-library/react-native';
-import type { StreamChat } from 'stream-chat';
+import type { Channel, QueryChannelsRequestType, StreamChat } from 'stream-chat';
 
 import type { ChannelsContextValue } from '../../../contexts/channelsContext/ChannelsContext';
 import { ChannelsProvider } from '../../../contexts/channelsContext/ChannelsContext';
 import { ChatContext, ChatProvider } from '../../../contexts/chatContext/ChatContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
-import { queryChannelsApi } from '../../../mock-builders/api/queryChannels';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
@@ -16,6 +15,11 @@ import { ChannelList } from '../ChannelList';
 import { ChannelListView } from '../ChannelListView';
 
 let chatClient: StreamChat;
+let defaultChannels: Channel[];
+let queryChannelsResponse: Channel[];
+
+const queryChannelsOverride: QueryChannelsRequestType = () =>
+  Promise.resolve(queryChannelsResponse);
 
 /**
  * Renders the full ChannelList (which now always uses ChannelListView internally).
@@ -31,6 +35,7 @@ const Component = () => (
                 $in: ['vishal', 'neil'],
               },
             }}
+            queryChannelsOverride={queryChannelsOverride}
           />
         </ChatProvider>
       )}
@@ -90,13 +95,19 @@ describe('ChannelListView', () => {
     chatClient = await getTestClientWithUser({ id: 'vishal' });
     const c1 = generateChannelResponse();
     const c2 = generateChannelResponse();
-    useMockedApis(chatClient, [getOrCreateChannelApi(c1), getOrCreateChannelApi(c2)]);
+    useMockedApis(chatClient, [getOrCreateChannelApi(c1)]);
     const channel1 = chatClient.channel(c1.channel.type, c1.channel.id);
     await channel1.watch();
+    useMockedApis(chatClient, [getOrCreateChannelApi(c2)]);
     const channel2 = chatClient.channel(c2.channel.type, c2.channel.id);
     await channel2.watch();
-    useMockedApis(chatClient, [queryChannelsApi([channel1, channel2])]);
+    defaultChannels = [channel1, channel2];
+  });
+
+  beforeEach(() => {
+    queryChannelsResponse = defaultChannels;
   });
+
   afterEach(cleanup);
 
   it('renders without crashing', async () => {
@@ -107,7 +118,7 @@ describe('ChannelListView', () => {
   });
 
   it('renders the `EmptyStateIndicator` when no channels are present', async () => {
-    useMockedApis(chatClient, [queryChannelsApi([])]);
+    queryChannelsResponse = [];
     const { getByTestId } = render(<Component />);
     await waitFor(() => {
       expect(getByTestId('empty-channel-state-title')).toBeTruthy();

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -5,6 +5,7 @@ import { LocalMessage, MessageResponse } from 'stream-chat';
 
 import { ChannelPreviewProps } from './ChannelPreview';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -61,6 +62,18 @@ export const ChannelMessagePreviewDeliveryStatus = ({
     isReadEventsEnabled: readEvents,
   });
 
+  const statusLabel = useA11yLabel(
+    message.status === MessageStatusTypes.SENDING
+      ? 'a11y/Sending'
+      : message.status === MessageStatusTypes.RECEIVED && status === MessageDeliveryStatus.READ
+        ? 'a11y/Read'
+        : status === MessageDeliveryStatus.DELIVERED
+          ? 'a11y/Delivered'
+          : status === MessageDeliveryStatus.SENT
+            ? 'a11y/Sent'
+            : 'a11y/Sending',
+  );
+
   if (!channel.data?.name && membersWithoutSelf.length === 1 && !isLastMessageByCurrentUser) {
     return null;
   }
@@ -70,7 +83,7 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   }
 
   return (
-    <View style={styles.container}>
+    <View accessibilityLabel={statusLabel} accessibilityRole='text' style={styles.container}>
       {message.status === MessageStatusTypes.SENDING ? (
         <Time stroke={semantics.chatTextTimestamp} height={16} width={16} {...timeIcon} />
       ) : message.status === MessageStatusTypes.RECEIVED &&

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -59,7 +59,10 @@ const ImageGalleryComponentVideo = (props: ImageGalleryProps) => {
   });
 
   return (
-    <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
+    <OverlayProvider
+      accessibility={{ enabled: true }}
+      value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}
+    >
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       <WithComponents overrides={{ ImageGalleryHeader: undefined as any }}>
         <ImageGalleryContext.Provider
@@ -101,7 +104,10 @@ const ImageGalleryComponentImage = (
   });
 
   return (
-    <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
+    <OverlayProvider
+      accessibility={{ enabled: true }}
+      value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}
+    >
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       <WithComponents overrides={{ ImageGalleryHeader: undefined as any }}>
         <ImageGalleryContext.Provider
@@ -129,7 +135,7 @@ describe('ImageGalleryFooter', () => {
     });
   });
 
-  it('render image gallery footer component with Share Button and Grid Icon', async () => {
+  it('render image gallery footer component with share and grid buttons', async () => {
     render(<ImageGalleryComponentVideo />);
 
     await waitFor(() => {

package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx

@@ -47,7 +47,10 @@ const ImageGalleryComponent = (props: ImageGalleryProps) => {
   }, [imageGalleryStateStore]);
 
   return (
-    <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
+    <OverlayProvider
+      accessibility={{ enabled: true }}
+      value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}
+    >
       <ImageGalleryContext.Provider
         value={
           {

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -134,7 +134,7 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) =>
             </Text>
           </View>
           <Button
-            accessibilityLabel='Grid Icon'
+            accessibilityLabelKey='a11y/Grid Icon'
             variant='secondary'
             type='ghost'
             size='md'
@@ -166,7 +166,7 @@ const ShareButton = ({ share, savingInProgress }: ShareButtonProps) => {
     </View>
   ) : (
     <Button
-      accessibilityLabel='Share Button'
+      accessibilityLabelKey='a11y/Share Button'
       variant='secondary'
       type='ghost'
       size='md'

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -74,7 +74,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
       <ReanimatedSafeAreaView edges={['top']} style={[styles.container, headerStyle]}>
         <View style={styles.innerContainer}>
           <Button
-            accessibilityLabel='Hide Overlay'
+            accessibilityLabelKey='a11y/Hide Overlay'
             variant='secondary'
             type='ghost'
             size='md'

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -74,7 +74,7 @@ export const ImageGalleryVideoControl = React.memo((props: ImageGalleryVideoCont
     <View style={[styles.container, container]}>
       <View style={styles.leftContainer}>
         <Button
-          accessibilityLabel='Play Pause Button'
+          accessibilityLabelKey='a11y/Play Pause Button'
           variant='secondary'
           type='ghost'
           size='md'

package/src/components/Indicators/LoadingDots.tsx

@@ -31,7 +31,11 @@ export const LoadingDots = (props: Props) => {
   const offsetLength = duration / numberOfDots;
 
   return (
-    <View style={[{ flexDirection: 'row' }, container, style]}>
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility='no-hide-descendants'
+      style={[{ flexDirection: 'row' }, container, style]}
+    >
       {Array.from(Array(numberOfDots)).map((_item, index) => (
         <LoadingDot
           diameter={diameter}

package/src/components/Indicators/LoadingErrorIndicator.tsx

@@ -16,7 +16,13 @@ const LoadingErrorWrapper = (props: React.PropsWithChildren<LoadingErrorWrapperP
   const styles = useStyles();
 
   return (
-    <TouchableOpacity onPress={onPress} style={styles.container}>
+    <TouchableOpacity
+      accessibilityHint={onPress ? 'Tap to retry' : undefined}
+      accessibilityLiveRegion='assertive'
+      accessibilityRole={onPress ? 'button' : 'alert'}
+      onPress={onPress}
+      style={styles.container}
+    >
       <Text style={styles.errorText} testID='loading-error'>
         {text}
       </Text>

package/src/components/Indicators/LoadingIndicator.tsx

@@ -12,7 +12,7 @@ const LoadingIndicatorWrapper = ({ text }: LoadingIndicatorWrapperProps) => {
   const styles = useStyles();
 
   return (
-    <View style={styles.container}>
+    <View accessibilityLiveRegion='polite' accessibilityRole='progressbar' style={styles.container}>
       <Spinner height={20} width={20} />
       {text ? (
         <Text style={styles.loadingText} testID='loading'>

package/src/components/Message/MessageItemView/__tests__/__snapshots__/MessageAuthor.test.tsx.snap

@@ -34,6 +34,8 @@ exports[`MessageAuthor should render message author 1`] = `
       testID="avatar-image"
     >
       <Image
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
         onError={[Function]}
         source={
           {

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

@@ -36,13 +36,14 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
         }
       >
         <View
+          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
               "disabled": false,
               "expanded": undefined,
-              "selected": undefined,
+              "selected": false,
             }
           }
           accessibilityValue={
@@ -196,13 +197,14 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -335,13 +337,14 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -503,13 +506,14 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -638,13 +642,14 @@ exports[`AttachButton should call handleAttachButtonPress when the button is cli
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -905,13 +910,14 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
         }
       >
         <View
+          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
               "disabled": false,
               "expanded": undefined,
-              "selected": undefined,
+              "selected": false,
             }
           }
           accessibilityValue={
@@ -1065,13 +1071,14 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1204,13 +1211,14 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1372,13 +1380,14 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1507,13 +1516,14 @@ exports[`AttachButton should render a enabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -1774,13 +1784,14 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
         }
       >
         <View
+          accessibilityRole="button"
           accessibilityState={
             {
               "busy": undefined,
               "checked": undefined,
               "disabled": true,
               "expanded": undefined,
-              "selected": undefined,
+              "selected": false,
             }
           }
           accessibilityValue={
@@ -1934,13 +1945,14 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -2073,13 +2085,14 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -2241,13 +2254,14 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={
@@ -2376,13 +2390,14 @@ exports[`AttachButton should render an disabled AttachButton 1`] = `
             }
           >
             <View
+              accessibilityRole="button"
               accessibilityState={
                 {
                   "busy": undefined,
                   "checked": undefined,
                   "disabled": false,
                   "expanded": undefined,
-                  "selected": undefined,
+                  "selected": false,
                 }
               }
               accessibilityValue={