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

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -13,6 +13,7 @@ import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../../hooks';
 import { Check, CheckAll, Time } from '../../icons';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
+import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
 export type ChannelMessagePreviewDeliveryStatusProps = Pick<ChannelPreviewProps, 'channel'> & {
   message: MessageResponse | LocalMessage;
@@ -66,11 +67,11 @@ export const ChannelMessagePreviewDeliveryStatus = ({
     message.status === MessageStatusTypes.SENDING
       ? 'a11y/Sending'
       : message.status === MessageStatusTypes.RECEIVED && status === MessageDeliveryStatus.READ
-        ? 'a11y/Read'
+        ? 'a11y/Read, sent by you'
         : status === MessageDeliveryStatus.DELIVERED
-          ? 'a11y/Delivered'
+          ? 'a11y/Delivered, sent by you'
           : status === MessageDeliveryStatus.SENT
-            ? 'a11y/Sent'
+            ? 'a11y/Sent by you'
             : 'a11y/Sending',
   );
 
@@ -83,19 +84,21 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   }
 
   return (
-    <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 &&
-        status === MessageDeliveryStatus.READ ? (
-        <CheckAll stroke={semantics.accentPrimary} height={16} width={16} {...checkAllIcon} />
-      ) : status === MessageDeliveryStatus.DELIVERED ? (
-        <CheckAll stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkAllIcon} />
-      ) : status === MessageDeliveryStatus.SENT ? (
-        <Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
-      ) : null}
-      <Text style={styles.text}>{t('You')}:</Text>
-    </View>
+    <CompositeAccessibilityProbe label={statusLabel}>
+      <View style={styles.container}>
+        {message.status === MessageStatusTypes.SENDING ? (
+          <Time stroke={semantics.chatTextTimestamp} height={16} width={16} {...timeIcon} />
+        ) : message.status === MessageStatusTypes.RECEIVED &&
+          status === MessageDeliveryStatus.READ ? (
+          <CheckAll stroke={semantics.accentPrimary} height={16} width={16} {...checkAllIcon} />
+        ) : status === MessageDeliveryStatus.DELIVERED ? (
+          <CheckAll stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkAllIcon} />
+        ) : status === MessageDeliveryStatus.SENT ? (
+          <Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
+        ) : null}
+        <Text style={styles.text}>{t('You')}:</Text>
+      </View>
+    </CompositeAccessibilityProbe>
   );
 };
 

