Skip to content

Commit 1ae4747

Browse files
benderabendera
committed
Add a11y tests
1 parent 994521c commit 1ae4747

File tree

7 files changed

+77
-7
lines changed

7 files changed

+77
-7
lines changed

‎dev/vscode-textarea/a11y.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>VSCode Elements</title>
7+
<link
8+
rel="stylesheet"
9+
href="/node_modules/@vscode/codicons/dist/codicon.css"
10+
id="vscode-codicon-stylesheet"
11+
>
12+
<script
13+
type="module"
14+
src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
15+
></script>
16+
<script type="module" src="/dist/main.js"></script>
17+
<script>
18+
const logEvents = (selector, eventType) => {
19+
document.querySelector(selector).addEventListener(eventType, (ev) => {
20+
console.log(ev);
21+
});
22+
};
23+
</script>
24+
</head>
25+
26+
<body style="background-color: #1f1f1f; color: #fff;">
27+
<h1>A11Y test</h1>
28+
<main>
29+
<vscode-label for="textarea">Test label</vscode-label>
30+
<vscode-textarea id="textarea"></vscode-textarea>
31+
</main>
32+
</body>
33+
</html>

‎src/vscode-badge/vscode-badge.test.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import {VscodeBadge} from './index.js';
2-
import {expect} from '@open-wc/testing';
2+
import {expect, fixture, html} from '@open-wc/testing';
33

44
describe('vscode-badge', () => {
55
it('is defined', () => {
66
const el = document.createElement('vscode-badge');
77
expect(el).to.instanceOf(VscodeBadge);
88
});
9+
10+
it('is accessible', async () => {
11+
const el = await fixture(html`<vscode-label>42</vscode-label>`);
12+
13+
await expect(el).to.be.accessible();
14+
});
915
});

‎src/vscode-button/vscode-button.test.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ describe('vscode-button', () => {
88
expect(el).to.instanceOf(VscodeButton);
99
});
1010

11+
it('is accessible', async () => {
12+
const el = await fixture(html`<vscode-button>Test button</vscode-button>`);
13+
14+
await expect(el).to.be.accessible();
15+
});
16+
1117
it('is focused automatically', async () => {
1218
const el = await fixture<VscodeButton>(
1319
html`<vscode-button autofocus>test</vscode-button>`

‎src/vscode-checkbox/vscode-checkbox.test.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,14 @@ describe('vscode-checkbox', () => {
99
expect(el).to.instanceOf(VscodeCheckbox);
1010
});
1111

12+
it('is accessible', async () => {
13+
const el = await fixture(
14+
html`<vscode-checkbox>Test checkbox</vscode-checkbox>`
15+
);
16+
17+
await expect(el).to.be.accessible();
18+
});
19+
1220
it('should type attribute return "checkbox"', () => {
1321
const el = document.createElement('vscode-checkbox');
1422
expect(el.type).to.eq('checkbox');

‎src/vscode-checkbox/vscode-checkbox.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,6 @@ export class VscodeCheckbox
7979
@property({reflect: true})
8080
name: string | undefined = undefined;
8181

82-
/** @internal */
83-
@property({reflect: true})
84-
override role = 'checkbox';
85-
8682
/**
8783
* Associate a value to the checkbox. According to the native checkbox [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value_2), If the component participates in a form:
8884
*

‎src/vscode-collapsible/vscode-collapsible.test.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ describe('vscode-collapsible', () => {
77
expect(el).to.instanceOf(VscodeCollapsible);
88
});
99

10+
it('is accessible', async () => {
11+
const el = await fixture(html`
12+
<vscode-collapsible title="Test title">Test content</vscode-collapsible>
13+
`);
14+
15+
await expect(el).to.be.accessible();
16+
});
17+
1018
it('title should be visible', async () => {
1119
const el = await fixture(html`
1220
<vscode-collapsible title="Test title"></vscode-collapsible>

‎src/vscode-textarea/vscode-textarea.test.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import sinon from 'sinon';
2-
import {VscodeTextarea} from './index.js';
3-
import './index.js';
2+
import {VscodeTextarea} from './vscode-textarea.js';
3+
import './vscode-textarea.js';
4+
import '../vscode-label/vscode-label.js';
45
import {sendKeys, sendMouse} from '@web/test-runner-commands';
56
import {expect, fixture, html, aTimeout} from '@open-wc/testing';
67

@@ -10,6 +11,18 @@ describe('vscode-textarea', () => {
1011
expect(el).to.instanceOf(VscodeTextarea);
1112
});
1213

14+
it('is accessible', async () => {
15+
const container = await fixture(html`
16+
<div>
17+
<vscode-label for="textarea">Test label</vscode-label>
18+
<vscode-textarea id="textarea"></vscode-textarea>
19+
</div>
20+
`);
21+
const el = container.querySelector('#textarea');
22+
23+
await expect(el).to.be.accessible();
24+
});
25+
1326
it('renders with default values', async () => {
1427
const el = await fixture(html`<vscode-textarea></vscode-textarea>`);
1528

0 commit comments

Comments
 (0)