basic updates

Author: mdjastrzebski

src/helpers/__tests__/accessiblity.test.tsx

@@ -2,7 +2,12 @@ import React from 'react';
 import { Pressable, Switch, Text, TextInput, TouchableOpacity, View } from 'react-native';
 
 import { isHiddenFromAccessibility, isInaccessible, render, screen } from '../..';
-import { computeAriaDisabled, computeAriaLabel, isAccessibilityElement } from '../accessibility';
+import {
+  computeAccessibleName,
+  computeAriaDisabled,
+  computeAriaLabel,
+  isAccessibilityElement,
+} from '../accessibility';
 
 describe('isHiddenFromAccessibility', () => {
   test('returns false for accessible elements', async () => {
@@ -476,3 +481,45 @@ describe('computeAriaDisabled', () => {
     expect(computeAriaDisabled(screen.getByText('ARIA Disabled Text'))).toBe(true);
   });
 });
+
+describe('computeAccessibleName', () => {
+  test('basic cases', async () => {
+    await render(
+      <>
+        <View testID="aria-label" aria-label="ARIA Label" />
+        <View testID="accessibility-label" accessibilityLabel="Accessibility Label" />
+        <View testID="text-content">
+          <Text>Text Content</Text>
+        </View>
+        <TextInput testID="text-input" placeholder="Text Input" />
+      </>,
+    );
+    expect(computeAccessibleName(screen.getByTestId('aria-label'))).toBe('ARIA Label');
+    expect(computeAccessibleName(screen.getByTestId('accessibility-label'))).toBe(
+      'Accessibility Label',
+    );
+    expect(computeAccessibleName(screen.getByTestId('text-content'))).toBe('Text Content');
+    expect(computeAccessibleName(screen.getByTestId('text-input'))).toBe('Text Input');
+  });
+
+  test('basic precedence', async () => {
+    await render(
+      <>
+        <View testID="aria-label" aria-label="ARIA Label" accessibilityLabel="Accessibility Label">
+          <Text>Text Content</Text>
+        </View>
+        <View testID="accessibility-label" accessibilityLabel="Accessibility Label">
+          <Text>Text Content</Text>
+        </View>
+        <View testID="text-content">
+          <Text>Text Content</Text>
+        </View>
+      </>,
+    );
+    expect(computeAccessibleName(screen.getByTestId('aria-label'))).toBe('ARIA Label');
+    expect(computeAccessibleName(screen.getByTestId('accessibility-label'))).toBe(
+      'Accessibility Label',
+    );
+    expect(computeAccessibleName(screen.getByTestId('text-content'))).toBe('Text Content');
+  });
+});

src/helpers/accessibility.ts

@@ -6,7 +6,7 @@ import { getContainerElement, getHostSiblings, isHostElement } from './component
 import { findAll } from './find-all';
 import { isHostImage, isHostSwitch, isHostText, isHostTextInput } from './host-component-names';
 import { getTextContent } from './text-content';
-import { isEditableTextInput } from './text-input';
+import { getTextInputValue, isEditableTextInput } from './text-input';
 
 type IsInaccessibleOptions = {
   cache?: WeakMap<HostElement, boolean>;
@@ -245,7 +245,30 @@ export function computeAriaValue(element: HostElement): AccessibilityValue {
 }
 
 export function computeAccessibleName(element: HostElement): string | undefined {
-  return computeAriaLabel(element) ?? getTextContent(element);
+  const label = computeAriaLabel(element);
+  if (label) {
+    return label;
+  }
+
+  if (isHostTextInput(element) && element.props.placeholder) {
+    return element.props.placeholder;
+  }
+
+  const parts = [];
+  for (const child of element.children) {
+    if (typeof child === 'string') {
+      if (child) {
+        parts.push(child);
+      }
+    } else {
+      const childLabel = computeAccessibleName(child);
+      if (childLabel) {
+        parts.push(childLabel);
+      }
+    }
+  }
+
+  return parts.join(' ');
 }
 
 type RoleSupportMap = Partial<Record<Role | AccessibilityRole, true>>;