diff --git a/src/__tests__/react-native-api.test.tsx b/src/__tests__/react-native-api.test.tsx index 0989953a7..eac01136f 100644 --- a/src/__tests__/react-native-api.test.tsx +++ b/src/__tests__/react-native-api.test.tsx @@ -132,6 +132,150 @@ test('React Native API assumption: renders single host element', () => `); }); +test('React Native API assumption: aria-* props render on host View', () => { + const view = render( + + ); + + expect(view.toJSON()).toMatchInlineSnapshot(` + + `); +}); + +test('React Native API assumption: aria-* props render on host Text', () => { + const view = render( + + ); + + expect(view.toJSON()).toMatchInlineSnapshot(` + + `); +}); + +test('React Native API assumption: aria-* props render on host TextInput', () => { + const view = render( + + ); + + expect(view.toJSON()).toMatchInlineSnapshot(` + + `); +}); + test('ScrollView renders correctly', () => { const screen = render( diff --git a/src/helpers/__tests__/accessiblity.test.tsx b/src/helpers/__tests__/accessiblity.test.tsx index 07bcbde94..3ce035ea7 100644 --- a/src/helpers/__tests__/accessiblity.test.tsx +++ b/src/helpers/__tests__/accessiblity.test.tsx @@ -245,64 +245,50 @@ describe('isHiddenFromAccessibility', () => { ); expect( isHiddenFromAccessibility( - view.getByTestId('subject', { - includeHiddenElements: true, - }) + view.getByTestId('subject', { includeHiddenElements: true }) ) ).toBe(true); }); - test('is not triggered for element with accessibilityViewIsModal prop', () => { + test('detects siblings of element with "aria-modal" prop', () => { const view = render( - + + ); expect( isHiddenFromAccessibility( - view.getByTestId('subject', { - includeHiddenElements: true, - }) + view.getByTestId('subject', { includeHiddenElements: true }) ) - ).toBe(false); + ).toBe(true); + }); + + test('is not triggered for element with accessibilityViewIsModal prop', () => { + const view = render(); + expect(isHiddenFromAccessibility(view.getByTestId('subject'))).toBe(false); }); test('is not triggered for child of element with accessibilityViewIsModal prop', () => { const view = render( - - - - + + ); - expect( - isHiddenFromAccessibility( - view.getByTestId('subject', { - includeHiddenElements: true, - }) - ) - ).toBe(false); + expect(isHiddenFromAccessibility(view.getByTestId('subject'))).toBe(false); }); test('is not triggered for descendent of element with accessibilityViewIsModal prop', () => { const view = render( - - + + - - - + ); - expect( - isHiddenFromAccessibility( - view.getByTestId('subject', { - includeHiddenElements: true, - }) - ) - ).toBe(false); + expect(isHiddenFromAccessibility(view.getByTestId('subject'))).toBe(false); }); test('has isInaccessible alias', () => { @@ -310,6 +296,11 @@ describe('isHiddenFromAccessibility', () => { }); }); +test('is not triggered for element with "aria-modal" prop', () => { + const view = render(); + expect(isHiddenFromAccessibility(view.getByTestId('subject'))).toBe(false); +}); + describe('isAccessibilityElement', () => { test('matches View component properly', () => { const { getByTestId } = render( diff --git a/src/helpers/__tests__/format-default.test.tsx b/src/helpers/__tests__/format-default.test.tsx index 8f2e784b2..d4d966234 100644 --- a/src/helpers/__tests__/format-default.test.tsx +++ b/src/helpers/__tests__/format-default.test.tsx @@ -10,7 +10,6 @@ const node: ReactTestRendererJSON = { describe('mapPropsForQueryError', () => { test('preserves props that are helpful for debugging', () => { const props = { - 'aria-hidden': true, accessibilityElementsHidden: true, accessibilityViewIsModal: true, importantForAccessibility: 'yes', @@ -24,8 +23,10 @@ describe('mapPropsForQueryError', () => { 'aria-checked': 'ARIA-CHECKED', 'aria-disabled': 'ARIA-DISABLED', 'aria-expanded': 'ARIA-EXPANDED', + 'aria-hidden': true, 'aria-label': 'ARIA_LABEL', 'aria-labelledby': 'ARIA_LABELLED_BY', + 'aria-modal': true, 'aria-selected': 'ARIA-SELECTED', placeholder: 'PLACEHOLDER', value: 'VALUE', diff --git a/src/helpers/accessiblity.ts b/src/helpers/accessiblity.ts index b29088ad9..af47863a5 100644 --- a/src/helpers/accessiblity.ts +++ b/src/helpers/accessiblity.ts @@ -83,10 +83,10 @@ function isSubtreeInaccessible(element: ReactTestInstance): boolean { const flatStyle = StyleSheet.flatten(element.props.style) ?? {}; if (flatStyle.display === 'none') return true; - // iOS: accessibilityViewIsModal + // iOS: accessibilityViewIsModal or aria-modal // See: https://reactnative.dev/docs/accessibility#accessibilityviewismodal-ios const hostSiblings = getHostSiblings(element); - if (hostSiblings.some((sibling) => sibling.props.accessibilityViewIsModal)) { + if (hostSiblings.some((sibling) => getAccessibilityViewIsModal(sibling))) { return true; } @@ -116,6 +116,10 @@ export function getAccessibilityRole(element: ReactTestInstance) { return element.props.role ?? element.props.accessibilityRole; } +export function getAccessibilityViewIsModal(element: ReactTestInstance) { + return element.props['aria-modal'] ?? element.props.accessibilityViewIsModal; +} + export function getAccessibilityLabel( element: ReactTestInstance ): string | undefined { diff --git a/src/helpers/format-default.ts b/src/helpers/format-default.ts index 1f2faab51..6642bc0e2 100644 --- a/src/helpers/format-default.ts +++ b/src/helpers/format-default.ts @@ -15,6 +15,7 @@ const propsToDisplay = [ 'aria-hidden', 'aria-label', 'aria-labelledby', + 'aria-modal', 'aria-selected', 'defaultValue', 'importantForAccessibility', diff --git a/src/queries/__tests__/makeQueries.test.tsx b/src/queries/__tests__/makeQueries.test.tsx index 6e922c718..506603263 100644 --- a/src/queries/__tests__/makeQueries.test.tsx +++ b/src/queries/__tests__/makeQueries.test.tsx @@ -27,10 +27,21 @@ describe('printing element tree', () => { accessibilityHint="HINT" accessibilityRole="summary" accessibilityViewIsModal + aria-busy={false} + aria-checked="mixed" + aria-disabled={false} + aria-expanded={false} aria-hidden aria-label="ARIA_LABEL" aria-labelledby="ARIA_LABELLED_BY" + aria-modal + aria-selected={false} + aria-valuemin={10} + aria-valuemax={30} + aria-valuenow={20} + aria-valuetext="Hello Value" importantForAccessibility="yes" + role="summary" > { accessibilityLabelledBy="LABELLED_BY" accessibilityRole="summary" accessibilityViewIsModal={true} + aria-busy={false} + aria-checked="mixed" + aria-disabled={false} + aria-expanded={false} aria-hidden={true} aria-label="ARIA_LABEL" aria-labelledby="ARIA_LABELLED_BY" + aria-modal={true} + aria-selected={false} importantForAccessibility="yes" nativeID="NATIVE_ID" + role="summary" testID="TEST_ID" >