Improve readability of byRole function and udpate docs for default accessibilityState

Author: AugustinLF

src/queries/role.ts

@@ -17,7 +17,7 @@ type ByRoleOptions = {
   name?: TextMatch;
 } & AccessibilityState;
 
-type AccessibilityStateField = keyof AccessibilityState;
+type AccessibilityStateKey = keyof AccessibilityState;
 
 const matchAccessibleNameIfNeeded = (
   node: ReactTestInstance,
@@ -33,7 +33,7 @@ const matchAccessibleNameIfNeeded = (
 
 // disabled:undefined is equivalent to disabled:false, same for selected. busy not, but it makes
 // sense from a testing/voice-over perspective. checked and expanded do behave differently
-const implicityFalseState: AccessibilityStateField[] = [
+const implicityFalseState: AccessibilityStateKey[] = [
   'disabled',
   'selected',
   'busy',
@@ -60,7 +60,7 @@ const matchAccessibleStateIfNeeded = (
     }
   });
 
-const accessibilityStates: AccessibilityStateField[] = [
+const accessibilityStates: AccessibilityStateKey[] = [
   'disabled',
   'selected',
   'checked',
@@ -72,20 +72,15 @@ const queryAllByRole = (
   instance: ReactTestInstance
 ): ((role: TextMatch, options?: ByRoleOptions) => Array<ReactTestInstance>) =>
   function queryAllByRoleFn(role, options) {
-    return instance.findAll((node) => {
-      // run the cheapest checks first, and early exit too avoid unneeded computations
-      const matchRole =
-        typeof node.type === 'string' &&
-        matchStringProp(node.props.accessibilityRole, role);
-
-      if (!matchRole) return false;
-
-      if (!matchAccessibleStateIfNeeded(node, options)) {
-        return false;
-      }
+    return instance.findAll(
+      (node) =>
+        // run the cheapest checks first, and early exit too avoid unneeded computations
 
-      return matchAccessibleNameIfNeeded(node, options?.name);
-    });
+        typeof node.type === 'string' &&
+        matchStringProp(node.props.accessibilityRole, role) &&
+        matchAccessibleStateIfNeeded(node, options) &&
+        matchAccessibleNameIfNeeded(node, options?.name)
+    );
   };
 
 const buildErrorMessage = (role: TextMatch, options: ByRoleOptions = {}) => {

website/docs/Queries.md

@@ -255,13 +255,13 @@ const element = screen.getByRole('button');
 
 `name`: Finds an element with given `accessibilityRole` and an accessible name (equivalent to `byText` or `byLabelText` query).
 
-`disabled`: You can filter elements by their disabled state. The possible values are `true` or `false`. See [React Native's accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) docs to learn more about the `disabled` state.
+`disabled`: You can filter elements by their disabled state. The possible values are `true` or `false`. Querying `disabled: false` will also query elements with `disabled: undefined` (see the [wiki](https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State) for more details). See [React Native's accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) docs to learn more about the `disabled` state.
 
-`selected`: You can filter elements by their selected state. The possible values are `true` or `false`. See [React Native's accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) docs to learn more about the `selected` state.
+`selected`: You can filter elements by their selected state. The possible values are `true` or `false`. Querying `selected: false` will also query elements with `selected: undefined` (see the [wiki](https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State) for more details). See [React Native's accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) docs to learn more about the `selected` state.
 
 `checked`: You can filter elements by their checked state. The possible values are `true`, `false`, or `"mixed"`. See [React Native's accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) docs to learn more about the `checked` state.
 
-`busy`: You can filter elements by their busy state. The possible values are `true` or `false`. See [React Native's accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) docs to learn more about the `busy` state.
+`busy`: You can filter elements by their busy state. The possible values are `true` or `false`. Querying `busy: false` will also query elements with `busy: undefined` (see the [wiki](https://github.com/callstack/react-native-testing-library/wiki/Accessibility:-State) for more details). See [React Native's accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) docs to learn more about the `busy` state.
 
 `expanded`: You can filter elements by their expanded state. The possible values are `true` or `false`. See [React Native's accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) docs to learn more about the `expanded` state.