Skip to content

Commit

Permalink
RFC/feat: default accessibility roles (#1490)
Browse files Browse the repository at this point in the history
* feat: default accessibility roles

* chore: remove default text input role

* chore: update tests

* chore: update docs
  • Loading branch information
mdjastrzebski committed Nov 27, 2023
1 parent ab679c9 commit a3489b3
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 6 deletions.
32 changes: 26 additions & 6 deletions src/helpers/accessiblity.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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<ReactTestInstance, boolean>;
Expand Down Expand Up @@ -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) {
Expand Down
16 changes: 16 additions & 0 deletions src/queries/__tests__/role.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
TouchableOpacity,
TouchableWithoutFeedback,
Text,
TextInput,
View,
Pressable,
Button as RNButton,
Expand Down Expand Up @@ -110,6 +111,21 @@ test('supports role prop', () => {
expect(screen.getByRole('button')).toBeTruthy();
});

test('supports default View component "none" role', () => {
const screen = render(<View testID="view" accessible />);
expect(screen.getByRole('none').props.testID).toBe('view');
});

test('supports default Text component "text" role', () => {
const screen = render(<Text testID="text" />);
expect(screen.getByRole('text').props.testID).toBe('text');
});

test('supports default TextInput component "none" role', () => {
const screen = render(<TextInput testID="text-input" />);
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(
Expand Down

0 comments on commit a3489b3

Please sign in to comment.