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

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';
@@ -70,7 +71,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { bumpOverlayLayoutRevision } from '../../state-store';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
 
@@ -353,6 +354,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     EmptyStateIndicator,
     MessageListLoadingIndicator: LoadingIndicator,
     NetworkDownIndicator,
+    NotificationList,
     ScrollToBottomButton,
     StickyHeader,
     TypingIndicator,
@@ -1046,6 +1048,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<
@@ -1298,10 +1313,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}
@@ -1321,7 +1343,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           <ScrollToBottomButton
             onPress={goToNewMessages}
             showNotification={scrollToBottomButtonVisible}
-            unreadCount={threadList ? 0 : channel?.countUnread()}
+            unreadCount={scrollToBottomUnreadCount}
           />
         </Animated.View>
       ) : null}
@@ -1335,6 +1357,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           />
         </View>
       ) : null}
+      <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );
 };

package/src/components/MessageList/ScrollToBottomButton.tsx

@@ -3,13 +3,16 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
 
-import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Down } from '../../icons/arrow-up';
 import { primitives } from '../../theme';
 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;
@@ -23,9 +26,9 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
   const {
     theme: { semantics },
   } = useTheme();
-  const a11yLabel = useA11yLabel(
-    unreadCount ? 'a11y/Scroll to latest, {{count}} unread' : 'a11y/Scroll to latest',
-    { count: unreadCount ?? 0 },
+  const accessibilityLabelParams = React.useMemo(
+    () => (unreadCount ? { count: unreadCount } : undefined),
+    [unreadCount],
   );
 
   if (!showNotification) {
@@ -47,7 +50,12 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
         ]}
       >
         <Button
-          accessibilityLabel={a11yLabel}
+          accessibilityLabelKey={
+            unreadCount
+              ? SCROLL_TO_BOTTOM_WITH_COUNT_ACCESSIBILITY_LABEL_KEY
+              : SCROLL_TO_BOTTOM_ACCESSIBILITY_LABEL_KEY
+          }
+          accessibilityLabelParams={accessibilityLabelParams}
           variant='secondary'
           type='outline'
           LeadingIcon={Down}
@@ -58,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

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

@@ -20,6 +20,7 @@ import { channelInitialState } from '../../Channel/hooks/useChannelDataState';
 import * as MessageListPaginationHook from '../../Channel/hooks/useMessageListPagination';
 import { Chat } from '../../Chat/Chat';
 
+import { SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME } from '../hooks/useScrollToBottomAccessibilityAction';
 import { MessageList } from '../MessageList';
 
 describe('MessageList', () => {
@@ -183,6 +184,41 @@ describe('MessageList', () => {
     });
   });
 
