fix: accessible name calculation

Author: mdjastrzebski

src/helpers/__tests__/accessibility.test.tsx

@@ -864,6 +864,14 @@ describe('computeAccessibleName', () => {
     );
   });
 
+  test('concatenates inline text children without extra spaces', async () => {
+    const user = 'admin';
+
+    await render(<Text testID="subject">Welcome {user}!</Text>);
+
+    expect(computeAccessibleName(screen.getByTestId('subject'))).toBe('Welcome admin!');
+  });
+
   test('TextInput placeholder is used only for the element itself', async () => {
     await render(
       <>

src/helpers/accessibility.ts

@@ -295,7 +295,10 @@ export function computeAccessibleName(
     }
   }
 
-  return parts.join(' ');
+  // Text children are already part of one inline phrase and contain their own spacing.
+  // Other elements contribute separate accessible names, so separate them with spaces.
+  const separator = isHostText(instance) ? '' : ' ';
+  return parts.join(separator);
 }
 
 type RoleSupportMap = Partial<Record<Role | AccessibilityRole, true>>;

src/queries/__tests__/role.test.tsx

@@ -207,6 +207,20 @@ describe('supports name option', () => {
     expect(screen.getByRole('header', { name: 'About' }).props.testID).toBe('target-header');
   });
 
+  test('returns an element when inline text children form the name', async () => {
+    const user = 'admin';
+
+    await render(
+      <Text accessibilityRole="header" testID="target-header">
+        Welcome {user}!
+      </Text>,
+    );
+
+    expect(screen.getByRole('header', { name: 'Welcome admin!' })).toBe(
+      screen.getByTestId('target-header'),
+    );
+  });
+
   test('returns an element with nested Text as children', async () => {
     await render(
       <Text accessibilityRole="header" testID="parent">