refactor: a11y label helpers

Author: mdjastrzebski

src/helpers/accessibility.ts

@@ -169,6 +169,15 @@ 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 = rootElement?.findByProps({ nativeID: labelElementId });
+    if (labelElement) {
+      return getTextContent(labelElement);
+    }
+  }
+
   const explicitLabel = element.props['aria-label'] ?? element.props.accessibilityLabel;
   if (explicitLabel) {
     return explicitLabel;
@@ -182,10 +191,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;
@@ -245,21 +250,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/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,
     );
   };