Skip to content

Commit 64906e1

Browse files
trurl-mastertrurl-master
committed
Add Abbr and LineBreak virtual roles, more tests
1 parent 14acb56 commit 64906e1

9 files changed

+210
-1
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -123,13 +123,15 @@ The toolkit follows standardized role definitions, with some customizations to p
123123
124124
Specifically, the toolkit applies the following custom roles:
125125
126+
- `abbr`: Mapped to `Abbr`
126127
- `details`: Mapped to `Details`
127128
- `dd`: Mapped to `DescriptionListDetails`
128129
- `dl`: Mapped to `DescriptionList`
129130
- `dt`: Mapped to `DescriptionListTerm`
130131
- `embed`: Mapped to `EmbeddedObject`
131132
- `object`: Mapped to `PluginObject`
132133
- `label`: Mapped to `LabelText`
134+
- `br`: Mapped to `LineBreak`
133135
- `summary`: Mapped to `DisclosureTriangle`
134136
135137
### `byRole` Helper

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "accessibility-testing-toolkit",
3-
"version": "1.0.0-beta.4",
3+
"version": "1.0.0-beta.5",
44
"author": "Ivan Galiatin",
55
"license": "MIT",
66
"description": "A toolkit for testing accessibility",

‎src/elements/a.test.tsx

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { render } from '@testing-library/react';
2+
import { byRole } from '..';
3+
4+
describe('a', () => {
5+
it('renders correct structure', () => {
6+
const { container } = render(
7+
<>
8+
<p>You can reach Michael at:</p>
9+
<ul>
10+
<li>
11+
<a href="https://example.com">Website</a>
12+
</li>
13+
<li>
14+
<a href="mailto:[email protected]">Email</a>
15+
</li>
16+
<li>
17+
<a href="tel:+123456789">Phone</a>
18+
</li>
19+
</ul>
20+
</>
21+
);
22+
23+
expect(container).toHaveA11yTree(
24+
byRole('generic', [
25+
byRole('paragraph', ['You can reach Michael at:']),
26+
byRole('list', [
27+
byRole('listitem', [byRole('link', ['Website'])]),
28+
byRole('listitem', [byRole('link', ['Email'])]),
29+
byRole('listitem', [byRole('link', ['Phone'])]),
30+
]),
31+
])
32+
);
33+
});
34+
});

‎src/elements/abbr.test.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { render } from '@testing-library/react';
2+
import { byRole } from '..';
3+
4+
describe('abbr', () => {
5+
it('renders correct structure', () => {
6+
const { container } = render(
7+
<p>
8+
You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your
9+
<abbr>HTML</abbr> (HyperText Markup Language). Using style sheets, you
10+
can keep your <abbr>CSS</abbr> presentation layer and <abbr>HTML</abbr>
11+
content layer separate. This is called "separation of concerns."
12+
</p>
13+
);
14+
15+
expect(container.firstChild).toHaveA11yTree(
16+
byRole('paragraph', [
17+
'You can use ',
18+
byRole('Abbr', ['CSS']),
19+
' (Cascading Style Sheets) to style your',
20+
byRole('Abbr', ['HTML']),
21+
' (HyperText Markup Language). Using style sheets, you can keep your ',
22+
byRole('Abbr', ['CSS']),
23+
' presentation layer and ',
24+
byRole('Abbr', ['HTML']),
25+
'content layer separate. This is called "separation of concerns."',
26+
])
27+
);
28+
});
29+
});

‎src/elements/address.test.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { render } from '@testing-library/react';
2+
import { byRole } from '..';
3+
4+
describe('address', () => {
5+
it('renders correct structure', () => {
6+
const { container } = render(
7+
<address>
8+
<a href="mailto:[email protected]">[email protected]</a>
9+
<br />
10+
<a href="tel:+14155550132">+1 (415) 555‑0132</a>
11+
</address>
12+
);
13+
14+
expect(container.firstChild).toHaveA11yTree(
15+
byRole('group', [
16+
byRole('link', ['[email protected]']),
17+
byRole('LineBreak'),
18+
byRole('link', ['+1 (415) 555‑0132']),
19+
])
20+
);
21+
});
22+
});

