stream-chat-react-native-core 9.3.1-beta.6 → 9.3.1-beta.8

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/MessageContent.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { ColorValue, Pressable, StyleSheet, View, ViewStyle } from 'react-native';
+import { ColorValue, Platform, Pressable, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { MessageTextContainer } from './MessageTextContainer';
 
@@ -55,6 +55,7 @@ export type MessageContentPropsWithContext = Pick<
   | 'alignment'
   | 'goToMessage'
   | 'groupStyles'
+  | 'hasInteractiveAccessibilityContent'
   | 'isMyMessage'
   | 'message'
   | 'messageContentOrder'
@@ -111,6 +112,7 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
     enableMessageGroupingByUser,
     groupStyles,
     goToMessage,
+    hasInteractiveAccessibilityContent,
     isMessageAIGenerated,
     isMyMessage,
     isVeryLastMessage,
@@ -129,6 +131,10 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
   } = props;
   const { client } = useChatContext();
   const accessibilityHint = useA11yLabel('a11y/Double tap and hold to activate contextual menu');
+  const a11ySenderLabel = useA11yLabel(
+    isMyMessage ? 'a11y/Message from you' : 'a11y/Message from {{sender}}',
+    isMyMessage ? undefined : { sender: message.user?.name || message.user?.id || '' },
+  );
   const {
     Attachment,
     FileAttachmentGroup,
@@ -317,11 +323,18 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
       )}
     </>
   );
