vscode-elements · bendera · Mar 11, 2025 · Feb 18, 2025 · Feb 18, 2025 · Mar 2, 2025
diff --git a/dev/vscode-textarea/a11y.html b/dev/vscode-textarea/a11y.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VSCode Elements</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/@vscode/codicons/dist/codicon.css"
+      id="vscode-codicon-stylesheet"
+    >
+    <script
+      type="module"
+      src="/node_modules/@vscode-elements/webview-playground/dist/index.js"
+    ></script>
+    <script type="module" src="/dist/main.js"></script>
+    <script>
+      const logEvents = (selector, eventType) => {
+        document.querySelector(selector).addEventListener(eventType, (ev) => {
+          console.log(ev);
+        });
+      };
+    </script>
+  </head>
+
+  <body style="background-color: #1f1f1f; color: #fff">
+    <h1>A11Y test</h1>
+    <main>
+      <vscode-label for="textarea">Test label</vscode-label>
+      <vscode-textarea id="textarea"></vscode-textarea>
+    </main>
+  </body>
+</html>
diff --git 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`<vscode-label>42</vscode-label>`);
+
+    await expect(el).to.be.accessible();
+  });
 });
diff --git 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`<vscode-button>Test button</vscode-button>`);
+
+    await expect(el).to.be.accessible();
+  });
+
   it('is focused automatically', async () => {
     const el = await fixture<VscodeButton>(
       html`<vscode-button autofocus>test</vscode-button>`

diff --git a/src/vscode-checkbox-group/vscode-checkbox-group.test.ts b/src/vscode-checkbox-group/vscode-checkbox-group.test.ts
@@ -1,10 +1,18 @@
 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', () => {
   it('is defined', () => {
     const el = document.createElement('vscode-checkbox-group');
     expect(el).to.instanceOf(VscodeCheckboxGroup);
   });
+
+  it('is accessible', async () => {
+    const el = await fixture(
+      html`<vscode-checkbox-group></vscode-checkbox-group>`
+    );
+
+    await expect(el).to.be.accessible();
+  });
 });
diff --git a/src/vscode-checkbox/vscode-checkbox.test.ts b/src/vscode-checkbox/vscode-checkbox.test.ts
@@ -9,6 +9,15 @@ describe('vscode-checkbox', () => {
     expect(el).to.instanceOf(VscodeCheckbox);
   });
 
+  it('is accessible', async () => {
+    document.body.style.backgroundColor = '#1f1f1f';
+    const el = await fixture(
+      html`<vscode-checkbox>Test checkbox</vscode-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
@@ -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
@@ -7,6 +7,14 @@ describe('vscode-collapsible', () => {
     expect(el).to.instanceOf(VscodeCollapsible);
   });
 
+  it('is accessible', async () => {
+    const el = await fixture(html`
+      <vscode-collapsible title="Test title">Test content</vscode-collapsible>
+    `);
+
+    await expect(el).to.be.accessible();
+  });
+
   it('title should be visible', async () => {
     const el = await fixture(html`
       <vscode-collapsible title="Test title"></vscode-collapsible>

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
@@ -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<VscodeContextMenuItem>(
+      html`<vscode-context-menu-item
+        label="Test label"
+        keybinding="Ctrl+A"
+      ></vscode-context-menu-item>`
+    );
+
+    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
@@ -9,6 +9,19 @@ describe('vscode-context-menu', () => {
     expect(el).to.instanceOf(VscodeContextMenu);
   });
 
+  it('is accessible', async () => {
+    const el = await fixture<VscodeContextMenu>(
+      html`<vscode-context-menu show></vscode-context-menu>`
+    );
+    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<VscodeContextMenu>(
       html`<vscode-context-menu show></vscode-context-menu>`

diff --git 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<VscodeDivider>(
+      html`<vscode-divider></vscode-divider>`
+    );
+
+    await expect(el).to.be.accessible();
+  });
 });
diff --git 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`
+      <div>
+        <vscode-label for="textarea">Test label</vscode-label>
+        <vscode-textarea id="textarea"></vscode-textarea>
+      </div>
+    `);
+    const el = container.querySelector('#textarea');
+
+    await expect(el).to.be.accessible();
+  });
+
   it('renders with default values', async () => {
     const el = await fixture(html`<vscode-textarea></vscode-textarea>`);
 

diff --git a/src/vscode-textfield/vscode-textfield.test.ts b/src/vscode-textfield/vscode-textfield.test.ts
@@ -1,14 +1,28 @@
 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', () => {
     const el = document.createElement('vscode-textfield');
     expect(el).to.instanceOf(VscodeTextfield);
   });
 
+  it('is accessible', async () => {
+    const container = await fixture(
+      html`<div>
+        <vscode-label for="textfield">Test label</vscode-label>
+        <vscode-textfield id="textfield"></vscode-textfield>
+      </div>`
+    );
+    await aTimeout(10);
+    const el = container.querySelector('#textfield');
+
+    await expect(el).to.be.accessible();
+  });
+
   it('renders with default values', async () => {
     const el = await fixture<VscodeTextfield>(
       html`<vscode-textfield></vscode-textfield>`