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

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', () => {
@@ -487,6 +488,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 +674,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

@@ -50,13 +50,14 @@ exports[`ScrollToBottomButton should render the message notification and match s
       }
     >
       <View
+        accessibilityRole="button"
         accessibilityState={
           {
             "busy": undefined,
             "checked": undefined,
             "disabled": false,
             "expanded": undefined,
-            "selected": undefined,
+            "selected": false,
           }
         }
         accessibilityValue={
@@ -185,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/__tests__/__snapshots__/TypingIndicator.test.tsx.snap

@@ -87,6 +87,8 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
               testID="avatar-image"
             >
               <Image
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
                 onError={[Function]}
                 source={
                   {
@@ -147,6 +149,8 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
               testID="avatar-image"
             >
               <Image
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
                 onError={[Function]}
                 source={
                   {
@@ -186,6 +190,8 @@ exports[`TypingIndicator should match typing indicator snapshot 1`] = `
     }
   >
     <View
+      accessibilityElementsHidden={true}
+      importantForAccessibility="no-hide-descendants"
       style={
         [
           {

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

@@ -5,6 +5,7 @@ import { ScrollView } from 'react-native-gesture-handler';
 
 import { MessageActionType } from './MessageActionListItem';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
@@ -24,6 +25,7 @@ export type MessageActionListProps = {
 export const MessageActionList = (props: MessageActionListProps) => {
   const { messageActions } = props;
   const { MessageActionListItem } = useComponentsContext();
+  const a11yLabel = useA11yLabel('a11y/Message actions');
   const {
     theme: {
       messageMenu: {
@@ -43,7 +45,8 @@ export const MessageActionList = (props: MessageActionListProps) => {
 
   return (
     <ScrollView
-      accessibilityLabel='Message action list'
+      accessibilityLabel={a11yLabel ?? 'Message action list'}
+      accessibilityRole='menu'
       contentContainerStyle={[styles.contentContainer, contentContainer]}
       style={[styles.container, container]}
     >

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,19 +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'
@@ -163,6 +164,7 @@ export const MessageReactionPicker = (props: MessageReactionPickerProps) => {
   return (
     <View
       accessibilityLabel='Reaction Selector on long pressing message'
+      accessibilityRole='menu'
       style={[styles.container, container]}
     >
       <MessageReactionPickerList onSelectReaction={onSelectReaction} />

package/src/components/MessageMenu/ReactionButton.tsx

@@ -49,11 +49,17 @@ export const ReactionButton = (props: ReactionButtonProps) => {
     () => <Icon size={reactionIconSize ?? 24} />,
     [Icon, reactionIconSize],
   );
+  const selectedLabelState = selected ? 'selected' : 'unselected';
+  const accessibilityLabelParams = useMemo(
+    () => ({ selected: selectedLabelState, type }),
+    [selectedLabelState, type],
+  );
 
   return (
     <View style={styles.reactionButton}>
       <Button
-        accessibilityLabel={`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);
     });
   });
 });

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

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { Text } from 'react-native';
 
+import type { ReactTestInstance } from 'react-test-renderer';
+
 import { fireEvent, render } from '@testing-library/react-native';
 
 import { ReactionResponse } from 'stream-chat';
@@ -39,6 +41,9 @@ const defaultProps = {
   supportedReactions: mockSupportedReactions,
 };
 
+const filterReactionButtons = (buttons: ReactTestInstance[]) =>
+  buttons.filter((button) => button.props.accessibilityLabel !== 'more-reactions-button');
+
 const renderComponent = (props = {}) =>
   render(
     <ThemeProvider theme={defaultTheme}>
@@ -87,35 +92,32 @@ describe('MessageUserReactions when the supportedReactions are defined', () => {
   });
 
   it('renders reaction buttons', () => {
-    const { getByLabelText } = renderComponent();
-    const likeReactionButton = getByLabelText('reaction-button-like-unselected');
-    expect(likeReactionButton).toBeDefined();
-    const loveReactionButton = getByLabelText('reaction-button-love-unselected');
-    expect(loveReactionButton).toBeDefined();
+    const { getAllByRole } = renderComponent();
+    expect(filterReactionButtons(getAllByRole('button'))).toHaveLength(2);
   });
 
   it('starts with no reaction filter selected by default', () => {
-    const { getAllByLabelText } = renderComponent();
-    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
-    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
-    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
+    const { getAllByRole } = renderComponent();
+    const reactionButtons = filterReactionButtons(getAllByRole('button'));
+    expect(reactionButtons[0].props.accessibilityState.selected).toBe(false);
+    expect(reactionButtons[1].props.accessibilityState.selected).toBe(false);
   });
 
   it('toggles the selected reaction when a reaction button is pressed twice', () => {
-    const { getAllByLabelText } = renderComponent();
-    let reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    const { getAllByRole } = renderComponent();
+    let reactionButtons = filterReactionButtons(getAllByRole('button'));
 
     fireEvent.press(reactionButtons[1]);
 
-    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
-    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-selected');
+    expect(reactionButtons[0].props.accessibilityState.selected).toBe(false);
+    expect(reactionButtons[1].props.accessibilityState.selected).toBe(true);
 
     fireEvent.press(reactionButtons[1]);
 
-    reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    reactionButtons = filterReactionButtons(getAllByRole('button'));
 
-    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
-    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
+    expect(reactionButtons[0].props.accessibilityState.selected).toBe(false);
+    expect(reactionButtons[1].props.accessibilityState.selected).toBe(false);
   });
 
   it('renders reactions list', () => {
@@ -133,10 +135,10 @@ describe('MessageUserReactions when the supportedReactions are defined', () => {
   });
 
   it("don't render reaction buttons that is of unsupported type", () => {
-    const { queryAllByLabelText } = renderComponent({
+    const { queryAllByRole } = renderComponent({
       message: { ...generateMessage(), reaction_groups: { money: 1 } },
     });
-    const reactionButtons = queryAllByLabelText(/\breaction-button[^\s]+/);
+    const reactionButtons = filterReactionButtons(queryAllByRole('button'));
 
     expect(reactionButtons.length).toBe(0);
   });

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

@@ -2,8 +2,9 @@ import React from 'react';
 
 import { Text } from 'react-native';
 
-import { cleanup, fireEvent, render } from '@testing-library/react-native';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { IconProps } from '../../../icons';
@@ -37,28 +38,40 @@ describe('ReactionButton', () => {
     expect(getByText('24')).toBeTruthy();
   });
 
+  it('uses the released reaction button label when accessibility labels are translated', async () => {
+    render(
+      <OverlayProvider accessibility={{ enabled: true }}>
+        <ReactionButton {...defaultProps} />
+      </OverlayProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('reaction-button-like-unselected')).toBeTruthy();
+    });
+  });
+
   it('should call onPress function with the correct reaction type when pressed', () => {
-    const { getByLabelText } = render(
+    const { getByRole } = render(
       <ThemeProvider theme={defaultTheme}>
         <ReactionButton {...defaultProps} />
       </ThemeProvider>,
     );
 
     // Simulate a press event
-    fireEvent.press(getByLabelText('reaction-button-like-unselected'));
+    fireEvent.press(getByRole('button'));
 
     // Verify if the mock function has been called with the correct reaction type
     expect(mockOnPress).toHaveBeenCalledWith('like');
   });
 
   it('should not call onPress when the onPress prop is not provided', () => {
-    const { getByLabelText } = render(
+    const { getByRole } = render(
       <ThemeProvider theme={defaultTheme}>
         <ReactionButton {...defaultProps} onPress={undefined} />
       </ThemeProvider>,
     );
 
-    fireEvent.press(getByLabelText('reaction-button-like-unselected'));
+    fireEvent.press(getByRole('button'));
 
     expect(mockOnPress).not.toHaveBeenCalled();
   });

package/src/components/Poll/components/CreatePollHeader.tsx

@@ -51,6 +51,7 @@ export const CreatePollHeader = ({
   return (
     <View style={[styles.headerContainer, headerContainer]}>
       <Button
+        accessibilityLabelKey='a11y/Close poll creation'
         variant='secondary'
         onPress={onBackPressHandler}
         type='solid'
@@ -63,6 +64,7 @@ export const CreatePollHeader = ({
       </Text>
 
       <Button
+        accessibilityLabelKey='a11y/Create poll'
         variant='primary'
         onPress={onCreatePollPressHandler}
         type='solid'