+  const a11yPressableLabel = useMemo(() => {
+    if (!a11ySenderLabel) return undefined;
+    return message.text && !hasInteractiveAccessibilityContent
+      ? `${a11ySenderLabel}. ${message.text}`
+      : a11ySenderLabel;
+  }, [a11ySenderLabel, hasInteractiveAccessibilityContent, message.text]);
 
   return (
     <Pressable
+      accessibilityLabel={a11yPressableLabel}
       accessibilityHint={accessibilityHint}
-      accessible={message.poll_id ? false : undefined}
+      accessible={hasInteractiveAccessibilityContent ? false : undefined}
       disabled={preventPress}
       onLongPress={(event) => {
         if (onLongPress) {
@@ -371,6 +384,15 @@ const MessageContentWithContext = (props: MessageContentPropsWithContext) => {
         ]}
         testID='message-content-wrapper'
       >
+        {a11ySenderLabel && Platform.OS !== 'android' && hasInteractiveAccessibilityContent ? (
+          <View
+            accessibilityLabel={a11ySenderLabel}
+            accessibilityHint={accessibilityHint}
+            accessible
+            pointerEvents='none'
+            style={StyleSheet.absoluteFill}
+          />
+        ) : null}
         {MessageContentTopView ? <MessageContentTopView /> : null}
         {hasContentSideViews ? (
           <View
@@ -403,6 +425,7 @@ const areEqual = (
     preventPress: prevPreventPress,
     goToMessage: prevGoToMessage,
     groupStyles: prevGroupStyles,
+    hasInteractiveAccessibilityContent: prevHasInteractiveAccessibilityContent,
     isAttachmentEqual,
     message: prevMessage,
     messageContentOrder: prevMessageContentOrder,
@@ -416,6 +439,7 @@ const areEqual = (
     preventPress: nextPreventPress,
     goToMessage: nextGoToMessage,
     groupStyles: nextGroupStyles,
+    hasInteractiveAccessibilityContent: nextHasInteractiveAccessibilityContent,
     message: nextMessage,
     messageContentOrder: nextMessageContentOrder,
     myMessageTheme: nextMyMessageTheme,
@@ -423,6 +447,10 @@ const areEqual = (
     t: nextT,
   } = nextProps;
 
+  if (prevHasInteractiveAccessibilityContent !== nextHasInteractiveAccessibilityContent) {
+    return false;
+  }
+
   if (prevBackgroundColor !== nextBackgroundColor) {
     return false;
   }
@@ -558,8 +586,11 @@ export type MessageContentProps = Partial<MessageContentPropsWithContext>;
 export const MessageContent = (props: MessageContentProps) => {
   const {
     alignment,
+    files,
     goToMessage,
     groupStyles,
+    hasInteractiveAccessibilityContent,
+    images,
     isMessageAIGenerated,
     isMyMessage,
     message,
@@ -570,8 +601,6 @@ export const MessageContent = (props: MessageContentProps) => {
     otherAttachments,
     preventPress,
     threadList,
-    files,
-    images,
     videos,
   } = useMessageContext();
   const {
@@ -626,6 +655,7 @@ export const MessageContent = (props: MessageContentProps) => {
         enableMessageGroupingByUser,
         goToMessage,
         groupStyles,
+        hasInteractiveAccessibilityContent,
         isAttachmentEqual,
         isMessageAIGenerated,
         isMyMessage,

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

@@ -69,7 +69,12 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
   const isEdited = isEditedMessage(message) && !isAIGenerated;
 
   return (
-    <View style={[styles.container, container]} testID='message-status-time'>
+    <View
+      accessible
+      accessibilityRole='text'
+      style={[styles.container, container]}
+      testID='message-status-time'
+    >
       {Object.keys(members).length > 2 && alignment === 'left' && message.user?.name ? (
         <Text numberOfLines={1} ellipsizeMode='tail' style={[styles.name, name]}>
           {message.user.name}

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

@@ -75,10 +75,18 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
     return null;
   }
 
+  const replyCountLabel =
+    message.reply_count === 1
+      ? t('1 Reply')
+      : t('{{ replyCount }} Replies', { replyCount: message.reply_count });
+
   return (
     <View style={[styles.container, container]}>
       {alignment === 'left' ? connector : null}
       <Pressable
+        accessibilityHint={t('a11y/Double tap to view thread')}
+        accessibilityLabel={replyCountLabel}
+        accessibilityRole='button'
         disabled={preventPress}
         onLongPress={(event) => {
           if (onLongPress) {
@@ -114,13 +122,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
         testID='message-replies'
       >
         <MessageRepliesAvatars />
-        <Text style={[styles.messageRepliesText, messageRepliesText]}>
-          {message.reply_count === 1
-            ? t('1 Reply')
-            : t('{{ replyCount }} Replies', {
-                replyCount: message.reply_count,
-              })}
-        </Text>
+        <Text style={[styles.messageRepliesText, messageRepliesText]}>{replyCountLabel}</Text>
       </Pressable>
       {alignment === 'right' ? connector : null}
     </View>

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

@@ -24,7 +24,11 @@ export const MessageRepliesAvatarsWithContext = (props: MessageRepliesAvatarsPro
   const avatars = message?.thread_participants || [];
 
   return (
-    <View style={avatarStackContainer}>
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility='no-hide-descendants'
+      style={avatarStackContainer}
+    >
       <UserAvatarStack users={avatars} avatarSize='sm' maxVisible={3} overlap={0.4} />
     </View>
   );

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

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import {
   MessageContextValue,
@@ -12,6 +13,7 @@ import { CheckAll } from '../../../icons/checks';
 import { Time } from '../../../icons/clock';
 import { primitives } from '../../../theme';
 import { MessageStatusTypes } from '../../../utils/utils';
+import { HiddenA11yText } from '../../Accessibility/HiddenA11yText';
 import { useShouldUseOverlayStyles } from '../hooks/useShouldUseOverlayStyles';
 
 export type MessageStatusPropsWithContext = Pick<
@@ -32,10 +34,6 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
     },
   } = useTheme();
 
-  if (message.status === MessageStatusTypes.FAILED || message.type === 'error') {
-    return null;
-  }
-
   const hasReadByGreaterThanOne = typeof readBy === 'number' && readBy > 1;
 
   // Variables to determine the status of the message
@@ -48,42 +46,41 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
     !read &&
     message.type !== 'ephemeral';
 
+  const accessibilityLabel = useA11yLabel(
+    read
+      ? 'a11y/Read'
+      : delivered
+        ? 'a11y/Delivered'
+        : sending
+          ? 'a11y/Sending'
+          : sent
+            ? 'a11y/Sent'
+            : '',
+  );
+
+  if (message.status === MessageStatusTypes.FAILED || message.type === 'error') {
+    return null;
+  }
+
   return (
-    <View style={[styles.container, container]}>
-      {read ? (
-        <CheckAll
-          height={16}
-          stroke={styles.readCheck.color}
-          width={16}
-          accessibilityLabel='Read'
-          {...checkAllIcon}
-        />
-      ) : delivered ? (
-        <CheckAll
-          stroke={styles.deliveredCheck.color}
-          height={16}
-          width={16}
-          accessibilityLabel='Delivered'
-          {...checkAllIcon}
-        />
-      ) : sending ? (
-        <Time
-          stroke={styles.sendingCheck.color}
-          height={16}
-          width={16}
-          accessibilityLabel='Sending'
-          {...timeIcon}
-        />
-      ) : sent ? (
-        <Check
-          stroke={styles.sentCheck.color}
-          height={16}
-          width={16}
-          accessibilityLabel='Sent'
-          {...checkIcon}
-        />
-      ) : null}
-    </View>
+    <>
+      <HiddenA11yText label={accessibilityLabel} />
+      <View
+        accessibilityElementsHidden={!!accessibilityLabel}
+        importantForAccessibility={accessibilityLabel ? 'no-hide-descendants' : undefined}
+        style={[styles.container, container]}
+      >
+        {read ? (
+          <CheckAll height={16} stroke={styles.readCheck.color} width={16} {...checkAllIcon} />
+        ) : delivered ? (
+          <CheckAll stroke={styles.deliveredCheck.color} height={16} width={16} {...checkAllIcon} />
+        ) : sending ? (
+          <Time stroke={styles.sendingCheck.color} height={16} width={16} {...timeIcon} />
+        ) : sent ? (
+          <Check stroke={styles.sentCheck.color} height={16} width={16} {...checkIcon} />
+        ) : null}
+      </View>
+    </>
   );
 };
 

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

@@ -31,7 +31,13 @@ export type MessageTextProps = MessageTextContainerProps & {
 
 export type MessageTextContainerPropsWithContext = Pick<
   MessageContextValue,
-  'message' | 'onLongPress' | 'onlyEmojis' | 'onPress' | 'preventPress' | 'isMyMessage'
+  | 'hasInteractiveAccessibilityContent'
+  | 'isMyMessage'
+  | 'message'
+  | 'onLongPress'
+  | 'onlyEmojis'
+  | 'onPress'
+  | 'preventPress'
 > &
   Pick<MessagesContextValue, 'markdownRules' | 'myMessageTheme' | 'messageTextNumberOfLines'> & {
     markdownStyles?: MarkdownStyle;
@@ -45,6 +51,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
   const theme = useTheme();
 
   const {
+    hasInteractiveAccessibilityContent,
     isMyMessage,
     markdownRules,
     markdownStyles: markdownStylesProp = {},
@@ -81,6 +88,8 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
 
   return (
     <View
+      accessible={hasInteractiveAccessibilityContent || undefined}
+      accessibilityRole={hasInteractiveAccessibilityContent ? 'text' : undefined}
       style={[styles.textContainer, textContainer, stylesProp.textContainer]}
       testID='message-text-container'
     >
@@ -113,18 +122,24 @@ const areEqual = (
   nextProps: MessageTextContainerPropsWithContext,
 ) => {
   const {
+    hasInteractiveAccessibilityContent: prevHasInteractiveAccessibilityContent,
     markdownStyles: prevMarkdownStyles,
     message: prevMessage,
     myMessageTheme: prevMyMessageTheme,
     onlyEmojis: prevOnlyEmojis,
   } = prevProps;
   const {
+    hasInteractiveAccessibilityContent: nextHasInteractiveAccessibilityContent,
     markdownStyles: nextMarkdownStyles,
     message: nextMessage,
     myMessageTheme: nextMyMessageTheme,
     onlyEmojis: nextOnlyEmojis,
   } = nextProps;
 
+  if (prevHasInteractiveAccessibilityContent !== nextHasInteractiveAccessibilityContent) {
+    return false;
+  }
+
   const messageStatusEqual = prevMessage.status === nextMessage.status;
   if (!messageStatusEqual) {
     return false;
@@ -182,16 +197,24 @@ const MemoizedMessageTextContainer = React.memo(
 export type MessageTextContainerProps = Partial<MessageTextContainerPropsWithContext>;
 
 export const MessageTextContainer = (props: MessageTextContainerProps) => {
-  const { message, onLongPress, onlyEmojis, onPress, preventPress, isMyMessage } =
-    useMessageContext();
+  const {
+    hasInteractiveAccessibilityContent,
+    isMyMessage,
+    message,
+    onLongPress,
+    onlyEmojis,
+    onPress,
+    preventPress,
+  } = useMessageContext();
   const { markdownRules, messageTextNumberOfLines, myMessageTheme } = useMessagesContext();
 
   return (
     <MemoizedMessageTextContainer
       {...{
+        hasInteractiveAccessibilityContent,
+        isMyMessage,
         markdownRules,
         message,
-        isMyMessage,
         messageTextNumberOfLines,
         myMessageTheme,
         onLongPress,

package/src/components/Message/MessageItemView/ReactionList/ReactionListClustered.tsx

@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { StyleProp, StyleSheet, Text, ViewStyle } from 'react-native';
 
 import { ReactionListItemWrapper } from './ReactionListItemWrapper';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import {
   MessageContextValue,
   useMessageContext,
@@ -19,6 +20,7 @@ import type { IconProps } from '../../../../icons/utils/base';
 
 import { primitives } from '../../../../theme';
 import type { ReactionData } from '../../../../utils/utils';
+import { HiddenA11yText } from '../../../Accessibility/HiddenA11yText';
 
 type Props = Pick<IconProps, 'pathFill' | 'style'> & {
   size: number;
@@ -65,6 +67,8 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
     },
   } = useTheme();
   const styles = useStyles();
+  const accessibilityHint = useA11yLabel('a11y/Double tap to view reactions');
+  const youReacted = useA11yLabel('a11y/you reacted');
   const supportedReactionTypes = supportedReactions?.map(
     (supportedReaction) => supportedReaction.type,
   );
@@ -72,6 +76,9 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
   const moreReactionsCount = reactionsCount - 4;
   const reactionsCountText =
     moreReactionsCount < 99 ? moreReactionsCount : `+${moreReactionsCount}`;
+  const moreReactionsA11yText = useA11yLabel('a11y/and {{count}} more reactions', {
+    count: moreReactionsCount,
+  });
 
   const hasSupportedReactions = reactions?.some((reaction) =>
     supportedReactionTypes?.includes(reaction.type),
@@ -83,6 +90,8 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
 
   return (
     <ReactionListItemWrapper
+      accessibilityHint={accessibilityHint}
+      accessibilityLabel={accessibilityLabel}
       disabled={preventPress}
       onPress={(event) => {
         if (onPress) {
@@ -111,18 +120,23 @@ export const ReactionListClusteredWithContext = (props: ReactionListClusteredPro
         }
       }}
       style={containerStyle}
-      accessibilityLabel={accessibilityLabel}
     >
       {reactions?.slice(0, 4).map((reaction) => (
-        <Icon
-          key={reaction.type}
-          size={icon.size}
-          style={[styles.iconStyle, icon.style]}
-          supportedReactions={supportedReactions}
-          type={reaction.type}
-        />
+        <Fragment key={reaction.type}>
+          <Icon
+            size={icon.size}
+            style={[styles.iconStyle, icon.style]}
+            supportedReactions={supportedReactions}
+            type={reaction.type}
+          />
+          {reaction.own ? <HiddenA11yText label={youReacted} /> : null}
+        </Fragment>
       ))}
-      {reactionsCount > 4 ? <Text style={styles.reactionCount}>{reactionsCountText}</Text> : null}
+      {reactionsCount > 4 ? (
+        <Text accessibilityLabel={moreReactionsA11yText} style={styles.reactionCount}>
+          {reactionsCountText}
+        </Text>
+      ) : null}
     </ReactionListItemWrapper>
   );
 };

package/src/components/Message/MessageItemView/ReactionList/ReactionListItem.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, Text } from 'react-native';
 
 import { ReactionListItemWrapper } from './ReactionListItemWrapper';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
 import { MessagesContextValue } from '../../../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
@@ -13,6 +14,7 @@ import type { IconProps } from '../../../../icons/utils/base';
 
 import { primitives } from '../../../../theme';
 import type { ReactionData } from '../../../../utils/utils';
+import { HiddenA11yText } from '../../../Accessibility/HiddenA11yText';
 import { ReactionSummary } from '../../hooks/useProcessReactions';
 
 type Props = Pick<IconProps, 'pathFill' | 'style'> & {
@@ -66,12 +68,15 @@ export const ReactionListItem = (props: ReactionListItemProps) => {
     },
   } = useTheme();
   const styles = useStyles();
+  const youReacted = useA11yLabel('a11y/you reacted');
 
   return (
     <ReactionListItemWrapper
-      accessibilityLabel='Reaction List Item'
+      accessibilityRole='button'
+      accessibilityState={{ selected }}
       disabled={preventPress}
       key={reaction.type}
+      testID='reaction-list-item'
       onLongPress={(event) => {
         if (onLongPress) {
           onLongPress({
@@ -121,6 +126,7 @@ export const ReactionListItem = (props: ReactionListItemProps) => {
         type={reaction.type}
       />
       {showCount ? <Text style={styles.reactionCount}>{reaction.count}</Text> : null}
+      {selected ? <HiddenA11yText label={youReacted} /> : null}
     </ReactionListItemWrapper>
   );
 };