Skip to content
Merged
Show file tree
Hide file tree
Changes from 9 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@
2,
{ "ignore": ["^@theme", "^@docusaurus", "^@generated"] }
],
"react-native-a11y/has-valid-accessibility-ignores-invert-colors": 0,
"react-native/no-color-literals": "off",
"react-native/no-inline-styles": "off",
"react-native-a11y/has-valid-accessibility-descriptors": "off",
"react-native-a11y/has-valid-accessibility-ignores-invert-colors": 0,
"react-native-a11y/has-valid-accessibility-value": "off"
}
}
5 changes: 1 addition & 4 deletions src/fireEvent.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
import { ReactTestInstance } from 'react-test-renderer';
import act from './act';
import { isHostElement } from './helpers/component-tree';
import { filterNodeByType } from './helpers/filterNodeByType';

type EventHandler = (...args: any) => unknown;

const isHostElement = (element?: ReactTestInstance) => {
return typeof element?.type === 'string';
};

const isTextInput = (element?: ReactTestInstance) => {
if (!element) {
return false;
Expand Down
170 changes: 170 additions & 0 deletions src/helpers/__tests__/accessiblity.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
import React from 'react';
import { View, Text, TextInput } from 'react-native';
import { render, isInaccessible } from '../..';

test('returns false for accessible elements', () => {
expect(
isInaccessible(render(<View testID="subject" />).getByTestId('subject'))
).toBe(false);

expect(
isInaccessible(
render(<Text testID="subject">Hello</Text>).getByTestId('subject')
)
).toBe(false);

expect(
isInaccessible(
render(<TextInput testID="subject" />).getByTestId('subject')
)
).toBe(false);
});

test('detects elements with accessibilityElementsHidden prop', () => {
const view = render(<View testID="subject" accessibilityElementsHidden />);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('detects nested elements with accessibilityElementsHidden prop', () => {
const view = render(
<View accessibilityElementsHidden>
<View testID="subject" />
</View>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('detects deeply nested elements with accessibilityElementsHidden prop', () => {
const view = render(
<View accessibilityElementsHidden>
<View>
<View>
<View testID="subject" />
</View>
</View>
</View>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('detects elements with importantForAccessibility="no" prop', () => {
const view = render(<View testID="subject" importantForAccessibility="no" />);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('detects elements with importantForAccessibility="no-hide-descendants" prop', () => {
const view = render(
<View testID="subject" importantForAccessibility="no-hide-descendants" />
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('detects nested elements with importantForAccessibility="no-hide-descendants" prop', () => {
const view = render(
<View importantForAccessibility="no-hide-descendants">
<View testID="subject" />
</View>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('detects elements with display=none', () => {
const view = render(<View testID="subject" style={{ display: 'none' }} />);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('detects nested elements with display=none', () => {
const view = render(
<View style={{ display: 'none' }}>
<View testID="subject" />
</View>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('detects deeply nested elements with display=none', () => {
const view = render(
<View style={{ display: 'none' }}>
<View>
<View>
<View testID="subject" />
</View>
</View>
</View>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('detects elements with display=none with complex style', () => {
const view = render(
<View
testID="subject"
style={[{ display: 'flex' }, [{ display: 'flex' }], { display: 'none' }]}
/>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('is not trigged by opacity = 0', () => {
const view = render(<View testID="subject" style={{ opacity: 0 }} />);
expect(isInaccessible(view.getByTestId('subject'))).toBe(false);
});

test('detects siblings of element with accessibilityViewIsModal prop', () => {
const view = render(
<View>
<View accessibilityViewIsModal />
<View testID="subject" />
</View>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('detects deeply nested siblings of element with accessibilityViewIsModal prop', () => {
const view = render(
<View>
<View accessibilityViewIsModal />
<View>
<View>
<View testID="subject" />
</View>
</View>
</View>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(true);
});

test('is not triggered for element with accessibilityViewIsModal prop', () => {
const view = render(
<View>
<View accessibilityViewIsModal testID="subject" />
</View>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(false);
});

test('is not triggered for child of element with accessibilityViewIsModal prop', () => {
const view = render(
<View>
<View accessibilityViewIsModal>
<View testID="subject" />
</View>
</View>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(false);
});

test('is not triggered for descendent of element with accessibilityViewIsModal prop', () => {
const view = render(
<View>
<View accessibilityViewIsModal>
<View>
<View>
<View testID="subject" />
</View>
</View>
</View>
</View>
);
expect(isInaccessible(view.getByTestId('subject'))).toBe(false);
});
Loading