@warp-ds/elements 2.6.0 → 2.7.0-next.2

package/dist/packages/checkbox/checkbox.a11y.test.d.ts

@@ -0,0 +1 @@
+import './checkbox.js';

package/dist/packages/checkbox/checkbox.a11y.test.js

@@ -0,0 +1,73 @@
+import { html } from 'lit';
+import { describe, expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './checkbox.js';
+describe('w-checkbox accessibility (WCAG 2.2)', () => {
+    describe('axe-core automated checks', () => {
+        test('default state has no violations', async () => {
+            const page = render(html `<w-checkbox>Check me</w-checkbox>`);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        test('disabled state has no violations', async () => {
+            const page = render(html `<w-checkbox disabled>Check me</w-checkbox>`);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        test('required state has no violations', async () => {
+            const page = render(html `<w-checkbox required>Check me</w-checkbox>`);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        test('indeterminate state has no violations', async () => {
+            const page = render(html `<w-checkbox indeterminate>Check me</w-checkbox>`);
+            await expect(page).toHaveNoAxeViolations();
+        });
+    });
+    describe('WCAG 1.3.1 - Info and Relationships', () => {
+        test('checkbox has accessible name from label slot', async () => {
+            const page = render(html `<w-checkbox>Accept terms</w-checkbox>`);
+            await expect.element(page.getByRole('checkbox', { name: 'Accept terms' })).toBeVisible();
+        });
+    });
+    describe('WCAG 4.1.2 - Name, Role, Value', () => {
+        test('required state is exposed', async () => {
+            const page = render(html `<w-checkbox required>Required</w-checkbox>`);
+            await expect.element(page.getByRole('checkbox', { name: 'Required' })).toHaveAttribute('required');
+        });
+        test('disabled state is exposed', async () => {
+            const page = render(html `<w-checkbox disabled>Disabled</w-checkbox>`);
+            await expect.element(page.getByRole('checkbox', { name: 'Disabled' })).toBeDisabled();
+        });
+        test('checked state is exposed', async () => {
+            const page = render(html `<w-checkbox checked>Checked</w-checkbox>`);
+            await expect.element(page.getByRole('checkbox', { name: 'Checked' })).toBeChecked();
+        });
+    });
+    describe('WCAG 2.1.1 - Keyboard', () => {
+        test('checkbox is focusable', async () => {
+            const page = render(html `<w-checkbox>Focusable</w-checkbox>`);
+            await expect.element(page.getByRole('checkbox', { name: 'Focusable' })).toBeVisible();
+            const wCheckbox = document.querySelector('w-checkbox');
+            await wCheckbox.updateComplete;
+            wCheckbox.focus();
+            await expect.poll(() => wCheckbox?.shadowRoot?.activeElement?.tagName).toBe('INPUT');
+        });
+        test('disabled checkbox is not focusable', async () => {
+            const page = render(html `
+        <button>Before</button>
+        <w-checkbox disabled>Disabled</w-checkbox>
+        <button>After</button>
+      `);
+            const buttons = Array.from(document.querySelectorAll('button'));
+            const beforeBtn = buttons[0];
+            const afterBtn = buttons[1];
+            expect(beforeBtn).toBeDefined();
+            expect(afterBtn).toBeDefined();
+            beforeBtn?.focus();
+            const wCheckbox = document.querySelector('w-checkbox');
+            await wCheckbox?.updateComplete;
+            wCheckbox?.focus();
+            await expect.element(beforeBtn).toHaveFocus();
+            expect(wCheckbox?.shadowRoot?.activeElement).toBeNull();
+            await expect.element(page.getByRole('checkbox', { name: 'Disabled' })).toBeDisabled();
+        });
+    });
+});

package/dist/packages/checkbox/checkbox.d.ts

@@ -0,0 +1,49 @@
+import { LitElement, PropertyValues } from 'lit';
+declare const WCheckbox_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+export declare class WCheckbox extends WCheckbox_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    input: HTMLInputElement | null;
+    /** The name of the checkbox, submitted as a name/value pair with form data. */
+    name: string;
+    /** The value of the checkbox, submitted as a name/value pair with form data. */
+    value: string | null;
+    /** Draws the checkbox in an indeterminate state. */
+    indeterminate: boolean;
+    /** Draws the checkbox in a checked state (reflected to attribute). */
+    checked: boolean;
+    /** Disables the checkbox. */
+    disabled: boolean;
+    /** Makes the checkbox a required field. */
+    required: boolean;
+    /** Draws the checkbox in an invalid state. */
+    invalid: boolean;
+    connectedCallback(): void;
+    private handleClick;
+    updated(changedProperties: PropertyValues<this>): void;
+    resetFormControl(): void;
+    click(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    /** Returns the validation message if the checkbox is invalid, otherwise an empty string */
+    get validationMessage(): string;
+    /** Returns the validity state of the checkbox */
+    get validity(): ValidityState;
+    /** Checks whether the checkbox passes constraint validation */
+    checkValidity(): boolean;
+    /** Checks validity and shows the browser's validation message if invalid */
+    reportValidity(): boolean;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-checkbox': WCheckbox;
+    }
+}
+export {};