diff --git a/src/helpers/__tests__/format-default.tsx b/src/helpers/__tests__/format-default.test.tsx similarity index 97% rename from src/helpers/__tests__/format-default.tsx rename to src/helpers/__tests__/format-default.test.tsx index 21d8e979b..315db2e16 100644 --- a/src/helpers/__tests__/format-default.tsx +++ b/src/helpers/__tests__/format-default.test.tsx @@ -20,6 +20,8 @@ describe('mapPropsForQueryError', () => { accessibilityLabelledBy: 'LABELLED_BY', accessibilityRole: 'ROLE', accessibilityHint: 'HINT', + 'aria-label': 'ARIA_LABEL', + 'aria-labelledby': 'ARIA_LABELLED_BY', placeholder: 'PLACEHOLDER', value: 'VALUE', defaultValue: 'DEFAULT_VALUE', diff --git a/src/helpers/accessiblity.ts b/src/helpers/accessiblity.ts index e6b354e8f..631c16500 100644 --- a/src/helpers/accessiblity.ts +++ b/src/helpers/accessiblity.ts @@ -115,3 +115,17 @@ export function isAccessibilityElement( export function getAccessibilityRole(element: ReactTestInstance) { return element.props.role ?? element.props.accessibilityRole; } + +export function getAccessibilityLabel( + element: ReactTestInstance +): string | undefined { + return element.props['aria-label'] ?? element.props.accessibilityLabel; +} + +export function getAccessibilityLabelledBy( + element: ReactTestInstance +): string | undefined { + return ( + element.props['aria-labelledby'] ?? element.props.accessibilityLabelledBy + ); +} diff --git a/src/helpers/format-default.ts b/src/helpers/format-default.ts index d77993dc3..fb1fcb62f 100644 --- a/src/helpers/format-default.ts +++ b/src/helpers/format-default.ts @@ -2,21 +2,23 @@ import { StyleSheet, ViewStyle } from 'react-native'; import { MapPropsFunction } from './format'; const propsToDisplay = [ - 'testID', - 'nativeID', 'accessibilityElementsHidden', - 'accessibilityViewIsModal', - 'importantForAccessibility', - 'accessibilityRole', + 'accessibilityHint', 'accessibilityLabel', 'accessibilityLabelledBy', - 'accessibilityHint', - 'role', + 'accessibilityRole', + 'accessibilityViewIsModal', 'aria-hidden', - 'placeholder', - 'value', + 'aria-label', + 'aria-labelledby', 'defaultValue', + 'importantForAccessibility', + 'nativeID', + 'placeholder', + 'role', + 'testID', 'title', + 'value', ]; /** diff --git a/src/helpers/matchers/matchLabelText.ts b/src/helpers/matchers/matchLabelText.ts index 19c21669c..5bf5caa62 100644 --- a/src/helpers/matchers/matchLabelText.ts +++ b/src/helpers/matchers/matchLabelText.ts @@ -1,20 +1,24 @@ import { ReactTestInstance } from 'react-test-renderer'; import { matches, TextMatch, TextMatchOptions } from '../../matches'; +import { + getAccessibilityLabel, + getAccessibilityLabelledBy, +} from '../accessiblity'; import { findAll } from '../findAll'; import { matchTextContent } from './matchTextContent'; export function matchLabelText( root: ReactTestInstance, element: ReactTestInstance, - text: TextMatch, + expectedText: TextMatch, options: TextMatchOptions = {} ) { return ( - matchAccessibilityLabel(element, text, options) || + matchAccessibilityLabel(element, expectedText, options) || matchAccessibilityLabelledBy( root, - element.props.accessibilityLabelledBy, - text, + getAccessibilityLabelledBy(element), + expectedText, options ) ); @@ -22,11 +26,15 @@ export function matchLabelText( function matchAccessibilityLabel( element: ReactTestInstance, - text: TextMatch, + extpectedLabel: TextMatch, options: TextMatchOptions ) { - const { exact, normalizer } = options; - return matches(text, element.props.accessibilityLabel, normalizer, exact); + return matches( + extpectedLabel, + getAccessibilityLabel(element), + options.normalizer, + options.exact + ); } function matchAccessibilityLabelledBy( diff --git a/src/matches.ts b/src/matches.ts index a2c22225a..ed9985986 100644 --- a/src/matches.ts +++ b/src/matches.ts @@ -8,7 +8,7 @@ export type TextMatchOptions = { export function matches( matcher: TextMatch, - text: string, + text: string | undefined, normalizer: NormalizerFn = getDefaultNormalizer(), exact: boolean = true ): boolean { diff --git a/src/queries/__tests__/labelText.test.tsx b/src/queries/__tests__/labelText.test.tsx index 694d982cf..9af9215d1 100644 --- a/src/queries/__tests__/labelText.test.tsx +++ b/src/queries/__tests__/labelText.test.tsx @@ -10,11 +10,11 @@ const TEXT_HINT = 'static text'; const NO_MATCHES_TEXT: any = 'not-existent-element'; const getMultipleInstancesFoundMessage = (value: string) => { - return `Found multiple elements with accessibilityLabel: ${value}`; + return `Found multiple elements with accessibility label: ${value}`; }; const getNoInstancesFoundMessage = (value: string) => { - return `Unable to find an element with accessibilityLabel: ${value}`; + return `Unable to find an element with accessibility label: ${value}`; }; const Typography = ({ children, ...rest }: any) => { @@ -161,7 +161,7 @@ test('byLabelText queries support hidden option', () => { ).toBeFalsy(); expect(() => getByLabelText('hidden', { includeHiddenElements: false })) .toThrowErrorMatchingInlineSnapshot(` - "Unable to find an element with accessibilityLabel: hidden + "Unable to find an element with accessibility label: hidden