From aa6e57bbc78b53dc9f54f5c7ace89c3b83d91614 Mon Sep 17 00:00:00 2001 From: bendera Date: Tue, 18 Feb 2025 20:40:22 +0100 Subject: [PATCH 1/5] Add a11y tests --- dev/vscode-textarea/a11y.html | 33 +++++++++++++++++++ src/vscode-badge/vscode-badge.test.ts | 8 ++++- src/vscode-button/vscode-button.test.ts | 6 ++++ src/vscode-checkbox/vscode-checkbox.test.ts | 8 +++++ src/vscode-checkbox/vscode-checkbox.ts | 4 --- .../vscode-collapsible.test.ts | 8 +++++ src/vscode-textarea/vscode-textarea.test.ts | 17 ++++++++-- 7 files changed, 77 insertions(+), 7 deletions(-) create mode 100644 dev/vscode-textarea/a11y.html diff --git a/dev/vscode-textarea/a11y.html b/dev/vscode-textarea/a11y.html new file mode 100644 index 000000000..e7b4233c4 --- /dev/null +++ b/dev/vscode-textarea/a11y.html @@ -0,0 +1,33 @@ + + + + + + VSCode Elements + + + + + + + +

A11Y test

+
+ Test label + +
+ + diff --git a/src/vscode-badge/vscode-badge.test.ts b/src/vscode-badge/vscode-badge.test.ts index 637b99472..19d2034eb 100644 --- a/src/vscode-badge/vscode-badge.test.ts +++ b/src/vscode-badge/vscode-badge.test.ts @@ -1,9 +1,15 @@ import {VscodeBadge} from './index.js'; -import {expect} from '@open-wc/testing'; +import {expect, fixture, html} from '@open-wc/testing'; describe('vscode-badge', () => { it('is defined', () => { const el = document.createElement('vscode-badge'); expect(el).to.instanceOf(VscodeBadge); }); + + it('is accessible', async () => { + const el = await fixture(html`42`); + + await expect(el).to.be.accessible(); + }); }); diff --git a/src/vscode-button/vscode-button.test.ts b/src/vscode-button/vscode-button.test.ts index b2ce97a5d..d7577d679 100644 --- a/src/vscode-button/vscode-button.test.ts +++ b/src/vscode-button/vscode-button.test.ts @@ -8,6 +8,12 @@ describe('vscode-button', () => { expect(el).to.instanceOf(VscodeButton); }); + it('is accessible', async () => { + const el = await fixture(html`Test button`); + + await expect(el).to.be.accessible(); + }); + it('is focused automatically', async () => { const el = await fixture( html`test` diff --git a/src/vscode-checkbox/vscode-checkbox.test.ts b/src/vscode-checkbox/vscode-checkbox.test.ts index 94012c249..8626eb6c1 100644 --- a/src/vscode-checkbox/vscode-checkbox.test.ts +++ b/src/vscode-checkbox/vscode-checkbox.test.ts @@ -9,6 +9,14 @@ describe('vscode-checkbox', () => { expect(el).to.instanceOf(VscodeCheckbox); }); + it('is accessible', async () => { + const el = await fixture( + html`Test checkbox` + ); + + await expect(el).to.be.accessible(); + }); + it('should type attribute return "checkbox"', () => { const el = document.createElement('vscode-checkbox'); expect(el.type).to.eq('checkbox'); diff --git a/src/vscode-checkbox/vscode-checkbox.ts b/src/vscode-checkbox/vscode-checkbox.ts index 3646de6df..4a79a7caf 100644 --- a/src/vscode-checkbox/vscode-checkbox.ts +++ b/src/vscode-checkbox/vscode-checkbox.ts @@ -82,10 +82,6 @@ export class VscodeCheckbox @property({reflect: true}) name: string | undefined = undefined; - /** @internal */ - @property({reflect: true}) - override role = 'checkbox'; - /** * 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: * diff --git a/src/vscode-collapsible/vscode-collapsible.test.ts b/src/vscode-collapsible/vscode-collapsible.test.ts index 534f0c1d2..fb7679ef2 100644 --- a/src/vscode-collapsible/vscode-collapsible.test.ts +++ b/src/vscode-collapsible/vscode-collapsible.test.ts @@ -7,6 +7,14 @@ describe('vscode-collapsible', () => { expect(el).to.instanceOf(VscodeCollapsible); }); + it('is accessible', async () => { + const el = await fixture(html` + Test content + `); + + await expect(el).to.be.accessible(); + }); + it('title should be visible', async () => { const el = await fixture(html` diff --git a/src/vscode-textarea/vscode-textarea.test.ts b/src/vscode-textarea/vscode-textarea.test.ts index ad8d81338..1a4e8c7e6 100644 --- a/src/vscode-textarea/vscode-textarea.test.ts +++ b/src/vscode-textarea/vscode-textarea.test.ts @@ -1,6 +1,7 @@ import sinon from 'sinon'; -import {VscodeTextarea} from './index.js'; -import './index.js'; +import {VscodeTextarea} from './vscode-textarea.js'; +import './vscode-textarea.js'; +import '../vscode-label/vscode-label.js'; import {sendKeys, sendMouse} from '@web/test-runner-commands'; import {expect, fixture, html, aTimeout} from '@open-wc/testing'; @@ -10,6 +11,18 @@ describe('vscode-textarea', () => { expect(el).to.instanceOf(VscodeTextarea); }); + it('is accessible', async () => { + const container = await fixture(html` +
+ Test label + +
+ `); + const el = container.querySelector('#textarea'); + + await expect(el).to.be.accessible(); + }); + it('renders with default values', async () => { const el = await fixture(html``); From 7d9ba2bd80d94b6d68a3b700d3c29f22664fe0e2 Mon Sep 17 00:00:00 2001 From: bendera Date: Tue, 18 Feb 2025 21:16:08 +0100 Subject: [PATCH 2/5] Fix w/ prettier --- dev/vscode-textarea/a11y.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dev/vscode-textarea/a11y.html b/dev/vscode-textarea/a11y.html index e7b4233c4..abc9aa588 100644 --- a/dev/vscode-textarea/a11y.html +++ b/dev/vscode-textarea/a11y.html @@ -23,7 +23,7 @@ - +

A11Y test

Test label From 534d83720f7ce780e51b792319b8d7dfcf38a9ff Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 3 Mar 2025 00:14:58 +0100 Subject: [PATCH 3/5] Add checkbox a11y tests --- .../vscode-checkbox-group.test.ts | 10 +++++++++- src/vscode-checkbox/vscode-checkbox.test.ts | 1 + 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/vscode-checkbox-group/vscode-checkbox-group.test.ts b/src/vscode-checkbox-group/vscode-checkbox-group.test.ts index 97c3903ed..58f353b70 100644 --- a/src/vscode-checkbox-group/vscode-checkbox-group.test.ts +++ b/src/vscode-checkbox-group/vscode-checkbox-group.test.ts @@ -1,5 +1,5 @@ import {VscodeCheckboxGroup} from './index.js'; -import {expect} from '@open-wc/testing'; +import {expect, fixture, html} from '@open-wc/testing'; import '../vscode-option/index.js'; describe('vscode-checkbox-group', () => { @@ -7,4 +7,12 @@ describe('vscode-checkbox-group', () => { const el = document.createElement('vscode-checkbox-group'); expect(el).to.instanceOf(VscodeCheckboxGroup); }); + + it('is accessible', async () => { + const el = await fixture( + html`` + ); + + await expect(el).to.be.accessible(); + }); }); diff --git a/src/vscode-checkbox/vscode-checkbox.test.ts b/src/vscode-checkbox/vscode-checkbox.test.ts index 8626eb6c1..19d97ae05 100644 --- a/src/vscode-checkbox/vscode-checkbox.test.ts +++ b/src/vscode-checkbox/vscode-checkbox.test.ts @@ -10,6 +10,7 @@ describe('vscode-checkbox', () => { }); it('is accessible', async () => { + document.body.style.backgroundColor = '#1f1f1f'; const el = await fixture( html`Test checkbox` ); From c9228fd0aa0bda4dd2fec1c64cd35146b0eccb57 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 3 Mar 2025 00:15:09 +0100 Subject: [PATCH 4/5] Add textfield a11y tests --- src/vscode-textfield/vscode-textfield.test.ts | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/vscode-textfield/vscode-textfield.test.ts b/src/vscode-textfield/vscode-textfield.test.ts index 7f83e4f64..7c193247a 100644 --- a/src/vscode-textfield/vscode-textfield.test.ts +++ b/src/vscode-textfield/vscode-textfield.test.ts @@ -1,7 +1,8 @@ import sinon from 'sinon'; -import {VscodeTextfield} from './index.js'; -import {expect, fixture, html} from '@open-wc/testing'; +import {aTimeout, expect, fixture, html} from '@open-wc/testing'; import {sendKeys, sendMouse} from '@web/test-runner-commands'; +import '../vscode-label/vscode-label.js'; +import {VscodeTextfield} from './index.js'; describe('vscode-textfield', () => { it('is defined', () => { @@ -9,6 +10,19 @@ describe('vscode-textfield', () => { expect(el).to.instanceOf(VscodeTextfield); }); + it('is accessible', async () => { + const container = await fixture( + html`
+ Test label + +
` + ); + await aTimeout(10); + const el = container.querySelector('#textfield'); + + await expect(el).to.be.accessible(); + }); + it('renders with default values', async () => { const el = await fixture( html`` From 7adecb128b915a69ecf241fe77d7fd281756d916 Mon Sep 17 00:00:00 2001 From: bendera Date: Mon, 3 Mar 2025 22:43:44 +0100 Subject: [PATCH 5/5] Add a11y tests --- .../vscode-context-menu-item.test.ts | 13 ++++++++++++- src/vscode-context-menu/vscode-context-menu.test.ts | 13 +++++++++++++ src/vscode-divider/vscode-divider.test.ts | 10 +++++++++- 3 files changed, 34 insertions(+), 2 deletions(-) diff --git a/src/vscode-context-menu-item/vscode-context-menu-item.test.ts b/src/vscode-context-menu-item/vscode-context-menu-item.test.ts index 46198cf5d..6191e9bd1 100644 --- a/src/vscode-context-menu-item/vscode-context-menu-item.test.ts +++ b/src/vscode-context-menu-item/vscode-context-menu-item.test.ts @@ -1,9 +1,20 @@ import {VscodeContextMenuItem} from './index.js'; -import {expect} from '@open-wc/testing'; +import {expect, fixture, html} from '@open-wc/testing'; describe('vscode-context-menu-item', () => { it('is defined', () => { const el = document.createElement('vscode-context-menu-item'); expect(el).to.instanceOf(VscodeContextMenuItem); }); + + it('is accessible', async () => { + const el = await fixture( + html`` + ); + + await expect(el).to.be.accessible(); + }); }); diff --git a/src/vscode-context-menu/vscode-context-menu.test.ts b/src/vscode-context-menu/vscode-context-menu.test.ts index 2c69be902..45c8b4f5a 100644 --- a/src/vscode-context-menu/vscode-context-menu.test.ts +++ b/src/vscode-context-menu/vscode-context-menu.test.ts @@ -9,6 +9,19 @@ describe('vscode-context-menu', () => { expect(el).to.instanceOf(VscodeContextMenu); }); + it('is accessible', async () => { + const el = await fixture( + html`` + ); + el.data = [ + {label: 'Menu Item 1', value: 'menuitem1'}, + {label: 'Menu Item 2', value: 'menuitem2'}, + ]; + await el.updateComplete; + + await expect(el).to.be.accessible(); + }); + it('should synchronize visibility state', async () => { const el = await fixture( html`` diff --git a/src/vscode-divider/vscode-divider.test.ts b/src/vscode-divider/vscode-divider.test.ts index b559727e5..7bdd04e4f 100644 --- a/src/vscode-divider/vscode-divider.test.ts +++ b/src/vscode-divider/vscode-divider.test.ts @@ -1,9 +1,17 @@ import {VscodeDivider} from './index.js'; -import {expect} from '@open-wc/testing'; +import {expect, fixture, html} from '@open-wc/testing'; describe('vscode-divider', () => { it('is defined', () => { const el = document.createElement('vscode-divider'); expect(el).to.instanceOf(VscodeDivider); }); + + it('is accessible', async () => { + const el = await fixture( + html`` + ); + + await expect(el).to.be.accessible(); + }); });