refactor(v13): a11y label helpers (#1666)

Author: mdjastrzebski

.github/workflows/ci.yml

@@ -72,7 +72,7 @@ jobs:
       - name: Setup Node.js and deps
         uses: ./.github/actions/setup-deps
 
-      - name: Test in concurrent mode
+      - name: Test in legacy mode
         run: CONCURRENT_MODE=0 yarn test:ci
 
   test-website:

src/helpers/__tests__/accessiblity.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TextInput, Pressable, Switch, TouchableOpacity } from 'react-native';
 import { render, isHiddenFromAccessibility, isInaccessible, screen } from '../..';
-import { isAccessibilityElement } from '../accessibility';
+import { computeAriaLabel, isAccessibilityElement } from '../accessibility';
 
 describe('isHiddenFromAccessibility', () => {
   test('returns false for accessible elements', () => {
@@ -371,3 +371,39 @@ describe('isAccessibilityElement', () => {
     expect(isAccessibilityElement(null)).toEqual(false);
   });
 });
+
+describe('computeAriaLabel', () => {
+  test('supports basic usage', () => {
+    render(
+      <View>
+        <View testID="label" aria-label="Internal Label" />
+        <View testID="label-by-id" aria-labelledby="external-label" />
+        <View nativeID="external-label">
+          <Text>External Text</Text>
+        </View>
+        <View testID="no-label" />
+        <View testID="text-content">
+          <Text>Text Content</Text>
+        </View>
+      </View>,
+    );
+
+    expect(computeAriaLabel(screen.getByTestId('label'))).toEqual('Internal Label');
+    expect(computeAriaLabel(screen.getByTestId('label-by-id'))).toEqual('External Text');
+    expect(computeAriaLabel(screen.getByTestId('no-label'))).toBeUndefined();
+    expect(computeAriaLabel(screen.getByTestId('text-content'))).toBeUndefined();
+  });
+
+  test('label priority', () => {
+    render(
+      <View>
+        <View testID="subject" aria-label="Internal Label" aria-labelledby="external-content" />
+        <View nativeID="external-content">
+          <Text>External Label</Text>
+        </View>
+      </View>,
+    );
+
+    expect(computeAriaLabel(screen.getByTestId('subject'))).toEqual('External Label');
+  });
+});

src/helpers/__tests__/component-tree.test.tsx

@@ -228,8 +228,4 @@ describe('getUnsafeRootElement()', () => {
     const view = screen.getByTestId('view');
     expect(getUnsafeRootElement(view)).toEqual(screen.UNSAFE_root);
   });
-
-  it('returns null for null', () => {
-    expect(getUnsafeRootElement(null)).toEqual(null);
-  });
 });

src/helpers/accessibility.ts

@@ -5,8 +5,9 @@ import {
   Role,
   StyleSheet,
 } from 'react-native';
-import { ReactTestInstance } from 'react-test-renderer';
-import { getHostSiblings, getUnsafeRootElement } from './component-tree';
+import type { ReactTestInstance } from 'react-test-renderer';
+import { getHostSiblings, getUnsafeRootElement, isHostElement } from './component-tree';
+import { findAll } from './find-all';
 import { isHostImage, isHostSwitch, isHostText, isHostTextInput } from './host-component-names';
 import { getTextContent } from './text-content';
 import { isTextInputEditable } from './text-input';
