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

package/src/components/Poll/components/MultipleVotesSettings.tsx

@@ -163,6 +163,7 @@ export const MultipleVotesSettings = () => {
           style={[styles.row, multipleAnswers.row]}
         >
           <Button
+            accessibilityLabelKey='a11y/Decrease maximum votes'
             variant='secondary'
             type='outline'
             size='md'
@@ -175,6 +176,7 @@ export const MultipleVotesSettings = () => {
           />
           <MaxVotesTextInput />
           <Button
+            accessibilityLabelKey='a11y/Increase maximum votes'
             variant='secondary'
             type='outline'
             size='md'

package/src/components/Poll/components/PollModalHeader.tsx

@@ -25,6 +25,7 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
     <View style={[styles.container, container]}>
       <View style={styles.sideContainer}>
         <Button
+          accessibilityLabelKey='a11y/Close poll'
           variant='secondary'
           type='solid'
           size='md'

package/src/components/Poll/components/PollOption.tsx

@@ -25,6 +25,11 @@ import { UserAvatarStack } from '../../ui/Avatar/AvatarStack';
 import { useIsPollCreatedByCurrentUser } from '../hook/useIsPollCreatedByCurrentUser';
 import { usePollState } from '../hooks/usePollState';
 
+const pollVoteAccessibilityStates = {
+  checked: { checked: true, selected: true },
+  unchecked: { checked: false, selected: false },
+} as const;
+
 export type PollOptionProps = {
   option: PollOptionClass;
   showProgressBar?: boolean;
@@ -190,9 +195,15 @@ export const VoteButton = ({ onPress, option }: PollVoteButtonProps) => {
   }, [message, onPress, poll, toggleVote]);
 
   const hasVote = !!ownVotesByOptionId[option.id];
+  const accessibilityState = hasVote
+    ? pollVoteAccessibilityStates.checked
+    : pollVoteAccessibilityStates.unchecked;
 
   return ownCapabilities.castPollVote && !isClosed ? (
     <Pressable
+      accessibilityLabel={option.text}
+      accessibilityRole={poll.data?.enforce_unique_vote ? 'radio' : 'checkbox'}
+      accessibilityState={accessibilityState}
       onPress={onPressHandler}
       style={({ pressed }) => [
         { opacity: pressed ? 0.5 : 1 },

package/src/components/ProgressControl/ProgressControl.tsx

@@ -110,9 +110,17 @@ export const ProgressControl = (props: ProgressControlProps) => {
     [widthInNumbers],
   );
 
+  const progressPercent = Math.round(progress * 100);
+  const accessibilityValue = useMemo(
+    () => ({ max: 100, min: 0, now: progressPercent }),
+    [progressPercent],
+  );
+
   return (
     <GestureDetector gesture={pan}>
       <View
+        accessibilityRole={onEndDrag ? 'adjustable' : 'progressbar'}
+        accessibilityValue={accessibilityValue}
         onLayout={({ nativeEvent }) => {
           setWidthInNumbers(nativeEvent.layout.width);
         }}

package/src/components/Reply/Reply.tsx

@@ -151,7 +151,11 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
   }
 
   return (
-    <View style={[!messageFromContext?.quoted_message ? styles.wrapper : null, wrapper]}>
+    <View
+      accessibilityLabel={title}
+      accessibilityRole='text'
+      style={[!messageFromContext?.quoted_message ? styles.wrapper : null, wrapper]}
+    >
       <View style={[styles.container, container, stylesProp?.container]}>
         <View style={[styles.leftContainer, leftContainer, stylesProp?.leftContainer]}>
           <Text numberOfLines={1} style={[styles.title, titleStyle, stylesProp?.title]}>
@@ -166,7 +170,10 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
       </View>
       {onDismiss ? (
         <View style={[styles.dismissWrapper, dismissWrapper, stylesProp?.dismissWrapper]}>
-          <AttachmentRemoveControl onPress={onDismiss} />
+          <AttachmentRemoveControl
+            accessibilityLabelKey={mode === 'edit' ? 'a11y/Remove edit' : 'a11y/Remove reply'}
+            onPress={onDismiss}
+          />
         </View>
       ) : null}
     </View>

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -412,6 +412,8 @@ exports[`Thread should match thread snapshot 1`] = `
                                 testID="avatar-image"
                               >
                                 <Image
+                                  accessibilityElementsHidden={true}
+                                  importantForAccessibility="no"
                                   onError={[Function]}
                                   source={
                                     {
@@ -753,6 +755,8 @@ exports[`Thread should match thread snapshot 1`] = `
                                 testID="avatar-image"
                               >
                                 <Image
+                                  accessibilityElementsHidden={true}
+                                  importantForAccessibility="no"
                                   onError={[Function]}
                                   source={
                                     {
@@ -1127,6 +1131,8 @@ exports[`Thread should match thread snapshot 1`] = `
                                 testID="avatar-image"
                               >
                                 <Image
+                                  accessibilityElementsHidden={true}
+                                  importantForAccessibility="no"
                                   onError={[Function]}
                                   source={
                                     {
@@ -1459,6 +1465,8 @@ exports[`Thread should match thread snapshot 1`] = `
                               testID="avatar-image"
                             >
                               <Image
+                                accessibilityElementsHidden={true}
+                                importantForAccessibility="no"
                                 onError={[Function]}
                                 source={
                                   {
@@ -1726,6 +1734,9 @@ exports[`Thread should match thread snapshot 1`] = `
         </View>
       </RCTScrollView>
       <View
+        accessibilityElementsHidden={true}
+        accessible={false}
+        importantForAccessibility="no-hide-descendants"
         style={
           {
             "left": 0,
@@ -1827,13 +1838,14 @@ exports[`Thread should match thread snapshot 1`] = `
                       }
                     >
                       <View
+                        accessibilityRole="button"
                         accessibilityState={
                           {
                             "busy": undefined,
                             "checked": undefined,
                             "disabled": false,
                             "expanded": undefined,
-                            "selected": undefined,
+                            "selected": false,
                           }
                         }
                         accessibilityValue={
@@ -2191,13 +2203,14 @@ exports[`Thread should match thread snapshot 1`] = `
                           }
                         >
                           <View
+                            accessibilityRole="button"
                             accessibilityState={
                               {
                                 "busy": undefined,
                                 "checked": undefined,
                                 "disabled": true,
                                 "expanded": undefined,
-                                "selected": undefined,
+                                "selected": false,
                               }
                             }
                             accessibilityValue={
@@ -2374,13 +2387,14 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         >
           <View
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
                 "checked": undefined,
                 "disabled": false,
                 "expanded": undefined,
-                "selected": undefined,
+                "selected": false,
               }
             }
             accessibilityValue={
@@ -2513,13 +2527,14 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         >
           <View
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
                 "checked": undefined,
                 "disabled": false,
                 "expanded": undefined,
-                "selected": undefined,
+                "selected": false,
               }
             }
             accessibilityValue={
@@ -2681,13 +2696,14 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         >
           <View
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
                 "checked": undefined,
                 "disabled": false,
                 "expanded": undefined,
-                "selected": undefined,
+                "selected": false,
               }
             }
             accessibilityValue={
@@ -2816,13 +2832,14 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         >
           <View
+            accessibilityRole="button"
             accessibilityState={
               {
                 "busy": undefined,
                 "checked": undefined,
                 "disabled": false,
                 "expanded": undefined,
-                "selected": undefined,
+                "selected": false,
               }
             }
             accessibilityValue={

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -38,6 +38,7 @@ import {
   getBottomSheetTopSnapIndex,
 } from './BottomSheetModal.utils';
 
+import { useResolvedModalAccessibilityProps } from '../../a11y/hooks/useResolvedModalAccessibilityProps';
 import { BottomSheetProvider } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
@@ -501,6 +502,8 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
 
   const onBackdropPress = useStableCallback(() => close());
 
+  const modalA11yProps = useResolvedModalAccessibilityProps();
+
   const bottomSheetModalContextValue = useMemo(
     () => ({
       close,
@@ -523,6 +526,7 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
           <Animated.View
             pointerEvents='box-none'
             style={[{ height: maxHeight }, sheetViewportAnimatedStyle]}
+            {...modalA11yProps}
           >
             <GestureDetector gesture={panGesture}>
               <Animated.View style={[styles.container, { height: maxHeight }, container]}>

package/src/components/index.ts

@@ -1,3 +1,5 @@
+export * from './Accessibility';
+
 export * from './Attachment/Attachment';
 export * from './Attachment/Audio';
 export * from './Attachment/UrlPreview';

package/src/components/ui/Avatar/Avatar.tsx

@@ -3,16 +3,28 @@ import { ColorValue, StyleProp, StyleSheet, View, ViewStyle } from 'react-native
 
 import { avatarSizes } from './constants';
 
+import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../theme';
 
 export type AvatarProps = {
   size: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
+  /**
+   * Override for the auto-generated accessibility label. When omitted and a
+   * `name` is provided, the SDK uses `a11y/Avatar of {{name}}`.
+   */
+  accessibilityLabel?: string;
+  backgroundColor?: ColorValue;
   imageUrl?: string;
+  /**
+   * Display name of the entity this avatar represents (user, channel). Used to
+   * compose the default `accessibilityLabel`. Optional — when neither this nor
+   * `accessibilityLabel` is provided, the avatar is left unlabeled.
+   */
+  name?: string;
   placeholder?: React.ReactNode;
   showBorder?: boolean;
-  backgroundColor?: ColorValue;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -24,14 +36,19 @@ export const Avatar = (props: AvatarProps) => {
   const { ImageComponent } = useComponentsContext();
   const defaultAvatarBg = semantics.avatarPaletteBg1;
   const {
+    accessibilityLabel: accessibilityLabelOverride,
     backgroundColor = defaultAvatarBg,
-    size,
     imageUrl,
+    name,
     placeholder,
     showBorder,
+    size,
     style,
   } = props;
   const styles = useStyles();
+  const accessibilityLabelParams = useMemo(() => ({ name: name ?? '' }), [name]);
+  const composedLabel = useA11yLabel('a11y/Avatar of {{name}}', accessibilityLabelParams);
+  const accessibilityLabel = accessibilityLabelOverride ?? (name ? composedLabel : undefined);
 
   const onHandleError = useCallback(() => {
     setError(true);
@@ -39,6 +56,9 @@ export const Avatar = (props: AvatarProps) => {
 
   return (
     <View
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityLabel ? 'image' : undefined}
+      accessible={accessibilityLabel ? true : undefined}
       style={[
         styles.container,
         avatarSizes[size],
@@ -50,6 +70,8 @@ export const Avatar = (props: AvatarProps) => {
     >
       {imageUrl && !error ? (
         <ImageComponent
+          accessibilityElementsHidden
+          importantForAccessibility='no'
           onError={onHandleError}
           source={{ uri: imageUrl }}
           style={[styles.image, avatarSizes[size]]}

package/src/components/ui/Avatar/ChannelAvatar.tsx

@@ -45,11 +45,14 @@ export const ChannelAvatar = (props: ChannelAvatarProps) => {
     [usersForGroup, client.user?.id],
   );
 
+  const channelName = (channel.data?.name as string | undefined) ?? channel.cid;
+
   if (channelImage) {
     return (
       <Avatar
         backgroundColor={avatarBackgroundColor}
         imageUrl={channelImage}
+        name={channelName}
         showBorder={showBorder}
         size={size}
       />

package/src/components/ui/Avatar/UserAvatar.tsx

@@ -50,6 +50,7 @@ export const UserAvatar = (props: UserAvatarProps) => {
       <Avatar
         backgroundColor={avatarBackgroundColor}
         imageUrl={user?.image}
+        name={user?.name || user?.id}
         placeholder={placeholder}
         showBorder={showBorder}
         size={size}

package/src/components/ui/Button/Button.tsx

@@ -6,13 +6,45 @@ import { Pressable, PressableProps } from 'react-native-gesture-handler';
 import { buttonPadding, buttonSizes } from './constants';
 import { useButtonStyles } from './hooks/useButtonStyles';
 
+import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
+import { useAccessibilityActivateAction } from '../../../a11y/hooks/useAccessibilityActivateAction';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { IconProps } from '../../../icons/utils/base';
 import { primitives } from '../../../theme';
 
 export type IconRenderer = (props: IconProps) => React.ReactNode;
 
+const buttonAccessibilityStates = {
+  disabled: { disabled: true, selected: false },
+  disabledSelected: { disabled: true, selected: true },
+  enabled: { disabled: false, selected: false },
+  selected: { disabled: false, selected: true },
+} as const;
+
+const getButtonAccessibilityState = ({
+  disabled,
+  selected,
+}: {
+  disabled: boolean;
+  selected: boolean;
+}) => {
+  if (disabled)
+    return selected
+      ? buttonAccessibilityStates.disabledSelected
+      : buttonAccessibilityStates.disabled;
+  return selected ? buttonAccessibilityStates.selected : buttonAccessibilityStates.enabled;
+};
+
 export type ButtonProps = PressableProps & {
+  /**
+   * Translation key used for the button's accessibility label when SDK
+   * accessibility is enabled. Prefer this for SDK-owned icon-only buttons.
+   */
+  accessibilityLabelKey?: string;
+  /**
+   * Optional interpolation params for `accessibilityLabelKey`.
+   */
+  accessibilityLabelParams?: Record<string, unknown>;
   /**
    * The style of the button.
    */
@@ -53,6 +85,9 @@ export type ButtonProps = PressableProps & {
 };
 
 export const Button = ({
+  accessibilityLabel,
+  accessibilityLabelKey,
+  accessibilityLabelParams,
   variant,
   type,
   selected = false,
@@ -78,6 +113,16 @@ export const Button = ({
   const RightIcon = isRTL ? LeadingIcon : TrailingIcon;
   const IconOnlyIcon = LeadingIcon ?? TrailingIcon;
   const PrimaryIcon = iconOnly ? IconOnlyIcon : LeftIcon;
+  const accessibilityState = getButtonAccessibilityState({ disabled: !!disabled, selected });
+  const translatedAccessibilityLabel = useA11yLabel(
+    accessibilityLabelKey ?? '',
+    accessibilityLabelParams,
+  );
+  const resolvedAccessibilityLabel = translatedAccessibilityLabel ?? accessibilityLabel;
+  const accessibilityActivateActionProps = useAccessibilityActivateAction({
+    onPress: rest.onPress,
+    shouldHandleActivate: !!rest.onPress && !disabled && !!resolvedAccessibilityLabel,
+  });
 
   return (
     <View
@@ -97,6 +142,10 @@ export const Button = ({
       onLayout={onLayout}
     >
       <Pressable
+        accessible
+        accessibilityLabel={resolvedAccessibilityLabel}
+        accessibilityRole='button'
+        accessibilityState={accessibilityState}
         style={({ pressed }) => [
           {
             backgroundColor: pressed
@@ -109,6 +158,7 @@ export const Button = ({
           styles.container,
         ]}
         disabled={disabled}
+        {...accessibilityActivateActionProps}
         {...rest}
       >
         {PrimaryIcon ? (

package/src/components/ui/Button/__tests__/Button.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { render, screen, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../../contexts';
+import { Button } from '../Button';
+
+describe('Button accessibilityLabelKey', () => {
+  it('uses the translated accessibility label when accessibility is enabled', async () => {
+    render(
+      <OverlayProvider accessibility={{ enabled: true }}>
+        <Button
+          accessibilityLabelKey='a11y/Add attachment'
+          iconOnly
+          onPress={jest.fn()}
+          size='md'
+          type='outline'
+          variant='secondary'
+        />
+      </OverlayProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Add attachment')).toBeTruthy();
+    });
+  });
+
+  it('supports a plain accessibilityLabel without the translation path', () => {
+    render(
+      <OverlayProvider>
+        <Button
+          accessibilityLabel='Legacy label'
+          iconOnly
+          onPress={jest.fn()}
+          size='md'
+          type='outline'
+          variant='secondary'
+        />
+      </OverlayProvider>,
+    );
+
+    expect(screen.getByLabelText('Legacy label')).toBeTruthy();
+  });
+});

package/src/components/ui/Input/Input.tsx

@@ -18,6 +18,25 @@ import { InfoTooltip } from '../../../icons/info';
 import { primitives } from '../../../theme';
 import { IconRenderer } from '../Button';
 
+const inputAccessibilityStates = {
+  disabled: { disabled: true, selected: false },
+  disabledSelected: { disabled: true, selected: true },
+  enabled: { disabled: false, selected: false },
+  selected: { disabled: false, selected: true },
+} as const;
+
+const getInputAccessibilityState = ({
+  disabled,
+  selected,
+}: {
+  disabled: boolean;
+  selected: boolean;
+}) => {
+  if (disabled)
+    return selected ? inputAccessibilityStates.disabledSelected : inputAccessibilityStates.disabled;
+  return selected ? inputAccessibilityStates.selected : inputAccessibilityStates.enabled;
+};
+
 export type InputProps = TextInputProps & {
   title?: string;
   description?: string;
@@ -59,6 +78,10 @@ export const Input = ({
 
   const LeftIcon = isRTL ? TrailingIcon : LeadingIcon;
   const RightIcon = isRTL ? LeadingIcon : TrailingIcon;
+  const accessibilityState = getInputAccessibilityState({
+    disabled: !editable,
+    selected: isFocused,
+  });
 
   const handleFocus = useCallback(
     (e: TextInputFocusEvent) => {
@@ -104,6 +127,9 @@ export const Input = ({
           />
         ) : null}
         <TextInput
+          accessibilityHint={description}
+          accessibilityLabel={props.accessibilityLabel ?? title}
+          accessibilityState={accessibilityState}
           editable={editable}
           onFocus={handleFocus}
           onBlur={handleBlur}
@@ -111,6 +137,15 @@ export const Input = ({
           placeholderTextColor={semantics.inputTextPlaceholder}
           {...props}
         />
+        {state === 'error' && errorMessage ? (
+          <View
+            accessibilityLiveRegion='assertive'
+            accessibilityRole='alert'
+            style={{ width: 0, height: 0 }}
+          >
+            <Text>{errorMessage}</Text>
+          </View>
+        ) : null}
         {RightIcon ? (
           <RightIcon
             height={20}