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(
+ <>
+
+
+
+
+
+
+
+
+ >
+ );
+
+ 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.