feat: option for queries to respect accessibility (#1064)

Co-authored-by: Maciej Jastrzebski <[email protected]>

Author: MattAgn

README.md

@@ -117,8 +117,8 @@ test('form submits two answers', () => {
   fireEvent.press(screen.getByText('Submit'));
 
   expect(mockFn).toBeCalledWith({
-    '1': { q: 'q1', a: 'a1' },
-    '2': { q: 'q2', a: 'a2' },
+    1: { q: 'q1', a: 'a1' },
+    2: { q: 'q2', a: 'a2' },
   });
 });
 ```
@@ -173,4 +173,4 @@ Supported and used by [Rally Health](https://www.rallyhealth.com/careers-home).
 [callstack-badge]: https://callstack.com/images/callstack-badge.svg
 [callstack]: https://callstack.com/open-source/?utm_source=github.com&utm_medium=referral&utm_campaign=react-native-testing-library&utm_term=readme
 [codecov-badge]: https://codecov.io/gh/callstack/react-native-testing-library/branch/main/graph/badge.svg?token=tYVSWro1IP
-[codecov]: https://codecov.io/gh/callstack/react-native-testing-library
+[codecov]: https://codecov.io/gh/callstack/react-native-testing-library

src/__tests__/config.test.ts

@@ -14,6 +14,7 @@ test('configure() overrides existing config values', () => {
   expect(getConfig()).toEqual({
     asyncUtilTimeout: 5000,
     defaultDebugOptions: { message: 'debug message' },
+    defaultHidden: true,
   });
 });
 

src/config.ts

@@ -4,17 +4,19 @@ export type Config = {
   /** Default timeout, in ms, for `waitFor` and `findBy*` queries. */
   asyncUtilTimeout: number;
 
+  /** Default hidden value for all queries */
+  defaultHidden: boolean;
+
   /** Default options for `debug` helper. */
   defaultDebugOptions?: Partial<DebugOptions>;
 };
 
 const defaultConfig: Config = {
   asyncUtilTimeout: 1000,
+  defaultHidden: true,
 };
 
-let config = {
-  ...defaultConfig,
-};
+let config = { ...defaultConfig };
 
 export function configure(options: Partial<Config>) {
   config = {
@@ -24,7 +26,7 @@ export function configure(options: Partial<Config>) {
 }
 
 export function resetToDefaults() {
-  config = defaultConfig;
+  config = { ...defaultConfig };
 }
 
 export function getConfig() {

src/helpers/accessiblity.ts

@@ -2,6 +2,10 @@ import { AccessibilityState, StyleSheet } from 'react-native';
 import { ReactTestInstance } from 'react-test-renderer';
 import { getHostSiblings } from './component-tree';
 
+type IsInaccessibleOptions = {
+  cache?: WeakMap<ReactTestInstance, boolean>;
+};
+
 export type AccessibilityStateKey = keyof AccessibilityState;
 
 export const accessibilityStateKeys: AccessibilityStateKey[] = [
@@ -12,14 +16,24 @@ export const accessibilityStateKeys: AccessibilityStateKey[] = [
   'expanded',
 ];
 
-export function isInaccessible(element: ReactTestInstance | null): boolean {
+export function isInaccessible(
+  element: ReactTestInstance | null,
+  { cache }: IsInaccessibleOptions = {}
+): boolean {
   if (element == null) {
     return true;
   }
 
   let current: ReactTestInstance | null = element;
   while (current) {
-    if (isSubtreeInaccessible(current)) {
+    let isCurrentSubtreeInaccessible = cache?.get(current);
+
+    if (isCurrentSubtreeInaccessible === undefined) {
+      isCurrentSubtreeInaccessible = isSubtreeInaccessible(current);
+      cache?.set(current, isCurrentSubtreeInaccessible);
+    }
+
+    if (isCurrentSubtreeInaccessible) {
       return true;
     }
 
@@ -29,7 +43,9 @@ export function isInaccessible(element: ReactTestInstance | null): boolean {
   return false;
 }
 
-function isSubtreeInaccessible(element: ReactTestInstance | null): boolean {
+export function isSubtreeInaccessible(
+  element: ReactTestInstance | null
+): boolean {
   if (element == null) {
     return true;
   }
@@ -46,7 +62,7 @@ function isSubtreeInaccessible(element: ReactTestInstance | null): boolean {
     return true;
   }
 
-  // Note that `opacity: 0` is not threated as inassessible on iOS
+  // Note that `opacity: 0` is not treated as inaccessible on iOS
   const flatStyle = StyleSheet.flatten(element.props.style) ?? {};
   if (flatStyle.display === 'none') return true;
 

src/helpers/findAll.ts

@@ -0,0 +1,23 @@
+import { ReactTestInstance } from 'react-test-renderer';
+import { getConfig } from '../config';
+import { isInaccessible } from './accessiblity';
+
+interface FindAllOptions {
+  hidden?: boolean;
+}
+
+export function findAll(
+  root: ReactTestInstance,
+  predicate: (node: ReactTestInstance) => boolean,
+  options?: FindAllOptions
+) {
+  const results = root.findAll(predicate);
+
+  const hidden = options?.hidden ?? getConfig().defaultHidden;
+  if (hidden) {
+    return results;
+  }
+
+  const cache = new WeakMap<ReactTestInstance>();
+  return results.filter((element) => !isInaccessible(element, { cache }));
+}

src/queries/__tests__/a11yState.test.tsx

@@ -226,3 +226,22 @@ test('*ByA11yState on TouchableOpacity with "disabled" prop', () => {
   expect(view.getByA11yState({ disabled: true })).toBeTruthy();
   expect(view.queryByA11yState({ disabled: false })).toBeFalsy();
 });
+
+test('byA11yState queries support hidden option', () => {
+  const { getByA11yState, queryByA11yState } = render(
+    <Pressable
+      accessibilityState={{ expanded: false }}
+      style={{ display: 'none' }}
+    >
+      <Text>Hidden from accessibility</Text>
+    </Pressable>
+  );
+
+  expect(getByA11yState({ expanded: false })).toBeTruthy();
+  expect(getByA11yState({ expanded: false }, { hidden: true })).toBeTruthy();
+
+  expect(queryByA11yState({ expanded: false }, { hidden: false })).toBeFalsy();
+  expect(() =>
+    getByA11yState({ expanded: false }, { hidden: false })
+  ).toThrow();
+});

src/queries/__tests__/a11yValue.test.tsx

@@ -92,3 +92,17 @@ test('getAllByA11yValue, queryAllByA11yValue, findAllByA11yValue', async () => {
   );
   await expect(findAllByA11yValue({ max: 60 })).resolves.toHaveLength(2);
 });
+
+test('byA11yValue queries support hidden option', () => {
+  const { getByA11yValue, queryByA11yValue } = render(
+    <Text accessibilityValue={{ max: 10 }} style={{ display: 'none' }}>
+      Hidden from accessibility
+    </Text>
+  );
+
+  expect(getByA11yValue({ max: 10 })).toBeTruthy();
+  expect(getByA11yValue({ max: 10 }, { hidden: true })).toBeTruthy();
+
+  expect(queryByA11yValue({ max: 10 }, { hidden: false })).toBeFalsy();
+  expect(() => getByA11yValue({ max: 10 }, { hidden: false })).toThrow();
+});

src/queries/__tests__/displayValue.test.tsx

@@ -99,3 +99,15 @@ test('findBy queries work asynchronously', async () => {
   await expect(findByDisplayValue('Display Value')).resolves.toBeTruthy();
   await expect(findAllByDisplayValue('Display Value')).resolves.toHaveLength(1);
 }, 20000);
+
+test('byDisplayValue queries support hidden option', () => {
+  const { getByDisplayValue, queryByDisplayValue } = render(
+    <TextInput value="hidden" style={{ display: 'none' }} />
+  );
+
+  expect(getByDisplayValue('hidden')).toBeTruthy();
+  expect(getByDisplayValue('hidden', { hidden: true })).toBeTruthy();
+
+  expect(queryByDisplayValue('hidden', { hidden: false })).toBeFalsy();
+  expect(() => getByDisplayValue('hidden', { hidden: false })).toThrow();
+});

src/queries/__tests__/hintText.test.tsx

@@ -106,3 +106,17 @@ test('getByHintText, getByHintText and exact = true', () => {
   expect(queryByHintText('id', { exact: true })).toBeNull();
   expect(getAllByHintText('test', { exact: true })).toHaveLength(1);
 });
+
+test('byHintText queries support hidden option', () => {
+  const { getByHintText, queryByHintText } = render(
+    <Text accessibilityHint="hidden" style={{ display: 'none' }}>
+      Hidden from accessiblity
+    </Text>
+  );
+
+  expect(getByHintText('hidden')).toBeTruthy();
+  expect(getByHintText('hidden', { hidden: true })).toBeTruthy();
+
+  expect(queryByHintText('hidden', { hidden: false })).toBeFalsy();
+  expect(() => getByHintText('hidden', { hidden: false })).toThrow();
+});

src/queries/__tests__/labelText.test.tsx

@@ -143,3 +143,17 @@ describe('findBy options deprecations', () => {
     );
   }, 20000);
 });
+
+test('byLabelText queries support hidden option', () => {
+  const { getByLabelText, queryByLabelText } = render(
+    <Text accessibilityLabel="hidden" style={{ display: 'none' }}>
+      Hidden from accessibility
+    </Text>
+  );
+
+  expect(getByLabelText('hidden')).toBeTruthy();
+  expect(getByLabelText('hidden', { hidden: true })).toBeTruthy();
+
+  expect(queryByLabelText('hidden', { hidden: false })).toBeFalsy();
+  expect(() => getByLabelText('hidden', { hidden: false })).toThrow();
+});