package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Mute } from '../../icons';
+import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
 /**
  * This UI component displays an avatar for a particular channel.
@@ -13,6 +15,11 @@ export const ChannelPreviewMutedStatus = () => {
       semantics,
     },
   } = useTheme();
+  const accessibilityLabel = useA11yLabel('a11y/Muted');
 
-  return <Mute height={20} fill={semantics.textTertiary} width={20} {...mutedStatus} />;
+  return (
+    <CompositeAccessibilityProbe label={accessibilityLabel}>
+      <Mute height={20} fill={semantics.textTertiary} width={20} {...mutedStatus} />
+    </CompositeAccessibilityProbe>
+  );
 };

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -4,11 +4,12 @@ import { StyleSheet, Text } from 'react-native';
 import type { ChannelPreviewProps } from './ChannelPreview';
 import type { ChannelPreviewViewPropsWithContext } from './ChannelPreviewView';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 import { primitives } from '../../theme';
-import { getDateString } from '../../utils/i18n/getDateString';
+import { getDateString, getDateStringForA11y } from '../../utils/i18n/getDateString';
 
 export type ChannelPreviewStatusProps = Pick<
   ChannelPreviewViewPropsWithContext,
@@ -18,7 +19,7 @@ export type ChannelPreviewStatusProps = Pick<
 
 export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
   const { formatLatestMessageDate, lastMessage } = props;
-  const { t, tDateTimeParser } = useTranslationContext();
+  const { t, tDateTimeParser, userLanguage } = useTranslationContext();
   const styles = useStyles();
 
   const created_at = lastMessage?.created_at;
@@ -35,11 +36,30 @@ export const ChannelPreviewStatus = (props: ChannelPreviewStatusProps) => {
     [created_at, t, tDateTimeParser],
   );
 
+  const a11yDate = useMemo(
+    () =>
+      getDateStringForA11y({
+        calendarFormatOverrides: { sameDay: 'LT' },
+        date: created_at,
+        tDateTimeParser,
+        userLanguage,
+      }),
+    [created_at, tDateTimeParser, userLanguage],
+  );
+
+  const visibleDate =
+    formatLatestMessageDate && latestMessageDate
+      ? formatLatestMessageDate(latestMessageDate).toString()
+      : formattedDate;
+  const labelParams = useMemo(
+    () => ({ date: a11yDate ?? visibleDate ?? '' }),
+    [a11yDate, visibleDate],
+  );
+  const accessibilityLabel = useA11yLabel('a11y/Last message {{date}}', labelParams);
+
   return (
-    <Text style={styles.date}>
-      {formatLatestMessageDate && latestMessageDate
-        ? formatLatestMessageDate(latestMessageDate).toString()
-        : formattedDate}
+    <Text accessibilityLabel={accessibilityLabel} style={styles.date}>
+      {visibleDate}
     </Text>
   );
 };

package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { ChannelPreviewProps } from './ChannelPreview';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import type { ChannelsContextValue } from '../../contexts/channelsContext/ChannelsContext';
 import { BadgeNotification } from '../ui/Badge';
 
@@ -15,12 +16,15 @@ export type ChannelPreviewUnreadCountProps = Pick<ChannelsContextValue, 'maxUnre
 
 export const ChannelPreviewUnreadCount = (props: ChannelPreviewUnreadCountProps) => {
   const { maxUnreadCount, unread } = props;
+  const labelParams = useMemo(() => ({ count: unread ?? 0 }), [unread]);
+  const accessibilityLabel = useA11yLabel('a11y/{{count}} unread messages', labelParams);
   if (!unread) {
     return null;
   }
 
   return (
     <BadgeNotification
+      accessibilityLabel={accessibilityLabel}
       count={unread > maxUnreadCount ? maxUnreadCount : unread}
       size='sm'
       type='primary'

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -5,6 +5,7 @@ import type { ChannelPreviewProps } from './ChannelPreview';
 
 import type { LastMessageType } from './hooks/useChannelPreviewData';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import {
   ChannelsContextValue,
   useChannelsContext,
@@ -70,6 +71,7 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
   } = useTheme();
   const styles = useStyles();
   const swipeRegistry = useSwipeRegistryContext();
+  const accessibilityHint = useA11yLabel('a11y/Double tap to open');
 
   const onPress = useStableCallback(() => {
     if (swipeRegistry?.hasOpen()) {
@@ -84,6 +86,7 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
   return (
     <View style={[styles.wrapper, wrapper]}>
       <Pressable
+        accessibilityHint={accessibilityHint}
         onPress={onPress}
         style={({ pressed }) => [
           styles.container,

package/src/components/ImageGallery/ImageGallery.tsx

@@ -1,5 +1,12 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Image, ImageStyle, StyleSheet, ViewStyle } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Image,
+  ImageStyle,
+  Platform,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
@@ -21,6 +28,8 @@ import type {
 
 import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   ImageGalleryProviderProps,
@@ -280,13 +289,82 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     setIsGridViewVisible(true);
   };
 
+  const { enabled: isAccessibilityEnabled } = useAccessibilityContext();
+  const assetsCount = assets.length;
+  const isAdjustable = isAccessibilityEnabled;
+  const accessibilityValueParams = useMemo(
+    () => ({ count: assetsCount, position: currentIndex + 1 }),
+    [currentIndex, assetsCount],
+  );
+  const accessibilityValueText = useA11yLabel(
+    'a11y/{{position}} of {{count}}',
+    accessibilityValueParams,
+  );
+  const accessibilityValue = useMemo(
+    () => (accessibilityValueText ? { text: accessibilityValueText } : undefined),
+    [accessibilityValueText],
+  );
+  const adjustableActions = useMemo(
+    () =>
+      isAdjustable ? [{ name: 'increment' as const }, { name: 'decrement' as const }] : undefined,
+    [isAdjustable],
+  );
+
+  const onAccessibilityAction = useCallback(
+    (event: { nativeEvent: { actionName: string } }) => {
+      if (!isAccessibilityEnabled) return;
+      const latest = imageGalleryStateStore.state.getLatestValue();
+      const latestCount = latest.assets.length;
+      const latestIndex = latest.currentIndex;
+      if (latestCount <= 1) return;
+      if (event.nativeEvent.actionName === 'increment') {
+        if (latestIndex < latestCount - 1) {
+          imageGalleryStateStore.currentIndex = latestIndex + 1;
+        }
+      } else if (event.nativeEvent.actionName === 'decrement') {
+        if (latestIndex > 0) {
+          imageGalleryStateStore.currentIndex = latestIndex - 1;
+        }
+      }
+    },
+    [imageGalleryStateStore, isAccessibilityEnabled],
+  );
+
+  useEffect(() => {
+    return () => {
+      const handle = imageGalleryStateStore.requesterNode;
+      if (handle == null) return;
+      imageGalleryStateStore.requesterNode = null;
+      // Because of the fact that iOS and Android handle supressing
+      // the content underneath differently, we have to wait a frame
+      // before iOS is allowed to attempt to refocus (it takes a frame
+      // for the native a11y tree to become aware that it no longer has
+      // an accessibilityViewIsModal sibling).
+      if (Platform.OS === 'android') {
+        AccessibilityInfo.setAccessibilityFocus(handle);
+      } else {
+        requestAnimationFrame(() => {
+          AccessibilityInfo.setAccessibilityFocus(handle);
+        });
+      }
+    };
+  }, [imageGalleryStateStore]);
+
   return (
     <Animated.View
-      accessibilityLabel='Image Gallery'
+      accessibilityViewIsModal
       pointerEvents={'auto'}
       style={[StyleSheet.absoluteFill, showScreenStyle]}
     >
-      <Animated.View style={[StyleSheet.absoluteFill, containerBackground]} />
+      <Animated.View
+        accessible
+        accessibilityActions={adjustableActions}
+        accessibilityLabel='Image Gallery'
+        accessibilityRole={isAdjustable ? 'adjustable' : undefined}
+        accessibilityValue={isAdjustable ? accessibilityValue : undefined}
+        onAccessibilityAction={isAdjustable ? onAccessibilityAction : undefined}
+        style={[StyleSheet.absoluteFill, containerBackground]}
+      />
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
         <Animated.View style={StyleSheet.absoluteFill}>
           <Animated.View

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

@@ -99,8 +99,16 @@ describe('ImageGallery', () => {
     );
 
     await waitFor(() => {
-      expect(screen.queryAllByLabelText('Image Item')).toHaveLength(2);
-      expect(screen.queryAllByLabelText('Image Gallery Video')).toHaveLength(1);
+      // The pager subtree is marked `accessibilityElementsHidden` /
+      // `importantForAccessibility='no-hide-descendants'` so screen readers
+      // can't land on the silent shadow views inside it; the queries here
+      // opt back into hidden elements so tests can still find the assets.
+      expect(
+        screen.queryAllByLabelText('Image Item', { includeHiddenElements: true }),
+      ).toHaveLength(2);
+      expect(
+        screen.queryAllByLabelText('Image Gallery Video', { includeHiddenElements: true }),
+      ).toHaveLength(1);
     });
   });
 
@@ -116,7 +124,9 @@ describe('ImageGallery', () => {
     );
 
     await waitFor(() => {
-      const pagerStyle = StyleSheet.flatten(screen.getByTestId('image-gallery-pager').props.style);
+      const pagerStyle = StyleSheet.flatten(
+        screen.getByTestId('image-gallery-pager', { includeHiddenElements: true }).props.style,
+      );
       expect(pagerStyle.direction).toBe('ltr');
     });
   });

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

@@ -0,0 +1,141 @@
+import React, { useEffect } from 'react';
+
+import type { SharedValue } from 'react-native-reanimated';
+
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
+
+import { LocalMessage } from 'stream-chat';
+
+import {
+  ImageGalleryContext,
+  ImageGalleryContextValue,
+} from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import {
+  generateImageAttachment,
+  generateVideoAttachment,
+} from '../../../mock-builders/generator/attachment';
+import { generateMessage } from '../../../mock-builders/generator/message';
+import { ImageGalleryStateStore } from '../../../state-store/image-gallery-state-store';
+import { ImageGallery } from '../ImageGallery';
+
+jest.mock('../../../native.ts', () => {
+  const { View } = require('react-native');
+  return {
+    isFileSystemAvailable: jest.fn(() => true),
+    isImageMediaLibraryAvailable: jest.fn(() => true),
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
+    NativeHandlers: { Video: View },
+  };
+});
+
+type HarnessProps = {
+  message: LocalMessage;
+  accessibilityEnabled?: boolean;
+  store: ImageGalleryStateStore;
+};
+
+const Harness = ({ accessibilityEnabled = true, message, store }: HarnessProps) => {
+  useEffect(() => {
+    const unsubscribe = store.registerSubscriptions();
+    return () => unsubscribe();
+  }, [store]);
+
+  const { attachments } = message;
+  store.openImageGallery({
+    messages: [message],
+    selectedAttachmentUrl: attachments?.[0]?.asset_url || attachments?.[0]?.image_url || '',
+  });
+
+  return (
+    <OverlayProvider
+      accessibility={{ enabled: accessibilityEnabled }}
+      value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}
+    >
+      <ImageGalleryContext.Provider
+        value={{ imageGalleryStateStore: store } as unknown as ImageGalleryContextValue}
+      >
+        <ImageGallery />
+      </ImageGalleryContext.Provider>
+    </OverlayProvider>
+  );
+};
+
+const findGalleryRoot = () =>
+  screen.getByLabelText('Image Gallery', { includeHiddenElements: true });
+
+const fireAccessibilityAction = (actionName: 'increment' | 'decrement') => {
+  fireEvent(findGalleryRoot(), 'accessibilityAction', { nativeEvent: { actionName } });
+};
+
+const renderWithAssets = (assetsCount: number, accessibilityEnabled = true) => {
+  const attachments = [
+    ...Array.from({ length: Math.max(assetsCount - 1, 0) }, () => generateImageAttachment()),
+    ...(assetsCount > 0 ? [generateVideoAttachment({ type: 'video' })] : []),
+  ];
+  const message = generateMessage({ attachments });
+  const store = new ImageGalleryStateStore();
+  render(<Harness accessibilityEnabled={accessibilityEnabled} message={message} store={store} />);
+  return { store };
+};
+
+describe('ImageGallery adjustable cycling', () => {
+  it('marks the root as adjustable with the position value when a11y is enabled and there is more than one asset', async () => {
+    renderWithAssets(3);
+
+    await waitFor(() => {
+      const root = findGalleryRoot();
+      expect(root.props.accessibilityRole).toBe('adjustable');
+      expect(root.props.accessibilityValue).toEqual({ text: '1 of 3' });
+      expect(root.props.accessibilityActions).toEqual([
+        { name: 'increment' },
+        { name: 'decrement' },
+      ]);
+    });
+  });
+
+  it('does not apply the adjustable role when accessibility is disabled', async () => {
+    renderWithAssets(3, false);
+
+    await waitFor(() => {
+      const root = findGalleryRoot();
+      expect(root.props.accessibilityRole).toBeUndefined();
+      expect(root.props.accessibilityActions).toBeUndefined();
+    });
+  });
+
+  it('moves to the next asset on increment and clamps at the last asset', async () => {
+    const { store } = renderWithAssets(3);
+
+    await waitFor(() => expect(findGalleryRoot().props.accessibilityRole).toBe('adjustable'));
+
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(1);
+
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(2);
+
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(2);
+  });
+
+  it('moves to the previous asset on decrement and clamps at the first asset', async () => {
+    const { store } = renderWithAssets(3);
+
+    await waitFor(() => expect(findGalleryRoot().props.accessibilityRole).toBe('adjustable'));
+
+    act(() => fireAccessibilityAction('increment'));
+    act(() => fireAccessibilityAction('increment'));
+    expect(store.state.getLatestValue().currentIndex).toBe(2);
+
+    act(() => fireAccessibilityAction('decrement'));
+    expect(store.state.getLatestValue().currentIndex).toBe(1);
+
+    act(() => fireAccessibilityAction('decrement'));
+    expect(store.state.getLatestValue().currentIndex).toBe(0);
+
+    act(() => fireAccessibilityAction('decrement'));
+    expect(store.state.getLatestValue().currentIndex).toBe(0);
+  });
+});

package/src/components/Message/MessageItemView/Headers/MessageReminderHeader.tsx

@@ -33,7 +33,13 @@ const MessageReminderHeaderWithContext = (props: MessageReminderHeaderPropsWithC
       <Text style={styles.label}>
         {isReminderTimeLeft ? t('Reminder set') : t('Reminder overdue')}
       </Text>
-      <Text style={styles.dot}>·</Text>
+      <Text
+        accessibilityElementsHidden
+        importantForAccessibility='no-hide-descendants'
+        style={styles.dot}
+      >
+        ·
+      </Text>
       <Text style={styles.time}>
         {t('duration/Message reminder', {
           milliseconds: timeLeftMs,

package/src/components/Message/MessageItemView/Headers/SentToChannelHeader.tsx

@@ -43,7 +43,13 @@ const SentToChannelHeaderWithContext = (props: SentToChannelHeaderPropsWithConte
       </Text>
       {showViewText ? (
         <>
-          <Text style={styles.dot}>·</Text>
+          <Text
+            accessibilityElementsHidden
+            importantForAccessibility='no-hide-descendants'
+            style={styles.dot}
+          >
+            ·
+          </Text>
           <Pressable onPress={onPress}>
             <Text style={styles.link}>{t('View')}</Text>
           </Pressable>

package/src/components/Message/MessageItemView/MessageAuthor.tsx

@@ -27,6 +27,13 @@ const MessageAuthorWithContext = (props: MessageAuthorPropsWithContext) => {
 
   const visible = typeof showAvatar === 'boolean' ? showAvatar : lastGroupMessage;
 
+  // TODO (next major): this wrapper View is a perf cost we'd like to remove (row weight
+  // reduction). It can't be dropped without a breaking change: its `style` is the public
+  // `theme.messageItemView.authorWrapper.container` override hook, and it anchors the
+  // `message-author` testID. The not visible branch's spacer also can't be removed - it
+  // reserves the avatar column so grouped (non-last) received messages stay aligned.
+  // Revisit when we can change UserAvatar's API (testID + wrapper-style props) and accept
+  // the theme API break.
   return (
     <View style={container} testID='message-author'>
       {visible && message.user ? (

package/src/components/Message/MessageItemView/MessageBubble.tsx

@@ -27,7 +27,9 @@ type SwipableMessageWrapperProps = Pick<
   onSwipe: () => void;
 };
 
-export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperProps) => {
+export const SwipableMessageWrapper = React.memo(function SwipableMessageWrapper(
+  props: SwipableMessageWrapperProps,
+) {
   const { children, messageSwipeToReplyHitSlop, onSwipe } = props;
   const { MessageSwipeContent } = useComponentsContext();
   const isRTL = I18nManager.isRTL;
@@ -98,7 +100,6 @@ export const SwipableMessageWrapper = React.memo((props: SwipableMessageWrapperP
               dampingRatio: 1,
               duration: 500,
               overshootClamping: true,
-              stiffness: 1,
             },
             () => {
               runOnJS(setShouldRenderAnimatedWrapper)(false);