feat: support role prop (#1476)

Author: mdjastrzebski

src/helpers/accessiblity.ts

@@ -111,3 +111,7 @@ export function isAccessibilityElement(
     element?.type === hostComponentNames?.switch
   );
 }
+
+export function getAccessibilityRole(element: ReactTestInstance) {
+  return element.props.role ?? element.props.accessibilityRole;
+}

src/helpers/format-default.ts

@@ -11,6 +11,7 @@ const propsToDisplay = [
   'accessibilityLabel',
   'accessibilityLabelledBy',
   'accessibilityHint',
+  'role',
   'aria-hidden',
   'placeholder',
   'value',

src/queries/__tests__/role.test.tsx

@@ -86,6 +86,30 @@ test('getAllByRole, queryAllByRole, findAllByRole', async () => {
   );
 });
 
+test('supports role prop', () => {
+  const screen = render(
+    <>
+      <View accessible role="checkbox" />
+      <View accessible role="radio" />
+      <View accessible role="switch" />
+      <View accessible role="tab" />
+      <Text role="alert" />
+      <Text role="heading" />
+      <Text role="searchbox" />
+      <Pressable role="button" />
+    </>
+  );
+
+  expect(screen.getByRole('checkbox')).toBeTruthy();
+  expect(screen.getByRole('radio')).toBeTruthy();
+  expect(screen.getByRole('switch')).toBeTruthy();
+  expect(screen.getByRole('tab')).toBeTruthy();
+  expect(screen.getByRole('alert')).toBeTruthy();
+  expect(screen.getByRole('heading')).toBeTruthy();
+  expect(screen.getByRole('searchbox')).toBeTruthy();
+  expect(screen.getByRole('button')).toBeTruthy();
+});
+
 describe('supports name option', () => {
   test('returns an element that has the corresponding role and a children with the name', () => {
     const { getByRole } = render(

src/queries/role.ts

@@ -2,6 +2,7 @@ import type { ReactTestInstance } from 'react-test-renderer';
 import {
   accessibilityStateKeys,
   accessiblityValueKeys,
+  getAccessibilityRole,
   isAccessibilityElement,
 } from '../helpers/accessiblity';
 import { findAll } from '../helpers/findAll';
@@ -68,7 +69,7 @@ const queryAllByRole = (
       (node) =>
         // run the cheapest checks first, and early exit to avoid unneeded computations
         isAccessibilityElement(node) &&
-        matchStringProp(node.props.accessibilityRole, role) &&
+        matchStringProp(getAccessibilityRole(node), role) &&
         matchAccessibleStateIfNeeded(node, options) &&
         matchAccessibilityValueIfNeeded(node, options?.value) &&
         matchAccessibleNameIfNeeded(node, options?.name),

website/docs/Queries.md

@@ -30,8 +30,8 @@ title: Queries
   - [Precision](#precision)
   - [Normalization](#normalization)
 - [Unit testing helpers](#unit-testing-helpers)
-  - [`UNSAFE_ByType`](#unsafe_bytype)
-  - [`UNSAFE_ByProps`](#unsafe_byprops)
+  - [`UNSAFE_ByType`](#unsafebytype)
+  - [`UNSAFE_ByProps`](#unsafebyprops)
 
 ## Variants
 
@@ -116,7 +116,7 @@ getByRole(
 ): ReactTestInstance;
 ```
 
-Returns a `ReactTestInstance` with matching `accessibilityRole` prop.
+Returns a `ReactTestInstance` with matching `role` or `accessibilityRole` prop.
 
 :::info
 In order for `*ByRole` queries to match an element it needs to be considered an accessibility element:
@@ -140,7 +140,7 @@ const element3 = screen.getByRole('button', { name: 'Hello', disabled: true });
 
 #### Options
 
-`name`: Finds an element with given `accessibilityRole` and an accessible name (equivalent to `byText` or `byLabelText` query).
+`name`: Finds an element with given `role`/`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`. Querying `disabled: false` will also match 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.