refactor: tweaks

Author: mdjastrzebski

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, isHostSwitch, isHostText } from './host-component-names';
 import { getTextContent } from './text-content';
+import { isTextInputEditable } from './text-input';
 
 type IsInaccessibleOptions = {
   cache?: WeakMap<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,45 +135,30 @@ 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 computeAccessibilityState(element: ReactTestInstance): AccessibilityState {
-  const busy = computeA11yBusy(element);
-  const checked = computeA11yChecked(element);
-  const disabled = computeA11Disabled(element);
-  const expanded = computeA11yExpanded(element);
-  const selected = computeA11ySelected(element);
-
-  return {
-    busy,
-    checked,
-    disabled,
-    expanded,
-    selected,
-  };
-}
-
-export function computeA11yBusy(element: ReactTestInstance): AccessibilityState['busy'] {
-  const props = element.props;
-  return props['aria-busy'] ?? props.accessibilityState?.busy;
+// 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;
 }
 
-export function computeA11yChecked(element: ReactTestInstance): AccessibilityState['checked'] {
+// See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#checked-state
+export function computeAriaChecked(element: ReactTestInstance): AccessibilityState['checked'] {
   if (isHostSwitch(element)) {
     return element.props.value;
   }
 
-  const role = getAccessibilityRole(element);
+  const role = getRole(element);
   if (role !== 'checkbox' && role !== 'radio') {
     return undefined;
   }
@@ -175,22 +167,27 @@ export function computeA11yChecked(element: ReactTestInstance): AccessibilitySta
   return props['aria-checked'] ?? props.accessibilityState?.checked;
 }
 
-export function computeA11Disabled(element: ReactTestInstance): AccessibilityState['disabled'] {
-  const props = element.props;
-  return props['aria-disabled'] ?? props.accessibilityState?.disabled;
+// See: https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State#disabled-state
+export function computeAriaDisabled(element: ReactTestInstance): boolean {
+  if (isHostSwitch(element)) {
+    return !isTextInputEditable(element);
+  }
+
+  const { props } = element;
+  return props['aria-disabled'] ?? props.accessibilityState?.disabled ?? false;
 }
 
-export function computeA11yExpanded(element: ReactTestInstance): AccessibilityState['expanded'] {
-  const props = element.props;
+// 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 computeA11ySelected(element: ReactTestInstance): AccessibilityState['selected'] {
-  const props = element.props;
-  return props['aria-selected'] ?? props.accessibilityState?.selected;
+// 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 computeAccessibilityValue(element: ReactTestInstance): AccessibilityValue {
+export function computeAriaValue(element: ReactTestInstance): AccessibilityValue {
   const {
     accessibilityValue,
     'aria-valuemax': ariaValueMax,
@@ -208,12 +205,12 @@ export function computeAccessibilityValue(element: ReactTestInstance): Accessibi
 }
 
 export function computeAccessibleName(element: ReactTestInstance): string | undefined {
-  const label = getAccessibilityLabel(element);
+  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/matchers/match-accessibility-state.ts

@@ -1,6 +1,11 @@
-import { AccessibilityState } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
-import { accessibilityStateKeys, computeAccessibilityState } 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 = computeAccessibilityState(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 { computeAccessibilityValue } 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 = computeAccessibilityValue(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/index.ts

@@ -1,9 +1,8 @@
 export { toBeBusy } from './to-be-busy';
 export { toBeChecked } from './to-be-checked';
-export { toBeCollapsed } from './to-be-collapsed';
 export { toBeDisabled, toBeEnabled } from './to-be-disabled';
 export { toBeEmptyElement } from './to-be-empty-element';
-export { toBeExpanded } from './to-be-expanded';
+export { toBeExpanded, toBeCollapsed } from './to-be-expanded';
 export { toBeOnTheScreen } from './to-be-on-the-screen';
 export { toBePartiallyChecked } from './to-be-partially-checked';
 export { toBeSelected } from './to-be-selected';

src/matchers/to-be-busy.tsx

@@ -1,13 +1,13 @@
 import { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
-import { computeA11yBusy } from '../helpers/accessibility';
+import { computeAriaBusy } from '../helpers/accessibility';
 import { checkHostElement, formatElement } from './utils';
 
 export function toBeBusy(this: jest.MatcherContext, element: ReactTestInstance) {
   checkHostElement(element, toBeBusy, this);
 
   return {
-    pass: computeA11yBusy(element) === true,
+    pass: computeAriaBusy(element),
     message: () => {
       const matcher = matcherHint(`${this.isNot ? '.not' : ''}.toBeBusy`, 'element', '');
       return [

src/matchers/to-be-checked.tsx

@@ -1,10 +1,6 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
-import {
-  getAccessibilityRole,
-  isAccessibilityElement,
-  computeA11yChecked,
-} from '../helpers/accessibility';
+import { getRole, isAccessibilityElement, computeAriaChecked } from '../helpers/accessibility';
 import { ErrorWithStack } from '../helpers/errors';
 import { isHostSwitch } from '../helpers/host-component-names';
 import { checkHostElement, formatElement } from './utils';
@@ -20,7 +16,7 @@ export function toBeChecked(this: jest.MatcherContext, element: ReactTestInstanc
   }
 
   return {
-    pass: computeA11yChecked(element) === true,
+    pass: computeAriaChecked(element) === true,
     message: () => {
       const is = this.isNot ? 'is' : 'is not';
       return [
@@ -38,6 +34,6 @@ function isSupportedAccessibilityElement(element: ReactTestInstance) {
     return false;
   }
 
-  const role = getAccessibilityRole(element);
+  const role = getRole(element);
   return role === 'checkbox' || role === 'radio';
 }

src/matchers/to-be-collapsed.tsx

@@ -1,14 +1,13 @@
 import type { ReactTestInstance } from 'react-test-renderer';
 import { matcherHint } from 'jest-matcher-utils';
-import { isHostTextInput } from '../helpers/host-component-names';
-import { isTextInputEditable } from '../helpers/text-input';
+import { computeAriaDisabled } from '../helpers/accessibility';
 import { getHostParent } from '../helpers/component-tree';
 import { checkHostElement, formatElement } from './utils';
 
 export function toBeDisabled(this: jest.MatcherContext, element: ReactTestInstance) {
   checkHostElement(element, toBeDisabled, this);
 
-  const isDisabled = isElementDisabled(element) || isAncestorDisabled(element);
+  const isDisabled = computeAriaDisabled(element) || isAncestorDisabled(element);
 
   return {
     pass: isDisabled,
@@ -27,7 +26,7 @@ export function toBeDisabled(this: jest.MatcherContext, element: ReactTestInstan
 export function toBeEnabled(this: jest.MatcherContext, element: ReactTestInstance) {
   checkHostElement(element, toBeEnabled, this);
 
-  const isEnabled = !isElementDisabled(element) && !isAncestorDisabled(element);
+  const isEnabled = !computeAriaDisabled(element) && !isAncestorDisabled(element);
 
   return {
     pass: isEnabled,
@@ -43,20 +42,11 @@ export function toBeEnabled(this: jest.MatcherContext, element: ReactTestInstanc
   };
 }
 
-function isElementDisabled(element: ReactTestInstance) {
-  if (isHostTextInput(element) && !isTextInputEditable(element)) {
-    return true;
-  }
-
-  const { accessibilityState, 'aria-disabled': ariaDisabled } = element.props;
-  return ariaDisabled ?? accessibilityState?.disabled ?? false;
-}
-
 function isAncestorDisabled(element: ReactTestInstance): boolean {
   const parent = getHostParent(element);
   if (parent == null) {
     return false;
   }
 
-  return isElementDisabled(parent) || isAncestorDisabled(parent);
+  return computeAriaDisabled(parent) || isAncestorDisabled(parent);
 }