+  it('should render client notifications in the message list notification host', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: [generateMessage({ user: user1 })],
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
+    await channel.watch();
+
+    const { getByText } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    act(() => {
+      chatClient.notifications.add({
+        message: 'Message list notification',
+        options: { severity: 'warning' },
+        origin: { emitter: 'MessageListTest' },
+      });
+    });
+
+    await waitFor(() => {
+      expect(getByText('Message list notification')).toBeTruthy();
+    });
+  });
+
   it('should render the is offline error', async () => {
     const user1 = generateUser();
     const mockedChannel = generateChannelResponse({
@@ -487,6 +523,49 @@ describe('MessageList pagination', () => {
       }));
   };
 
+  const renderMessageListForScrollToBottom = async ({
+    additionalFlatListProps,
+    accessibility = { enabled: true },
+    staleChannelState = false,
+  }: {
+    additionalFlatListProps?: React.ComponentProps<typeof MessageList>['additionalFlatListProps'];
+    accessibility?: React.ComponentProps<typeof OverlayProvider>['accessibility'];
+    staleChannelState?: boolean;
+  } = {}) => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: Array.from({ length: 10 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
+    await channel.watch();
+
+    if (staleChannelState) {
+      channel.state = {
+        ...channelInitialState,
+        latestMessages: [],
+        members: Object.fromEntries(
+          Array.from({ length: 10 }, (_, i) => [i, generateMember({ user_id: String(i) })]),
+        ),
+        messages: Array.from({ length: 10 }, (_, i) => generateMessage({ id: String(i) })),
+        messageSets: [{ isCurrent: true, isLatest: true }],
+      } as unknown as typeof channel.state;
+    }
+
+    return render(
+      <OverlayProvider accessibility={accessibility}>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList additionalFlatListProps={additionalFlatListProps} />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+  };
+
   it('should load more recent messages when the user scrolls to the start of the list', async () => {
     const user1 = generateUser();
     const mockedChannel = generateChannelResponse({
@@ -630,4 +709,146 @@ describe('MessageList pagination', () => {
       expect(loadLatestMessages).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('should not expose the scroll to bottom accessibility action when hidden', async () => {
+    const { getByTestId, queryByTestId } = await renderMessageListForScrollToBottom();
+
+    await waitFor(() => {
+      expect(queryByTestId('scroll-to-bottom-button')).toBeFalsy();
+      expect(getByTestId('message-flat-list').props.accessibilityActions).toBeUndefined();
+    });
+  });
+
+  it('should not expose the SDK scroll to bottom action when SDK accessibility is disabled', async () => {
+    const { getByTestId, queryByTestId } = await renderMessageListForScrollToBottom({
+      accessibility: { enabled: false },
+      staleChannelState: true,
+    });
+
+    act(() => {
+      fireEvent(getByTestId('message-flat-list'), 'scroll', {
+        nativeEvent: {
+          contentOffset: { y: 1900 },
+          contentSize: { height: 2000, width: 200 },
+          layoutMeasurement: { height: 400, width: 200 },
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('scroll-to-bottom-button')).toBeTruthy();
+      expect(getByTestId('message-flat-list').props.accessibilityActions ?? []).not.toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            name: SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME,
+          }),
+        ]),
+      );
+    });
+  });
+
+  it('should preserve additional message list accessibility actions when scroll to bottom is hidden', async () => {
+    const { getByTestId, queryByTestId } = await renderMessageListForScrollToBottom({
+      additionalFlatListProps: {
+        accessibilityActions: [{ label: 'Custom action', name: 'customAction' }],
+      },
+    });
+
+    await waitFor(() => {
+      expect(queryByTestId('scroll-to-bottom-button')).toBeFalsy();
+      expect(getByTestId('message-flat-list').props.accessibilityActions).toEqual([
+        { label: 'Custom action', name: 'customAction' },
+      ]);
+    });
+  });
+
+  it('should expose scroll to bottom as a message list accessibility action when visible', async () => {
+    const loadLatestMessages = jest.fn(() => Promise.resolve());
+    mockedHook({ loadLatestMessages });
+
+    const { getByTestId } = await renderMessageListForScrollToBottom({
+      staleChannelState: true,
+    });
+
+    act(() => {
+      fireEvent(getByTestId('message-flat-list'), 'scroll', {
+        nativeEvent: {
+          contentOffset: { y: 1900 },
+          contentSize: { height: 2000, width: 200 },
+          layoutMeasurement: { height: 400, width: 200 },
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('message-flat-list').props.accessibilityActions).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            label: expect.stringContaining('Scroll to bottom'),
+            name: SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME,
+          }),
+        ]),
+      );
+    });
+
+    await act(async () => {
+      await getByTestId('message-flat-list').props.onAccessibilityAction({
+        nativeEvent: { actionName: SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME },
+      });
+    });
+
+    expect(loadLatestMessages).toHaveBeenCalledTimes(1);
+  });
+
+  it('should preserve additional message list accessibility actions', async () => {
+    const loadLatestMessages = jest.fn(() => Promise.resolve());
+    const onAccessibilityAction = jest.fn();
+    mockedHook({ loadLatestMessages });
+
+    const { getByTestId } = await renderMessageListForScrollToBottom({
+      additionalFlatListProps: {
+        accessibilityActions: [{ label: 'Custom action', name: 'customAction' }],
+        onAccessibilityAction,
+      },
+      staleChannelState: true,
+    });
+
+    act(() => {
+      fireEvent(getByTestId('message-flat-list'), 'scroll', {
+        nativeEvent: {
+          contentOffset: { y: 1900 },
+          contentSize: { height: 2000, width: 200 },
+          layoutMeasurement: { height: 400, width: 200 },
+        },
+      });
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('message-flat-list').props.accessibilityActions).toEqual(
+        expect.arrayContaining([
+          { label: 'Custom action', name: 'customAction' },
+          expect.objectContaining({
+            label: expect.stringContaining('Scroll to bottom'),
+            name: SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME,
+          }),
+        ]),
+      );
+    });
+
+    act(() => {
+      getByTestId('message-flat-list').props.onAccessibilityAction({
+        nativeEvent: { actionName: 'customAction' },
+      });
+    });
+    expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      await getByTestId('message-flat-list').props.onAccessibilityAction({
+        nativeEvent: { actionName: SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME },
+      });
+    });
+
+    expect(loadLatestMessages).toHaveBeenCalledTimes(1);
+    expect(onAccessibilityAction).toHaveBeenCalledTimes(1);
+  });
 });

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

