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

package/src/a11y/hooks/useA11yLabel.ts

@@ -1,5 +1,7 @@
+import { useContext } from 'react';
+
 import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
-import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { TranslationContext } from '../../contexts/translationContext/TranslationContext';
 
 /**
  * Returns the translated `a11y/...` label when the AccessibilityContext is enabled,
@@ -8,12 +10,13 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
  * default disabled-state.
  *
  * Example:
- *   const label = useA11yLabel('a11y/Avatar of {{name}}', { name });
+ *   const labelParams = useMemo(() => ({ name }), [name]);
+ *   const label = useA11yLabel('a11y/Avatar of {{name}}', labelParams);
  *   <Image accessibilityLabel={label} />
  */
 export const useA11yLabel = (key: string, params?: Record<string, unknown>): string | undefined => {
   const { enabled } = useAccessibilityContext();
-  const { t } = useTranslationContext();
-  if (!enabled) return undefined;
+  const { t } = useContext(TranslationContext);
+  if (!enabled || !key) return undefined;
   return t(key, params);
 };

package/src/a11y/hooks/useAccessibilityActivateAction.ts

@@ -0,0 +1,44 @@
+import type { AccessibilityActionEvent, AccessibilityProps } from 'react-native';
+
+import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
+
+export type UseAccessibilityActivateActionProps<TPressEvent> = {
+  onPress?: ((event: TPressEvent) => void) | null;
+  shouldHandleActivate?: boolean;
+};
+
+export type UseAccessibilityActivateActionResult =
+  | {
+      accessibilityActions?: AccessibilityProps['accessibilityActions'];
+      onAccessibilityAction?: AccessibilityProps['onAccessibilityAction'];
+    }
+  | undefined;
+
+const accessibilityActivateActions: NonNullable<AccessibilityProps['accessibilityActions']> = [
+  { name: 'activate' },
+];
+
+/**
+ * Adds the standard screen-reader `activate` action for labeled pressables when
+ * SDK accessibility is enabled. Some Android pressable implementations don't
+ * reliably map TalkBack double-tap to `onPress`, so this bridges the generated
+ * accessibility action back to the existing press handler.
+ */
+export const useAccessibilityActivateAction = <TPressEvent>({
+  onPress,
+  shouldHandleActivate = false,
+}: UseAccessibilityActivateActionProps<TPressEvent>): UseAccessibilityActivateActionResult => {
+  const { enabled } = useAccessibilityContext();
+  const shouldHandleAccessibilityActivate = enabled && shouldHandleActivate && !!onPress;
+
+  if (!shouldHandleAccessibilityActivate) return undefined;
+
+  return {
+    accessibilityActions: accessibilityActivateActions,
+    onAccessibilityAction: (event: AccessibilityActionEvent) => {
+      if (event.nativeEvent.actionName !== 'activate') return;
+
+      onPress(event as unknown as TPressEvent);
+    },
+  };
+};

package/src/a11y/index.ts

@@ -4,3 +4,4 @@ export * from './hooks/useReducedMotionPreference';
 export * from './hooks/useResolvedModalAccessibilityProps';
 export * from './hooks/useAnnounceOnStateChange';
 export * from './hooks/useA11yLabel';
+export * from './hooks/useAccessibilityActivateAction';

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -6,11 +6,13 @@ import {
   Platform,
   View,
   LayoutChangeEvent,
+  useWindowDimensions,
 } from 'react-native';
 
 import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 
 import { useBottomSheetSpringConfigs } from '@gorhom/bottom-sheet';
+import type { BottomSheetBackgroundProps } from '@gorhom/bottom-sheet';
 import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
@@ -38,13 +40,14 @@ export const AttachmentPicker = () => {
     attachmentPickerStore,
     attachmentPickerBottomSheetHeight,
     bottomSheetRef: ref,
+    bottomInset,
     disableAttachmentPicker,
   } = useAttachmentPickerContext();
   const { AttachmentPickerContent, AttachmentPickerSelectionBar } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
