Skip to content

Commit 833f930

Browse files
jsamrjsamr
committed
test(a11y): enhance accessibility testing with react-native-accessibility-engine
1 parent 4ba1e88 commit 833f930

File tree

4 files changed

+109
-55
lines changed

4 files changed

+109
-55
lines changed

‎packages/render-html/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"prettier": "^2.3.1",
6161
"react": "17.0.2",
6262
"react-native": "^0.64.0",
63+
"react-native-accessibility-engine": "^0.4.1",
6364
"react-native-builder-bob": "^0.18.1",
6465
"react-performance-testing": "^1.2.3",
6566
"react-test-renderer": "^17.0.2",

‎packages/render-html/src/__tests__/component.render-html-a11y.test.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { render } from '@testing-library/react-native';
2+
import React from 'react';
3+
import AccessibilityEngine from 'react-native-accessibility-engine';
4+
import RenderHTML from '../RenderHTML';
5+
6+
describe('RenderHTML a11y', () => {
7+
describe('regarding anchors', () => {
8+
describe('should add accessibility features to anchors when href is non-empty', () => {
9+
const snippets = [
10+
// Block
11+
`<a href="https://domain.com">test</a>`,
12+
// Inline
13+
`<span><a href="https://domain.com">test</a> other text</span>`
14+
];
15+
for (const snippet of snippets) {
16+
it(`should pas snippet "${snippet}"`, () => {
17+
const element = (
18+
<RenderHTML
19+
source={{
20+
html: `<a href="https://domain.com">test</a>`
21+
}}
22+
debug={false}
23+
contentWidth={0}
24+
/>
25+
);
26+
const { getByTestId } = render(element);
27+
expect(getByTestId('a').props.accessibilityRole).toBe('link');
28+
expect(getByTestId('a').props.accessible).toBe(true);
29+
expect(() => AccessibilityEngine.check(element)).not.toThrow();
30+
});
31+
}
32+
});
33+
it('should not add accessibility features to anchors when href is empty', () => {
34+
const element = (
35+
<RenderHTML
36+
source={{
37+
html: `<a href="">test</a>`
38+
}}
39+
debug={false}
40+
contentWidth={0}
41+
/>
42+
);
43+
const { getByTestId } = render(element);
44+
expect(getByTestId('a').props.accessibilityRole).not.toBeDefined();
45+
expect(getByTestId('a').props.accessible).not.toBeDefined();
46+
expect(() => AccessibilityEngine.check(element)).not.toThrow();
47+
});
48+
});
49+
describe('regarding headings', () => {
50+
it("should add accessibility role 'header' to headings", () => {
51+
for (const header of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']) {
52+
const element = (
53+
<RenderHTML
54+
source={{
55+
html: `<${header}>test</${header}>`
56+
}}
57+
debug={false}
58+
contentWidth={0}
59+
/>
60+
);
61+
const { getByTestId } = render(element);
62+
expect(getByTestId(header).props.accessibilityRole).toBe('header');
63+
expect(() => AccessibilityEngine.check(element)).not.toThrow();
64+
}
65+
});
66+
});
67+
describe('regarding images', () => {
68+
it('should provide accessibility properties to <img> renderer', () => {
69+
const element = (
70+
<RenderHTML
71+
source={{
72+
html: '<img alt="An image" src="https://img.com/1" />'
73+
}}
74+
debug={false}
75+
contentWidth={200}
76+
/>
77+
);
78+
const { getByA11yRole } = render(element);
79+
const imgProps = getByA11yRole('image').props;
80+
expect(imgProps.accessibilityRole).toBe('image');
81+
expect(imgProps.accessibilityLabel).toBe('An image');
82+
expect(() => AccessibilityEngine.check(element)).not.toThrow();
83+
});
84+
});
85+
});

‎packages/render-html/src/__tests__/component.render-html.test.tsx‎

