fix: announce muted status in channel details profile

Author: szuperaz

package/src/components/ChannelDetailsScreen/__tests__/ChannelDetailsProfile.test.tsx

@@ -107,10 +107,10 @@ describe('ChannelDetailsProfile', () => {
       expect(screen.getByText('Display Name')).toBeTruthy();
     });
 
-    it('marks the title with accessibilityRole="header"', () => {
+    it('exposes the title row as a header labelled with the display name', () => {
       renderProfile();
-      const title = screen.getByText('Display Name');
-      expect(title.props.accessibilityRole).toBe('header');
+      const header = screen.getByRole('header');
+      expect(header.props.accessibilityLabel).toBe('Display Name');
     });
 
     it('renders an empty title when the display name is missing', () => {
@@ -178,6 +178,12 @@ describe('ChannelDetailsProfile', () => {
       expect(screen.getByTestId('channel-details-profile-muted-indicator')).toBeTruthy();
     });
 
+    it('announces the muted status in the header accessibility label', () => {
+      useChannelMuteActiveSpy.mockReturnValue(true);
+      renderProfile();
+      expect(screen.getByRole('header').props.accessibilityLabel).toBe('Display Name, Muted');
+    });
+
     it('does not render the muted indicator when useChannelMuteActive returns false', () => {
       useChannelMuteActiveSpy.mockReturnValue(false);
       renderProfile();

package/src/components/ChannelDetailsScreen/__tests__/members/ChannelMemberItem.test.tsx

@@ -94,12 +94,12 @@ describe('ChannelMemberItem accessibility', () => {
 describe('ChannelMemberItem muted indicator', () => {
   it('renders the muted icon when the member is muted', () => {
     renderRow({ isMuted: true, member: memberFor() });
-    expect(screen.getByLabelText('Muted')).toBeTruthy();
+    expect(screen.getByTestId('channel-member-muted-indicator')).toBeTruthy();
   });
 
   it('does not render the muted icon when the member is not muted', () => {
     renderRow({ member: memberFor() });
-    expect(screen.queryByLabelText('Muted')).toBeNull();
+    expect(screen.queryByTestId('channel-member-muted-indicator')).toBeNull();
   });
 });
 

package/src/components/ChannelDetailsScreen/components/ChannelDetailsProfile.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { I18nManager, StyleSheet, Text, View } from 'react-native';
 
+import { composeAccessibilityLabel } from '../../../a11y/a11yUtils';
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -48,9 +49,16 @@ export const ChannelDetailsProfile = () => {
     <View style={[styles.container, containerOverride]}>
       <ChannelAvatar channel={channel} showBorder={false} size='2xl' />
       <View style={[styles.heading, headingOverride]}>
-        <View style={styles.titleRow}>
+        <View
+          accessibilityLabel={composeAccessibilityLabel(
+            displayName,
+            muted ? t('Muted') : undefined,
+          )}
+          accessibilityRole='header'
+          accessible
+          style={styles.titleRow}
+        >
           <Text
-            accessibilityRole='header'
             numberOfLines={2}
             style={[styles.title, { color: semantics.textPrimary }, titleOverride]}
           >

package/src/components/ChannelDetailsScreen/components/members/ChannelMemberItem.tsx

@@ -103,9 +103,9 @@ const ChannelMemberItemInner = ({
         <View style={styles.trailing}>
           {isMuted ? (
             <Mute
-              accessibilityLabel={t('Muted')}
               height={16}
               pathFill={semantics.textTertiary}
+              testID='channel-member-muted-indicator'
               width={16}
             />
           ) : null}