‎src/elements/article.test.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { render } from '@testing-library/react';
2+
import { byRole } from '..';
3+
4+
describe('abbr', () => {
5+
it('renders correct structure', () => {
6+
const { container } = render(
7+
<article>
8+
<h1>Weather forecast for Seattle</h1>
9+
<article>
10+
<h2>03 March 2018</h2>
11+
<p>Rain.</p>
12+
</article>
13+
<article>
14+
<h2>04 March 2018</h2>
15+
<p>Periods of rain.</p>
16+
</article>
17+
<article>
18+
<h2>05 March 2018</h2>
19+
<p>Heavy rain.</p>
20+
</article>
21+
</article>
22+
);
23+
24+
expect(container.firstChild).toHaveA11yTree(
25+
byRole('article', [
26+
byRole('heading', 'Weather forecast for Seattle'),
27+
byRole('article', [
28+
byRole('heading', '03 March 2018'),
29+
byRole('paragraph', ['Rain.']),
30+
]),
31+
byRole('article', [
32+
byRole('heading', '04 March 2018'),
33+
byRole('paragraph', ['Periods of rain.']),
34+
]),
35+
byRole('article', [
36+
byRole('heading', '05 March 2018'),
37+
byRole('paragraph', ['Heavy rain.']),
38+
]),
39+
])
40+
);
41+
});
42+
});

‎src/elements/map-area.test.tsx

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { render } from '@testing-library/react';
2+
import { byRole } from '..';
3+
4+
describe('map-area', () => {
5+
it('renders correct structure', () => {
6+
const { container } = render(
7+
<>
8+
<map name="infographic">
9+
<area
10+
shape="poly"
11+
coords="129,0,260,95,129,138"
12+
href="https://developer.mozilla.org/docs/Web/HTTP"
13+
target="_blank"
14+
alt="HTTP"
15+
/>
16+
<area
17+
shape="poly"
18+
coords="260,96,209,249,130,138"
19+
href="https://developer.mozilla.org/docs/Web/HTML"
20+
target="_blank"
21+
alt="HTML"
22+
/>
23+
<area
24+
shape="poly"
25+
coords="209,249,49,249,130,139"
26+
href="https://developer.mozilla.org/docs/Web/JavaScript"
27+
target="_blank"
28+
alt="JavaScript"
29+
/>
30+
<area
31+
shape="poly"
32+
coords="48,249,0,96,129,138"
33+
href="https://developer.mozilla.org/docs/Web/API"
34+
target="_blank"
35+
alt="Web APIs"
36+
/>
37+
<area
38+
shape="poly"
39+
coords="0,95,128,0,128,137"
40+
href="https://developer.mozilla.org/docs/Web/CSS"
41+
target="_blank"
42+
alt="CSS"
43+
/>
44+
</map>
45+
<img
46+
useMap="#infographic"
47+
src="/media/examples/mdn-info.png"
48+
alt="MDN infographic"
49+
/>
50+
</>
51+
);
52+
53+
expect(container).toHaveA11yTree(
54+
byRole('generic', [
55+
byRole(undefined, [
56+
byRole('link', 'HTTP'),
57+
byRole('link', 'HTML'),
58+
byRole('link', 'JavaScript'),
59+
byRole('link', 'Web APIs'),
60+
byRole('link', 'CSS'),
61+
]),
62+
byRole('img', 'MDN infographic'),
63+
])
64+
);
65+
});
66+
});

‎src/tree/virtual-roles.ts

+12
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@ export const nonListListItemRoles: RoleMatcher[] = [
3535
* Similar to how Google Chrome devtools does it.
3636
*/
3737
export const virtualRoles: RoleMatcher[] = [
38+
// abbr: 'Abbr'
39+
{
40+
match: (node: HTMLElement) => node.tagName.toLowerCase() === 'abbr',
41+
roles: ['Abbr'],
42+
specificity: 1,
43+
},
3844
// details: 'Details',
3945
{
4046
match: (node: HTMLElement) => node.tagName.toLowerCase() === 'details',
@@ -77,6 +83,12 @@ export const virtualRoles: RoleMatcher[] = [
7783
roles: ['LabelText'],
7884
specificity: 1,
7985
},
86+
// br: 'LineBreak',
87+
{
88+
match: (node: HTMLElement) => node.tagName.toLowerCase() === 'br',
89+
roles: ['LineBreak'],
90+
specificity: 1,
91+
},
8092
// summary: 'DisclosureTriangle',
8193
{
8294
match: (node: HTMLElement) => node.tagName.toLowerCase() === 'summary',

‎src/types/types.ts

+2
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import { StaticText } from '../tree/leafs';
33

44
export type AsNonLandmarkRoles = 'HeaderAsNonLandmark' | 'FooterAsNonLandmark';
55
export type VirtualRoles =
6+
| 'Abbr'
67
| 'Details'
78
| 'DescriptionListDetails'
89
| 'DescriptionList'
910
| 'DescriptionListTerm'
1011
| 'EmbeddedObject'
1112
| 'PluginObject'
1213
| 'LabelText'
14+
| 'LineBreak'
1315
| 'DisclosureTriangle';
1416

1517
export type ARIARoleDefinitionKeyExtended =

0 commit comments

Comments
 (0)