Lines changed: 1 addition & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -85,20 +85,7 @@ describe('RenderHTML', () => {
8585
nextContentWidth
8686
);
8787
});
88-
it('should provide accessibility properties to <img> renderer', () => {
89-
const { getByA11yRole } = render(
90-
<RenderHTML
91-
source={{
92-
html: '<img alt="An image" src="https://img.com/1" />'
93-
}}
94-
debug={false}
95-
contentWidth={200}
96-
/>
97-
);
98-
const imgProps = getByA11yRole('image').props;
99-
expect(imgProps.accessibilityRole).toBe('image');
100-
expect(imgProps.accessibilityLabel).toBe('An image');
101-
});
88+
10289
it('should merge `viewStyle` to <img> renderer', () => {
10390
const { getByA11yRole } = render(
10491
<RenderHTML
@@ -175,46 +162,6 @@ describe('RenderHTML', () => {
175162
act(() => anchor.props.onPress?.({}));
176163
expect(onPress).toHaveBeenCalled();
177164
});
178-
it('should add accessibility features to anchors when href is non-empty', () => {
179-
const { getByTestId } = render(
180-
<RenderHTML
181-
source={{
182-
html: `<a href="https://domain.com">test</a>`
183-
}}
184-
debug={false}
185-
contentWidth={0}
186-
/>
187-
);
188-
expect(getByTestId('a').props.accessibilityRole).toBe('link');
189-
expect(getByTestId('a').props.accessible).toBe(true);
190-
});
191-
it('should not add accessibility features to anchors when href is empty', () => {
192-
const { getByTestId } = render(
193-
<RenderHTML
194-
source={{
195-
html: `<a href="">test</a>`
196-
}}
197-
debug={false}
198-
contentWidth={0}
199-
/>
200-
);
201-
expect(getByTestId('a').props.accessibilityRole).not.toBeDefined();
202-
expect(getByTestId('a').props.accessible).not.toBeDefined();
203-
});
204-
it("should add accessibility role 'header' to headings", () => {
205-
for (const header of ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']) {
206-
const { getByTestId } = render(
207-
<RenderHTML
208-
source={{
209-
html: `<${header}>test</${header}>`
210-
}}
211-
debug={false}
212-
contentWidth={0}
213-
/>
214-
);
215-
expect(getByTestId(header).props.accessibilityRole).toBe('header');
216-
}
217-
});
218165
});
219166
describe('regarding customHTMLElementsModels prop', () => {
220167
it('should support changing block content model to mixed', () => {

‎yarn.lock‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15992,6 +15992,13 @@ fsevents@^1.2.7:
1599215992
languageName: node
1599315993
linkType: hard
1599415994

15995+
"lodash.groupby@npm:^4.6.0":
15996+
version: 4.6.0
15997+
resolution: "lodash.groupby@npm:4.6.0"
15998+
checksum: e2d4d13d12790a1cacab3f5f120b7c072a792224e83b2f403218866d18efde76024b2579996dfebb230a61ce06469332e16639103669a35a605287e19ced6b9b
15999+
languageName: node
16000+
linkType: hard
16001+
1599516002
"lodash.isequal@npm:^4.0.0, lodash.isequal@npm:^4.5.0":
1599616003
version: 4.5.0
1599716004
resolution: "lodash.isequal@npm:4.5.0"
@@ -19790,6 +19797,19 @@ fsevents@^1.2.7:
1979019797
languageName: node
1979119798
linkType: hard
1979219799

19800+
"react-native-accessibility-engine@npm:^0.4.1":
19801+
version: 0.4.1
19802+
resolution: "react-native-accessibility-engine@npm:0.4.1"
19803+
dependencies:
19804+
lodash.groupby: ^4.6.0
19805+
react-test-renderer: ^17.0.1
19806+
peerDependencies:
19807+
react: "*"
19808+
react-native: "*"
19809+
checksum: e827ab46af2c10a005974cfcda807e9812a03a712345555b20d15cfeae9daafa0280bef91f0234e69f6222b82ad2268738fd46591c5518804ab7799f45e56c96
19810+
languageName: node
19811+
linkType: hard
19812+
1979319813
"react-native-builder-bob@npm:^0.18.1":
1979419814
version: 0.18.1
1979519815
resolution: "react-native-builder-bob@npm:0.18.1"
@@ -19984,6 +20004,7 @@ fsevents@^1.2.7:
1998420004
ramda: ^0.27.1
1998520005
react: 17.0.2
1998620006
react-native: ^0.64.0
20007+
react-native-accessibility-engine: ^0.4.1
1998720008
react-native-builder-bob: ^0.18.1
1998820009
react-performance-testing: ^1.2.3
1998920010
react-test-renderer: ^17.0.2
@@ -20275,7 +20296,7 @@ fsevents@^1.2.7:
2027520296
languageName: node
2027620297
linkType: hard
2027720298

20278-
"react-test-renderer@npm:17.0.2, react-test-renderer@npm:^17.0.2":
20299+
"react-test-renderer@npm:17.0.2, react-test-renderer@npm:^17.0.1, react-test-renderer@npm:^17.0.2":
2027920300
version: 17.0.2
2028020301
resolution: "react-test-renderer@npm:17.0.2"
2028120302
dependencies:

0 commit comments

Comments
 (0)