From 6dff5aa05fbfd2b45ee7335c155e28ea89569369 Mon Sep 17 00:00:00 2001
From: Maciej Jastrzebski <mdjastrzebski@gmail.com>
Date: Mon, 28 Aug 2023 20:44:34 +0200
Subject: [PATCH] feat: support role prop

---
 src/helpers/accessiblity.ts         |  4 ++++
 src/helpers/format-default.ts       |  1 +
 src/queries/__tests__/role.test.tsx | 24 ++++++++++++++++++++++++
 src/queries/role.ts                 |  3 ++-
 website/docs/Queries.md             |  8 ++++----
 5 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/helpers/accessiblity.ts b/src/helpers/accessiblity.ts
index 9e50a8832..e6b354e8f 100644
--- a/src/helpers/accessiblity.ts
+++ b/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;
+}
diff --git a/src/helpers/format-default.ts b/src/helpers/format-default.ts
index 79880f952..d77993dc3 100644
--- a/src/helpers/format-default.ts
+++ b/src/helpers/format-default.ts
@@ -11,6 +11,7 @@ const propsToDisplay = [
   'accessibilityLabel',
   'accessibilityLabelledBy',
   'accessibilityHint',
+  'role',
   'aria-hidden',
   'placeholder',
   'value',
diff --git a/src/queries/__tests__/role.test.tsx b/src/queries/__tests__/role.test.tsx
index c3fe8e2b2..590532167 100644
--- a/src/queries/__tests__/role.test.tsx
+++ b/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(
diff --git a/src/queries/role.ts b/src/queries/role.ts
index 8f45508f0..8285f1cec 100644
--- a/src/queries/role.ts
+++ b/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),
diff --git a/website/docs/Queries.md b/website/docs/Queries.md
index 62e93e01c..c66895669 100644
--- a/website/docs/Queries.md
+++ b/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.