refactor: accessibility handling (#1658)

* refactor: improve code structure

* refactor: more tweaks

Author: mdjastrzebski

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["Pressable", "RNTL", "Uncapitalize"]
+  "cSpell.words": ["labelledby", "Pressable", "RNTL", "Uncapitalize", "valuenow", "valuetext"]
 }

src/helpers/accessibility.ts

@@ -1,8 +1,15 @@
-import { AccessibilityState, AccessibilityValue, StyleSheet } from 'react-native';
+import {
+  AccessibilityRole,
+  AccessibilityState,
+  AccessibilityValue,
+  Role,
+  StyleSheet,
+} from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
 import { getHostSiblings, getUnsafeRootElement } from './component-tree';
-import { getHostComponentNames, isHostText } from './host-component-names';
+import { getHostComponentNames, isHostText, isHostTextInput } from './host-component-names';
 import { getTextContent } from './text-content';
+import { isTextInputEditable } from './text-input';
 
 type IsInaccessibleOptions = {
   cache?: WeakMap<ReactTestInstance, boolean>;
@@ -45,7 +52,7 @@ export function isHiddenFromAccessibility(
   return false;
 }
 
-/** RTL-compatitibility alias for `isHiddenFromAccessibility` */
+/** RTL-compatibility alias for `isHiddenFromAccessibility` */
 export const isInaccessible = isHiddenFromAccessibility;
 
 function isSubtreeInaccessible(element: ReactTestInstance): boolean {
@@ -78,7 +85,7 @@ function isSubtreeInaccessible(element: ReactTestInstance): boolean {
   // iOS: accessibilityViewIsModal or aria-modal
   // See: https://reactnative.dev/docs/accessibility#accessibilityviewismodal-ios
   const hostSiblings = getHostSiblings(element);
-  if (hostSiblings.some((sibling) => getAccessibilityViewIsModal(sibling))) {
+  if (hostSiblings.some((sibling) => computeAriaModal(sibling))) {
     return true;
   }
 
@@ -115,7 +122,7 @@ export function isAccessibilityElement(element: ReactTestInstance | null): boole
  * @param element
  * @returns
  */
-export function getAccessibilityRole(element: ReactTestInstance) {
+export function getRole(element: ReactTestInstance): Role | AccessibilityRole {
   const explicitRole = element.props.role ?? element.props.accessibilityRole;
   if (explicitRole) {
     return explicitRole;
@@ -128,57 +135,55 @@ export function getAccessibilityRole(element: ReactTestInstance) {
   return 'none';
 }
 
-export function getAccessibilityViewIsModal(element: ReactTestInstance) {
+export function computeAriaModal(element: ReactTestInstance): boolean | undefined {
   return element.props['aria-modal'] ?? element.props.accessibilityViewIsModal;
 }
 
-export function getAccessibilityLabel(element: ReactTestInstance): string | undefined {
+export function computeAriaLabel(element: ReactTestInstance): string | undefined {
   return element.props['aria-label'] ?? element.props.accessibilityLabel;
 }
 
-export function getAccessibilityLabelledBy(element: ReactTestInstance): string | undefined {
+export function computeAriaLabelledBy(element: ReactTestInstance): string | undefined {
   return element.props['aria-labelledby'] ?? element.props.accessibilityLabelledBy;
 }
 
-export function getAccessibilityState(element: ReactTestInstance): AccessibilityState | undefined {
-  const {
-    accessibilityState,
-    'aria-busy': ariaBusy,
-    'aria-checked': ariaChecked,
-    'aria-disabled': ariaDisabled,
-    'aria-expanded': ariaExpanded,
-    'aria-selected': ariaSelected,
-  } = element.props;
-
-  const hasAnyAccessibilityStateProps =
-    accessibilityState != null ||
-    ariaBusy != null ||
-    ariaChecked != null ||
-    ariaDisabled != null ||
-    ariaExpanded != null ||
-    ariaSelected != null;
+// 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;
+}
 
-  if (!hasAnyAccessibilityStateProps) {
+// See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#checked-state
+export function computeAriaChecked(element: ReactTestInstance): AccessibilityState['checked'] {
+  const role = getRole(element);
+  if (role !== 'checkbox' && role !== 'radio') {
     return undefined;
   }
 
-  return {
-    busy: ariaBusy ?? accessibilityState?.busy,
-    checked: ariaChecked ?? accessibilityState?.checked,
-    disabled: ariaDisabled ?? accessibilityState?.disabled,
-    expanded: ariaExpanded ?? accessibilityState?.expanded,
-    selected: ariaSelected ?? accessibilityState?.selected,
-  };
+  const props = element.props;
+  return props['aria-checked'] ?? props.accessibilityState?.checked;
+}
+
+// See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#disabled-state
+export function computeAriaDisabled(element: ReactTestInstance): boolean {
+  if (isHostTextInput(element) && !isTextInputEditable(element)) {
+    return true;
+  }
+
+  const { props } = element;
+  return props['aria-disabled'] ?? props.accessibilityState?.disabled ?? false;
+}
+
+// See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#expanded-state
+export function computeAriaExpanded({ props }: ReactTestInstance): boolean | undefined {
+  return props['aria-expanded'] ?? props.accessibilityState?.expanded;
 }
 
-export function getAccessibilityCheckedState(
-  element: ReactTestInstance,
-): AccessibilityState['checked'] {
-  const { accessibilityState, 'aria-checked': ariaChecked } = element.props;
-  return ariaChecked ?? accessibilityState?.checked;
+// See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#selected-state
+export function computeAriaSelected({ props }: ReactTestInstance): boolean {
+  return props['aria-selected'] ?? props.accessibilityState?.selected ?? false;
 }
 
-export function getAccessibilityValue(element: ReactTestInstance): AccessibilityValue | undefined {
+export function computeAriaValue(element: ReactTestInstance): AccessibilityValue {
   const {
     accessibilityValue,
     'aria-valuemax': ariaValueMax,
@@ -187,17 +192,6 @@ export function getAccessibilityValue(element: ReactTestInstance): Accessibility
     'aria-valuetext': ariaValueText,
   } = element.props;
 
-  const hasAnyAccessibilityValueProps =
-    accessibilityValue != null ||
-    ariaValueMax != null ||
-    ariaValueMin != null ||
-    ariaValueNow != null ||
-    ariaValueText != null;
-
-  if (!hasAnyAccessibilityValueProps) {
-    return undefined;
-  }
-
   return {
     max: ariaValueMax ?? accessibilityValue?.max,
     min: ariaValueMin ?? accessibilityValue?.min,
@@ -206,39 +200,13 @@ export function getAccessibilityValue(element: ReactTestInstance): Accessibility
   };
 }
 
-export function isElementBusy(element: ReactTestInstance): NonNullable<AccessibilityState['busy']> {
-  const { accessibilityState, 'aria-busy': ariaBusy } = element.props;
-  return ariaBusy ?? accessibilityState?.busy ?? false;
-}
-
-export function isElementCollapsed(
-  element: ReactTestInstance,
-): NonNullable<AccessibilityState['expanded']> {
-  const { accessibilityState, 'aria-expanded': ariaExpanded } = element.props;
-  return (ariaExpanded ?? accessibilityState?.expanded) === false;
-}
-
-export function isElementExpanded(
-  element: ReactTestInstance,
-): NonNullable<AccessibilityState['expanded']> {
-  const { accessibilityState, 'aria-expanded': ariaExpanded } = element.props;
-  return ariaExpanded ?? accessibilityState?.expanded ?? false;
-}
-
-export function isElementSelected(
-  element: ReactTestInstance,
-): NonNullable<AccessibilityState['selected']> {
-  const { accessibilityState, 'aria-selected': ariaSelected } = element.props;
-  return ariaSelected ?? accessibilityState?.selected ?? false;
-}
-
-export function getAccessibleName(element: ReactTestInstance): string | undefined {
-  const label = getAccessibilityLabel(element);
+export function computeAccessibleName(element: ReactTestInstance): string | undefined {
+  const label = computeAriaLabel(element);
   if (label) {
     return label;
   }
 
-  const labelElementId = getAccessibilityLabelledBy(element);
+  const labelElementId = computeAriaLabelledBy(element);
   if (labelElementId) {
     const rootElement = getUnsafeRootElement(element);
     const labelElement = rootElement?.findByProps({ nativeID: labelElementId });

src/helpers/host-component-names.tsx

@@ -70,31 +70,39 @@ function getByTestId(instance: ReactTestInstance, testID: string) {
 }
 
 /**
- * Checks if the given element is a host Text.
+ * Checks if the given element is a host Text element.
  * @param element The element to check.
  */
 export function isHostText(element?: ReactTestInstance | null): element is HostTestInstance {
   return element?.type === getHostComponentNames().text;
 }
 
 /**
- * Checks if the given element is a host TextInput.
+ * Checks if the given element is a host TextInput element.
  * @param element The element to check.
  */
 export function isHostTextInput(element?: ReactTestInstance | null): element is HostTestInstance {
   return element?.type === getHostComponentNames().textInput;
 }
 
 /**
- * Checks if the given element is a host ScrollView.
+ * Checks if the given element is a host Switch element.
+ * @param element The element to check.
+ */
+export function isHostSwitch(element?: ReactTestInstance | null): element is HostTestInstance {
+  return element?.type === getHostComponentNames().switch;
+}
+
+/**
+ * Checks if the given element is a host ScrollView element.
  * @param element The element to check.
  */
 export function isHostScrollView(element?: ReactTestInstance | null): element is HostTestInstance {
   return element?.type === getHostComponentNames().scrollView;
 }
 
 /**
- * Checks if the given element is a host Modal.
+ * Checks if the given element is a host Modal element.
  * @param element The element to check.
  */
 export function isHostModal(element?: ReactTestInstance | null): element is HostTestInstance {

src/helpers/matchers/match-accessibility-state.ts

@@ -1,6 +1,11 @@
-import { AccessibilityState } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
-import { accessibilityStateKeys, getAccessibilityState } from '../accessibility';
+import {
+  computeAriaBusy,
+  computeAriaChecked,
+  computeAriaDisabled,
+  computeAriaExpanded,
+  computeAriaSelected,
+} from '../accessibility';
 
 // This type is the same as AccessibilityState from `react-native` package
 // It is re-declared here due to issues with migration from `@types/react-native` to
@@ -14,32 +19,25 @@ export interface AccessibilityStateMatcher {
   expanded?: boolean;
 }
 
-/**
- * Default accessibility state values based on experiments using accessibility
- * inspector/screen reader on iOS and Android.
- *
- * @see https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State
- */
-const defaultState: AccessibilityState = {
-  disabled: false,
-  selected: false,
-  checked: undefined,
-  busy: false,
-  expanded: undefined,
-};
-
 export function matchAccessibilityState(
   node: ReactTestInstance,
   matcher: AccessibilityStateMatcher,
 ) {
-  const state = getAccessibilityState(node);
-  return accessibilityStateKeys.every((key) => matchState(matcher, state, key));
-}
+  if (matcher.busy !== undefined && matcher.busy !== computeAriaBusy(node)) {
+    return false;
+  }
+  if (matcher.checked !== undefined && matcher.checked !== computeAriaChecked(node)) {
+    return false;
+  }
+  if (matcher.disabled !== undefined && matcher.disabled !== computeAriaDisabled(node)) {
+    return false;
+  }
+  if (matcher.expanded !== undefined && matcher.expanded !== computeAriaExpanded(node)) {
+    return false;
+  }
+  if (matcher.selected !== undefined && matcher.selected !== computeAriaSelected(node)) {
+    return false;
+  }
 
-function matchState(
-  matcher: AccessibilityStateMatcher,
-  state: AccessibilityState | undefined,
-  key: keyof AccessibilityState,
-) {
-  return matcher[key] === undefined || matcher[key] === (state?.[key] ?? defaultState[key]);
+  return true;
 }

src/helpers/matchers/match-accessibility-value.ts

@@ -1,5 +1,5 @@
 import { ReactTestInstance } from 'react-test-renderer';
-import { getAccessibilityValue } from '../accessibility';
+import { computeAriaValue } from '../accessibility';
 import { TextMatch } from '../../matches';
 import { matchStringProp } from './match-string-prop';
 
@@ -14,7 +14,7 @@ export function matchAccessibilityValue(
   node: ReactTestInstance,
   matcher: AccessibilityValueMatcher,
 ): boolean {
-  const value = getAccessibilityValue(node);
+  const value = computeAriaValue(node);
   return (
     (matcher.min === undefined || matcher.min === value?.min) &&
     (matcher.max === undefined || matcher.max === value?.max) &&

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

@@ -1,6 +1,6 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { matches, TextMatch, TextMatchOptions } from '../../matches';
-import { getAccessibilityLabel, getAccessibilityLabelledBy } from '../accessibility';
+import { computeAriaLabel, computeAriaLabelledBy } from '../accessibility';
 import { findAll } from '../find-all';
 import { matchTextContent } from './match-text-content';
 
@@ -12,7 +12,7 @@ export function matchLabelText(
 ) {
   return (
     matchAccessibilityLabel(element, expectedText, options) ||
-    matchAccessibilityLabelledBy(root, getAccessibilityLabelledBy(element), expectedText, options)
+    matchAccessibilityLabelledBy(root, computeAriaLabelledBy(element), expectedText, options)
   );
 }
 
@@ -21,7 +21,7 @@ function matchAccessibilityLabel(
   extpectedLabel: TextMatch,
   options: TextMatchOptions,
 ) {
-  return matches(extpectedLabel, getAccessibilityLabel(element), options.normalizer, options.exact);
+  return matches(extpectedLabel, computeAriaLabel(element), options.normalizer, options.exact);
 }
 
 function matchAccessibilityLabelledBy(

src/matchers/__tests__/to-be-checked.test.tsx

@@ -5,7 +5,7 @@ import { screen } from '../../screen';
 import '../extend-expect';
 
 function renderViewsWithRole(role: AccessibilityRole) {
-  return render(
+  render(
     <>
       <View
         testID={`${role}-checked`}