diff --git a/src/helpers/accessibility.ts b/src/helpers/accessibility.ts index de8fab7bf..b69ee06b9 100644 --- a/src/helpers/accessibility.ts +++ b/src/helpers/accessibility.ts @@ -153,10 +153,11 @@ export function computeAriaLabel(instance: TestInstance): string | undefined { const labelElementId = instance.props['aria-labelledby'] ?? instance.props.accessibilityLabelledBy; if (labelElementId) { + const labelElementIds = Array.isArray(labelElementId) ? labelElementId : [labelElementId]; const container = getContainerInstance(instance); const labelInstance = findAll( container, - (node) => isTestInstance(node) && node.props.nativeID === labelElementId, + (node) => isTestInstance(node) && labelElementIds.includes(node.props.nativeID), { includeHiddenElements: true }, ); if (labelInstance.length > 0) { diff --git a/src/queries/__tests__/role.test.tsx b/src/queries/__tests__/role.test.tsx index c07c4c92a..e6c120765 100644 --- a/src/queries/__tests__/role.test.tsx +++ b/src/queries/__tests__/role.test.tsx @@ -195,6 +195,40 @@ describe('supports name option', () => { expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button'); }); + test('returns an element that has the corresponding role and a matching accessibilityLabelledBy', async () => { + await render( + <> + Save + + , + ); + + // assert on the testId to be sure that the returned element is the one with the accessibilityRole + expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button'); + }); + + test('returns an element that has the corresponding role and a matching accessibilityLabelledBy array', async () => { + await render( + <> + Save + + , + ); + + // assert on the testId to be sure that the returned element is the one with the accessibilityRole + expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('target-button'); + }); + test('returns an element when the direct child is text', async () => { await render(