diff --git a/src/helpers/accessiblity.ts b/src/helpers/accessiblity.ts index aed19ced6..fa1d7dbf3 100644 --- a/src/helpers/accessiblity.ts +++ b/src/helpers/accessiblity.ts @@ -4,9 +4,9 @@ import { StyleSheet, } from 'react-native'; import { ReactTestInstance } from 'react-test-renderer'; -import { getTextContent } from './text-content'; import { getHostSiblings, getUnsafeRootElement } from './component-tree'; -import { getHostComponentNames } from './host-component-names'; +import { getHostComponentNames, isHostText } from './host-component-names'; +import { getTextContent } from './text-content'; type IsInaccessibleOptions = { cache?: WeakMap; @@ -113,10 +113,30 @@ export function isAccessibilityElement( ); } -export function getAccessibilityRole( - element: ReactTestInstance -): string | undefined { - return element.props.role ?? element.props.accessibilityRole; +/** + * Returns the accessibility role for given element. It will return explicit + * role from either `role` or `accessibilityRole` props if set. + * + * If explicit role is not available, it would try to return default element + * role: + * - `text` for `Text` elements + * + * In all other cases this functions returns `none`. + * + * @param element + * @returns + */ +export function getAccessibilityRole(element: ReactTestInstance) { + const explicitRole = element.props.role ?? element.props.accessibilityRole; + if (explicitRole) { + return explicitRole; + } + + if (isHostText(element)) { + return 'text'; + } + + return 'none'; } export function getAccessibilityViewIsModal(element: ReactTestInstance) { diff --git a/src/queries/__tests__/role.test.tsx b/src/queries/__tests__/role.test.tsx index 4782e6a5c..b24c6a6d6 100644 --- a/src/queries/__tests__/role.test.tsx +++ b/src/queries/__tests__/role.test.tsx @@ -3,6 +3,7 @@ import { TouchableOpacity, TouchableWithoutFeedback, Text, + TextInput, View, Pressable, Button as RNButton, @@ -110,6 +111,21 @@ test('supports role prop', () => { expect(screen.getByRole('button')).toBeTruthy(); }); +test('supports default View component "none" role', () => { + const screen = render(); + expect(screen.getByRole('none').props.testID).toBe('view'); +}); + +test('supports default Text component "text" role', () => { + const screen = render(); + expect(screen.getByRole('text').props.testID).toBe('text'); +}); + +test('supports default TextInput component "none" role', () => { + const screen = render(); + expect(screen.getByRole('none').props.testID).toBe('text-input'); +}); + describe('supports name option', () => { test('returns an element that has the corresponding role and a children with the name', () => { const { getByRole } = render(