-
+  const { height: windowHeight } = useWindowDimensions();
   const [currentIndex, setCurrentIndexInternal] = useState(-1);
   const currentIndexRef = useRef<number>(currentIndex);
   const setCurrentIndex = useStableCallback((_: number, toIndex: number) => {
@@ -99,6 +102,10 @@ export const AttachmentPicker = () => {
   const selectionBarRef = useRef<number | null>(null);
 
   const initialSnapPoint = attachmentPickerBottomSheetHeight;
+  const pickerTopInset = Math.max(
+    0,
+    windowHeight - attachmentPickerBottomSheetHeight - bottomInset,
+  );
 
   /**
    * Snap points changing cause a rerender of the position,
@@ -150,8 +157,13 @@ export const AttachmentPicker = () => {
 
   return (
     <BottomSheet
+      accessible={false}
+      accessibilityLabel={null}
+      accessibilityRole={null}
       android_keyboardInputMode='adjustResize'
+      backgroundComponent={AttachmentPickerBackground}
       backgroundStyle={backgroundStyle}
+      bottomInset={bottomInset}
       enablePanDownToClose={false}
       enableContentPanningGesture={false}
       enableDynamicSizing={false}
@@ -162,6 +174,7 @@ export const AttachmentPicker = () => {
       // @ts-ignore
       ref={ref}
       snapPoints={snapPoints}
+      topInset={pickerTopInset}
       animationConfigs={animationConfigs}
     >
       <View onLayout={onAttachmentPickerSelectionBarLayout}>
@@ -178,4 +191,13 @@ export const AttachmentPicker = () => {
 
 const RenderNull = () => null;
 
+const AttachmentPickerBackground = ({ pointerEvents, style }: BottomSheetBackgroundProps) => (
+  <View
+    accessible={false}
+    importantForAccessibility='no'
+    pointerEvents={pointerEvents}
+    style={style}
+  />
+);
+
 AttachmentPicker.displayName = 'AttachmentPicker';

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

@@ -172,6 +172,7 @@ export const AttachmentMediaPicker = (props: AttachmentPickerContentProps) => {
       numColumns={numberOfColumns}
       onEndReached={photoError ? undefined : getMorePhotos}
       renderItem={renderAttachmentPickerItem}
+      showsVerticalScrollIndicator={false}
       testID={'attachment-picker-list'}
       updateCellsBatchingPeriod={16}
     />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/MessageInput/components/AttachmentPreview/AttachmentRemoveControl.tsx

@@ -2,13 +2,22 @@ import React, { useMemo } from 'react';
 
 import { Pressable, PressableProps, StyleSheet } from 'react-native';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { NewClose } from '../../../../icons/xmark';
 import { primitives } from '../../../../theme';
 
-type AttachmentRemoveControlProps = PressableProps;
+type AttachmentRemoveControlProps = PressableProps & {
+  accessibilityLabelKey?: string;
+  accessibilityLabelParams?: Record<string, unknown>;
+};
 
-export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProps) => {
+export const AttachmentRemoveControl = ({
+  accessibilityLabelKey = 'a11y/Remove attachment',
+  accessibilityLabelParams,
+  onPress,
+  ...rest
+}: AttachmentRemoveControlProps) => {
   const {
     theme: {
       semantics,
@@ -18,9 +27,15 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp
     },
   } = useTheme();
   const styles = useStyles();
+  const translatedAccessibilityLabel = useA11yLabel(
+    accessibilityLabelKey,
+    accessibilityLabelParams,
+  );
 
   return (
     <Pressable
+      accessibilityLabel={translatedAccessibilityLabel}
+      accessibilityRole='button'
       hitSlop={15}
       onPress={onPress}
       style={({ pressed }) => [
@@ -31,6 +46,7 @@ export const AttachmentRemoveControl = ({ onPress }: AttachmentRemoveControlProp
         dismiss,
       ]}
       testID='remove-upload-preview'
+      {...rest}
     >
       <NewClose
         height={16}

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -59,6 +59,7 @@ const StopRecording = ({
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Stop voice recording'
       variant='destructive'
       type='outline'
       size='sm'
@@ -83,6 +84,7 @@ const UploadRecording = ({
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Send voice recording'
       variant='primary'
       type='solid'
       onPress={onUploadVoiceRecording}
@@ -104,6 +106,7 @@ const DeleteRecording = ({
   };
   return (
     <Button
+      accessibilityLabelKey='a11y/Delete voice recording'
       variant='secondary'
       type='outline'
       size='sm'

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -10,6 +10,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 
+import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { useActiveAudioPlayer } from '../../../../contexts/audioPlayerContext/AudioPlayerContext';
 import {
   MessageInputContextValue,
@@ -83,6 +84,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
   const pressed = useSharedValue(false);
 
   const { t } = useTranslationContext();
+  const startVoiceRecordingAccessibilityLabel = useA11yLabel('a11y/Start voice recording');
   const {
     theme: {
       messageComposer: { micButtonContainer },
@@ -238,7 +240,12 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
 
   return (
     <GestureDetector gesture={Gesture.Simultaneous(panGesture, tapGesture)}>
-      <Animated.View style={[styles.container, animatedStyle, micButtonContainer]}>
+      <Animated.View
+        accessibilityLabel={startVoiceRecordingAccessibilityLabel}
+        accessibilityRole='button'
+        accessible
+        style={[styles.container, animatedStyle, micButtonContainer]}
+      >
         <Mic height={20} width={20} strokeWidth={1.5} stroke={buttonStyles.foregroundColor} />
       </Animated.View>
     </GestureDetector>

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -10,6 +10,7 @@ import {
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStableCallback } from '../../../../hooks';
+import { useAttachmentPickerState } from '../../../../hooks/useAttachmentPickerState';
 import { Plus } from '../../../../icons/plus';
 import { Button } from '../../../ui/';
 
@@ -18,6 +19,7 @@ type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttach
     disabled?: boolean;
     /** Function that opens attachment options bottom sheet */
     handleOnPress?: ((event: GestureResponderEvent) => void) & (() => void);
+    isAttachmentPickerOpen?: boolean;
   } & { toggleAttachmentPicker: () => void };
 
 const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
@@ -25,6 +27,7 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
     disabled = false,
     handleAttachButtonPress,
     handleOnPress,
+    isAttachmentPickerOpen = false,
     toggleAttachmentPicker,
   } = props;
 
@@ -45,6 +48,9 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
 
   return (
     <Button
+      accessibilityLabelKey={
+        isAttachmentPickerOpen ? 'a11y/Close attachments' : 'a11y/Add attachment'
+      }
       variant='secondary'
       type='outline'
       size='lg'
@@ -61,15 +67,17 @@ const areEqual = (
   prevProps: AttachButtonPropsWithContext,
   nextProps: AttachButtonPropsWithContext,
 ) => {
-  const { handleOnPress: prevHandleOnPress } = prevProps;
-  const { handleOnPress: nextHandleOnPress } = nextProps;
+  const { handleOnPress: prevHandleOnPress, isAttachmentPickerOpen: prevIsAttachmentPickerOpen } =
+    prevProps;
+  const { handleOnPress: nextHandleOnPress, isAttachmentPickerOpen: nextIsAttachmentPickerOpen } =
+    nextProps;
 
   const handleOnPressEqual = prevHandleOnPress === nextHandleOnPress;
   if (!handleOnPressEqual) {
     return false;
   }
 
-  return true;
+  return prevIsAttachmentPickerOpen === nextIsAttachmentPickerOpen;
 };
 
 const MemoizedAttachButton = React.memo(
@@ -86,6 +94,7 @@ export const AttachButton = (props: AttachButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
   const { inputBoxRef, handleAttachButtonPress, openAttachmentPicker } = useMessageInputContext();
   const { attachmentPickerStore } = useAttachmentPickerContext();
+  const { selectedPicker } = useAttachmentPickerState();
 
   const toggleAttachmentPicker = useStableCallback(() => {
     if (attachmentPickerStore.state.getLatestValue().selectedPicker) {
@@ -100,6 +109,7 @@ export const AttachButton = (props: AttachButtonProps) => {
       {...{
         disableAttachmentPicker,
         handleAttachButtonPress,
+        isAttachmentPickerOpen: !!selectedPicker,
         toggleAttachmentPicker,
       }}
       {...props}

package/src/components/MessageInput/components/OutputButtons/EditButton.tsx

@@ -26,6 +26,7 @@ export const EditButton = (props: EditButtonProps) => {
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Save edited message'
       variant='primary'
       type='solid'
       LeadingIcon={Tick}

package/src/components/MessageInput/components/OutputButtons/SendButton.tsx

@@ -26,6 +26,7 @@ export const SendButton = (props: SendButtonProps) => {
 
   return (
     <Button
+      accessibilityLabelKey='a11y/Send message'
       variant='primary'
       type='solid'
       disabled={disabled}