@@ -75,8 +75,8 @@ describe('ScrollToBottomButton', () => {
       </ThemeProvider>,
     );
     await waitFor(() => {
-      expect(getByTestId('unread-count')).toBeTruthy();
-      expect(getByText('3')).toBeTruthy();
+      expect(getByTestId('unread-count', { includeHiddenElements: true })).toBeTruthy();
+      expect(getByText('3', { includeHiddenElements: true })).toBeTruthy();
     });
   });
 

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

@@ -18,7 +18,7 @@ exports[`ScrollToBottomButton should render the message notification and match s
         },
         {
           "elevation": 2,
-          "shadowColor": "rgba(0,0,0,0.12)",
+          "shadowColor": "rgb(0,0,0)",
           "shadowOffset": {
             "height": 1,
             "width": 0,
@@ -186,6 +186,8 @@ exports[`ScrollToBottomButton should render the message notification and match s
     </View>
   </View>
   <View
+    accessibilityElementsHidden={true}
+    importantForAccessibility="no-hide-descendants"
     style={
       {
         "position": "absolute",

package/src/components/MessageList/hooks/useScrollToBottomAccessibilityAction.ts

@@ -0,0 +1,74 @@
+import { useContext, useMemo } from 'react';
+
+import type { AccessibilityActionEvent, AccessibilityProps } from 'react-native';
+
+import { mergeAccessibilityActions } from '../../../a11y/a11yUtils';
+import { useAccessibilityContext } from '../../../contexts/accessibilityContext/AccessibilityContext';
+import { TranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useStableCallback } from '../../../hooks';
+import {
+  SCROLL_TO_BOTTOM_ACCESSIBILITY_LABEL_KEY,
+  SCROLL_TO_BOTTOM_WITH_COUNT_ACCESSIBILITY_LABEL_KEY,
+} from '../ScrollToBottomButton';
+
+export const SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME = 'streamScrollToBottom';
+
+type AccessibilityActions = AccessibilityProps['accessibilityActions'];
+type OnAccessibilityAction = AccessibilityProps['onAccessibilityAction'];
+
+type UseScrollToBottomAccessibilityActionParams = {
+  accessibilityActions?: AccessibilityActions;
+  onAccessibilityAction?: OnAccessibilityAction;
+  onScrollToBottom: () => Promise<void> | void;
+  unreadCount?: number;
+  visible: boolean;
+};
+
+export const useScrollToBottomAccessibilityAction = ({
+  accessibilityActions,
+  onAccessibilityAction,
+  onScrollToBottom,
+  unreadCount,
+  visible,
+}: UseScrollToBottomAccessibilityActionParams) => {
+  const { enabled } = useAccessibilityContext();
+  const { t } = useContext(TranslationContext);
+
+  const scrollToBottomAccessibilityAction = useMemo(() => {
+    if (!enabled || !visible) {
+      return undefined;
+    }
+
+    return [
+      {
+        name: SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME,
+        label: unreadCount
+          ? t(SCROLL_TO_BOTTOM_WITH_COUNT_ACCESSIBILITY_LABEL_KEY, { count: unreadCount })
+          : t(SCROLL_TO_BOTTOM_ACCESSIBILITY_LABEL_KEY),
+      },
+    ];
+  }, [enabled, t, unreadCount, visible]);
+
+  const mergedAccessibilityActions = useMemo(
+    () => mergeAccessibilityActions(accessibilityActions, scrollToBottomAccessibilityAction),
+    [accessibilityActions, scrollToBottomAccessibilityAction],
+  );
+
+  const handleAccessibilityAction = useStableCallback((event: AccessibilityActionEvent) => {
+    if (event.nativeEvent.actionName === SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME) {
+      return onScrollToBottom();
+    }
+
+    return onAccessibilityAction?.(event);
+  });
+
+  return {
+    accessibilityActions: mergedAccessibilityActions.length
+      ? mergedAccessibilityActions
+      : undefined,
+    onAccessibilityAction:
+      (enabled && visible) || onAccessibilityAction
+        ? handleAccessibilityAction
+        : onAccessibilityAction,
+  };
+};

package/src/components/MessageMenu/MessageActionListItem.tsx

@@ -3,6 +3,7 @@ import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 
 import { Pressable } from 'react-native-gesture-handler';
 
+import { useAccessibilityActivateAction } from '../../a11y/hooks/useAccessibilityActivateAction';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { closeOverlay, scheduleActionOnClose } from '../../state-store';
@@ -74,20 +75,25 @@ export const MessageActionListItem = (props: MessageActionListItemProps) => {
     closeOverlay();
     scheduleActionOnClose(() => action());
   });
+  const accessibilityLabel = `${actionType} action list item`;
+  const accessibilityActivateActionProps = useAccessibilityActivateAction({
+    onPress: onActionPress,
+    shouldHandleActivate: true,
+  });
 
   return (
     <Pressable
+      accessible
+      accessibilityLabel={accessibilityLabel}
       accessibilityRole='menuitem'
+      {...accessibilityActivateActionProps}
       onPress={onActionPress}
       style={({ pressed }) => [
         styles.buttonContainer,
         { backgroundColor: pressed ? semantics.backgroundUtilityPressed : 'transparent' },
       ]}
     >
-      <View
-        accessibilityLabel={`${actionType} action list item`}
-        style={[styles.container, container]}
-      >
+      <View style={[styles.container, container]}>
         <View style={iconTheme}>{icon}</View>
         <Text style={[styles.titleStyle, titleStyle, titleTheme]}>{title}</Text>
       </View>

package/src/components/MessageMenu/MessageReactionPicker.tsx

@@ -115,6 +115,7 @@ export const EmojiViewerButton = ({
     <>
       <View style={[styles.emojiViewerButton, emojiViewerButton]}>
         <Button
+          accessibilityLabelKey='a11y/Open more reactions'
           variant='secondary'
           type='outline'
           size='sm'

package/src/components/MessageMenu/ReactionButton.tsx

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

package/src/components/MessageMenu/__tests__/MessageReactionPicker.test.tsx

@@ -80,12 +80,10 @@ describe('MessageReactionPicker', () => {
   });
 
   it('renders correctly with supported reactions', async () => {
-    const { getAllByLabelText, getByLabelText } = renderComponent();
+    const { getAllByRole, getByLabelText } = renderComponent();
     await waitFor(() => {
       expect(getByLabelText('Reaction Selector on long pressing message')).toBeTruthy();
-      expect(getAllByLabelText(/\breaction-button[^\s]+/)).toHaveLength(
-        mockSupportedReactions.length,
-      );
+      expect(getAllByRole('button')).toHaveLength(mockSupportedReactions.length + 1);
     });
   });
 
@@ -95,20 +93,20 @@ describe('MessageReactionPicker', () => {
   });
 
   it('marks own reactions as selected', async () => {
-    const { getAllByLabelText } = renderComponent();
+    const { getAllByRole } = renderComponent();
 
     await waitFor(() => {
-      const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
-      expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-selected');
-      expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
+      const reactionButtons = getAllByRole('button');
+      expect(reactionButtons[0].props.accessibilityState.selected).toBe(true);
+      expect(reactionButtons[1].props.accessibilityState.selected).toBe(false);
     });
   });
 
   it('calls handleReaction and dismissOverlay when a reaction is pressed', async () => {
-    const { getAllByLabelText } = renderComponent();
+    const { getAllByRole } = renderComponent();
 
     await waitFor(() => {
-      const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+      const reactionButtons = getAllByRole('button');
       fireEvent.press(reactionButtons[1]);
       expect(defaultProps.handleReaction).toHaveBeenCalledWith('love');
       expect(defaultProps.dismissOverlay).toHaveBeenCalled();
@@ -117,9 +115,9 @@ describe('MessageReactionPicker', () => {
   });
 
   it("doesn't call handleReaction when it's not provided", async () => {
-    const { getAllByLabelText } = renderComponent({ handleReaction: undefined });
+    const { getAllByRole } = renderComponent({ handleReaction: undefined });
     await waitFor(() => {
-      const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+      const reactionButtons = getAllByRole('button');
 
       fireEvent.press(reactionButtons[1]);
 
@@ -132,11 +130,11 @@ describe('MessageReactionPicker', () => {
       { Icon: () => null, isMain: true, type: 'wow' },
       { Icon: () => null, isMain: true, type: 'haha' },
     ];
-    const { getAllByLabelText } = renderComponent({ supportedReactions: customSupportedReactions });
+    const { getAllByRole } = renderComponent({ supportedReactions: customSupportedReactions });
 
     await waitFor(() => {
-      const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
-      expect(reactionButtons).toHaveLength(customSupportedReactions.length);
+      const reactionButtons = getAllByRole('button');
+      expect(reactionButtons).toHaveLength(customSupportedReactions.length + 1);
     });
   });
 });