more details and tests

Author: mdjastrzebski

src/helpers/__tests__/accessiblity.test.tsx

@@ -522,4 +522,73 @@ describe('computeAccessibleName', () => {
     );
     expect(computeAccessibleName(screen.getByTestId('text-content'))).toBe('Text Content');
   });
+
+  test('concatenates children accessible names', async () => {
+    await render(
+      <>
+        <View testID="multiple-text">
+          <Text>Hello</Text>
+          <Text>World</Text>
+        </View>
+        <View testID="nested-views">
+          <View>
+            <Text>Hello</Text>
+          </View>
+          <View>
+            <Text>World</Text>
+          </View>
+        </View>
+        <View testID="child-with-label">
+          <View aria-label="Hello" />
+          <Text>World</Text>
+        </View>
+        <View testID="deeply-nested">
+          <View>
+            <View>
+              <Text>Hello</Text>
+            </View>
+          </View>
+          <Text>World</Text>
+        </View>
+        <View testID="child-label-over-text">
+          <View aria-label="Hello">
+            <Text>Ignored</Text>
+          </View>
+          <Text>World</Text>
+        </View>
+        <View testID="child-accessibility-label-over-text">
+          <View accessibilityLabel="Hello">
+            <Text>Ignored</Text>
+          </View>
+          <Text>World</Text>
+        </View>
+      </>,
+    );
+    expect(computeAccessibleName(screen.getByTestId('multiple-text'))).toBe('Hello World');
+    expect(computeAccessibleName(screen.getByTestId('nested-views'))).toBe('Hello World');
+    expect(computeAccessibleName(screen.getByTestId('child-with-label'))).toBe('Hello World');
+    expect(computeAccessibleName(screen.getByTestId('deeply-nested'))).toBe('Hello World');
+    expect(computeAccessibleName(screen.getByTestId('child-label-over-text'))).toBe('Hello World');
+    expect(computeAccessibleName(screen.getByTestId('child-accessibility-label-over-text'))).toBe(
+      'Hello World',
+    );
+  });
+
+  test('TextInput placeholder is used only for the element itself', async () => {
+    await render(
+      <>
+        <TextInput testID="text-input" placeholder="Placeholder" />
+        <View testID="parent">
+          <TextInput placeholder="Placeholder" />
+          <Text>Hello</Text>
+        </View>
+        <View testID="parent-no-text">
+          <TextInput placeholder="Placeholder" />
+        </View>
+      </>,
+    );
+    expect(computeAccessibleName(screen.getByTestId('text-input'))).toBe('Placeholder');
+    expect(computeAccessibleName(screen.getByTestId('parent'))).toBe('Hello');
+    expect(computeAccessibleName(screen.getByTestId('parent-no-text'))).toBe('');
+  });
 });

src/helpers/accessibility.ts

@@ -244,13 +244,20 @@ export function computeAriaValue(element: HostElement): AccessibilityValue {
   };
 }
 
-export function computeAccessibleName(element: HostElement): string | undefined {
+type ComputeAccessibleNameOptions = {
+  root?: boolean;
+};
+
+export function computeAccessibleName(
+  element: HostElement,
+  options?: ComputeAccessibleNameOptions,
+): string | undefined {
   const label = computeAriaLabel(element);
   if (label) {
     return label;
   }
 
-  if (isHostTextInput(element) && element.props.placeholder) {
+  if (isHostTextInput(element) && element.props.placeholder && options?.root !== false) {
     return element.props.placeholder;
   }
 
@@ -261,7 +268,7 @@ export function computeAccessibleName(element: HostElement): string | undefined
         parts.push(child);
       }
     } else {
-      const childLabel = computeAccessibleName(child);
+      const childLabel = computeAccessibleName(child, { root: false });
       if (childLabel) {
         parts.push(childLabel);
       }

src/queries/__tests__/role.test.tsx

@@ -135,16 +135,16 @@ describe('supports name option', () => {
     expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
   });
 
-  test('returns an element that has the corresponding role when several children include the name', async () => {
+  test('returns an element that has the corresponding role when several children provide the name', async () => {
     await render(
       <TouchableOpacity accessibilityRole="button" testID="target-button">
         <Text>Save</Text>
-        <Text>Save</Text>
+        <Text>As</Text>
       </TouchableOpacity>,
     );
 
     // assert on the testId to be sure that the returned element is the one with the accessibilityRole
-    expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button');
+    expect(screen.getByRole('button', { name: 'Save As' }).props.testID).toBe('target-button');
   });
 
   test('returns an element that has the corresponding role and a children with a matching accessibilityLabel', async () => {

src/queries/role.ts

@@ -40,14 +40,8 @@ export type ByRoleOptions = CommonQueryOptions &
 const matchAccessibleNameIfNeeded = (node: HostElement, name?: TextMatch) => {
   if (name == null) return true;
 
-  // TODO: rewrite computeAccessibleName for real world a11y compliance
   const accessibleName = computeAccessibleName(node);
-  if (matches(name, accessibleName)) {
-    return true;
-  }
-
-  const { queryAllByText, queryAllByLabelText } = getQueriesForElement(node);
-  return queryAllByText(name).length > 0 || queryAllByLabelText(name).length > 0;
+  return matches(name, accessibleName);
 };
 
 const matchAccessibleStateIfNeeded = (node: HostElement, options?: ByRoleOptions) => {