@@ -158,6 +159,19 @@ export function computeAriaModal(element: ReactTestInstance): boolean | undefine
 }
 
 export function computeAriaLabel(element: ReactTestInstance): string | undefined {
+  const labelElementId = element.props['aria-labelledby'] ?? element.props.accessibilityLabelledBy;
+  if (labelElementId) {
+    const rootElement = getUnsafeRootElement(element);
+    const labelElement = findAll(
+      rootElement,
+      (node) => isHostElement(node) && node.props.nativeID === labelElementId,
+      { includeHiddenElements: true },
+    );
+    if (labelElement.length > 0) {
+      return getTextContent(labelElement[0]);
+    }
+  }
+
   const explicitLabel = element.props['aria-label'] ?? element.props.accessibilityLabel;
   if (explicitLabel) {
     return explicitLabel;
@@ -171,10 +185,6 @@ export function computeAriaLabel(element: ReactTestInstance): string | undefined
   return undefined;
 }
 
-export function computeAriaLabelledBy(element: ReactTestInstance): string | undefined {
-  return element.props['aria-labelledby'] ?? element.props.accessibilityLabelledBy;
-}
-
 // See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#busy-state
 export function computeAriaBusy({ props }: ReactTestInstance): boolean {
   return props['aria-busy'] ?? props.accessibilityState?.busy ?? false;
@@ -234,21 +244,7 @@ export function computeAriaValue(element: ReactTestInstance): AccessibilityValue
 }
 
 export function computeAccessibleName(element: ReactTestInstance): string | undefined {
-  const label = computeAriaLabel(element);
-  if (label) {
-    return label;
-  }
-
-  const labelElementId = computeAriaLabelledBy(element);
-  if (labelElementId) {
-    const rootElement = getUnsafeRootElement(element);
-    const labelElement = rootElement?.findByProps({ nativeID: labelElementId });
-    if (labelElement) {
-      return getTextContent(labelElement);
-    }
-  }
-
-  return getTextContent(element);
+  return computeAriaLabel(element) ?? getTextContent(element);
 }
 
 type RoleSupportMap = Partial<Record<Role | AccessibilityRole, true>>;

src/helpers/component-tree.ts

@@ -13,7 +13,7 @@ export function isHostElement(element?: ReactTestInstance | null): element is Ho
   return typeof element?.type === 'string';
 }
 
-export function isElementMounted(element: ReactTestInstance | null) {
+export function isElementMounted(element: ReactTestInstance) {
   return getUnsafeRootElement(element) === screen.UNSAFE_root;
 }
 
@@ -91,11 +91,7 @@ export function getHostSiblings(element: ReactTestInstance | null): HostTestInst
  * @param element The element start traversing from.
  * @returns The root element of the tree (host or composite).
  */
-export function getUnsafeRootElement(element: ReactTestInstance | null) {
-  if (element == null) {
-    return null;
-  }
-
+export function getUnsafeRootElement(element: ReactTestInstance) {
   let current = element;
   while (current.parent) {
     current = current.parent;

src/helpers/matchers/match-label-text.ts

@@ -1,43 +1,11 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { matches, TextMatch, TextMatchOptions } from '../../matches';
-import { computeAriaLabel, computeAriaLabelledBy } from '../accessibility';
-import { findAll } from '../find-all';
-import { matchTextContent } from './match-text-content';
+import { computeAriaLabel } from '../accessibility';
 
-export function matchLabelText(
-  root: ReactTestInstance,
-  element: ReactTestInstance,
-  expectedText: TextMatch,
-  options: TextMatchOptions = {},
-) {
-  return (
-    matchAccessibilityLabel(element, expectedText, options) ||
-    matchAccessibilityLabelledBy(root, computeAriaLabelledBy(element), expectedText, options)
-  );
-}
-
-function matchAccessibilityLabel(
+export function matchAccessibilityLabel(
   element: ReactTestInstance,
   expectedLabel: TextMatch,
-  options: TextMatchOptions,
+  options?: TextMatchOptions,
 ) {
-  return matches(expectedLabel, computeAriaLabel(element), options.normalizer, options.exact);
-}
-
-function matchAccessibilityLabelledBy(
-  root: ReactTestInstance,
-  nativeId: string | undefined,
-  text: TextMatch,
-  options: TextMatchOptions,
-) {
-  if (!nativeId) {
-    return false;
-  }
-
-  return (
-    findAll(
-      root,
-      (node) => node.props.nativeID === nativeId && matchTextContent(node, text, options),
-    ).length > 0
-  );
+  return matches(expectedLabel, computeAriaLabel(element), options?.normalizer, options?.exact);
 }

src/queries/label-text.ts

@@ -1,7 +1,7 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { findAll } from '../helpers/find-all';
 import { TextMatch, TextMatchOptions } from '../matches';
-import { matchLabelText } from '../helpers/matchers/match-label-text';
+import { matchAccessibilityLabel } from '../helpers/matchers/match-label-text';
 import { makeQueries } from './make-queries';
 import type {
   FindAllByQuery,
@@ -19,7 +19,7 @@ function queryAllByLabelText(instance: ReactTestInstance) {
   return (text: TextMatch, queryOptions?: ByLabelTextOptions) => {
     return findAll(
       instance,
-      (node) => matchLabelText(instance, node, text, queryOptions),
+      (node) => matchAccessibilityLabel(node, text, queryOptions),
       queryOptions,
     );
   };