@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.20

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

@@ -1,111 +1,143 @@
-import { i18n } from '@lingui/core';
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import { messages } from './locales/en/messages.mjs';
-import './textarea.js';
+import { i18n } from "@lingui/core";
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import { messages } from "./locales/en/messages.mjs";
+import "./textarea.js";
 // Initialize i18n with English locale for tests
-i18n.load('en', messages);
-i18n.activate('en');
-describe('w-textarea accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
+i18n.load("en", messages);
+i18n.activate("en");
+describe("w-textarea accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
         // go through setting the various attributes and running automated AXE tests on each
-        test('default state has no violations', async () => {
+        test("default state has no violations", async () => {
             const page = render(html `<w-textarea label="Message"></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('with help text has no violations', async () => {
-            const page = render(html `<w-textarea label="Message" help-text="Enter your message"></w-textarea>`);
+        test("with help text has no violations", async () => {
+            const page = render(html `<w-textarea
+					label="Message"
+					help-text="Enter your message"
+				></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('invalid state has no violations', async () => {
-            const page = render(html `<w-textarea label="Message" invalid help-text="This field is required"></w-textarea>`);
+        test("invalid state has no violations", async () => {
+            const page = render(html `<w-textarea
+					label="Message"
+					invalid
+					help-text="This field is required"
+				></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('disabled state has no violations', async () => {
+        test("disabled state has no violations", async () => {
             const page = render(html `<w-textarea label="Message" disabled></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('readonly state has no violations', async () => {
-            const page = render(html `<w-textarea label="Message" readonly value="Read only text"></w-textarea>`);
+        test("readonly state has no violations", async () => {
+            const page = render(html `<w-textarea
+					label="Message"
+					readonly
+					value="Read only text"
+				></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('required state has no violations', async () => {
+        test("required state has no violations", async () => {
             const page = render(html `<w-textarea label="Message" required></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('optional state has no violations', async () => {
+        test("optional state has no violations", async () => {
             const page = render(html `<w-textarea label="Message" optional></w-textarea>`);
             await expect(page).toHaveNoAxeViolations();
         });
     });
-    describe('WCAG 1.3.1 - Info and Relationships', () => {
-        test('textarea has accessible name from label', async () => {
+    describe("WCAG 1.3.1 - Info and Relationships", () => {
+        test("textarea has accessible name from label", async () => {
             const page = render(html `<w-textarea label="Description"></w-textarea>`);
             // this checks that after we set the label to "Description", the textbox's accessible name is also "Description".
             // accessible name is derived from the label (or aria-label / aria-labelledby) if present (which they are not in this case)
-            await expect.element(page.getByRole('textbox', { name: 'Description' })).toBeVisible();
+            await expect
+                .element(page.getByRole("textbox", { name: "Description" }))
+                .toBeVisible();
         });
     });
-    describe('WCAG 3.3.1 - Error Identification', () => {
-        test('error state is indicated via aria-invalid', async () => {
+    describe("WCAG 3.3.1 - Error Identification", () => {
+        test("error state is indicated via aria-invalid", async () => {
             const page = render(html `<w-textarea label="Message" invalid></w-textarea>`);
-            await expect.element(page.getByLabelText('Message')).toHaveAttribute('aria-invalid', 'true');
-        });
-        test('error message is associated via aria-errormessage', async () => {
-            const page = render(html `<w-textarea label="Message" invalid help-text="Field is required"></w-textarea>`);
-            await expect.element(page.getByLabelText('Message')).toHaveAccessibleErrorMessage('Field is required');
+            await expect
+                .element(page.getByLabelText("Message"))
+                .toHaveAttribute("aria-invalid", "true");
+        });
+        test("error message is associated via aria-errormessage", async () => {
+            const page = render(html `<w-textarea
+					label="Message"
+					invalid
+					help-text="Field is required"
+				></w-textarea>`);
+            await expect
+                .element(page.getByLabelText("Message"))
+                .toHaveAccessibleErrorMessage("Field is required");
         });
     });
-    describe('WCAG 3.3.2 - Labels or Instructions', () => {
-        test('help text is programmatically associated', async () => {
-            const page = render(html `<w-textarea label="Bio" help-text="Tell us about yourself"></w-textarea>`);
-            await expect.element(page.getByLabelText('Bio')).toHaveAccessibleDescription('Tell us about yourself');
+    describe("WCAG 3.3.2 - Labels or Instructions", () => {
+        test("help text is programmatically associated", async () => {
+            const page = render(html `<w-textarea
+					label="Bio"
+					help-text="Tell us about yourself"
+				></w-textarea>`);
+            await expect
+                .element(page.getByLabelText("Bio"))
+                .toHaveAccessibleDescription("Tell us about yourself");
         });
     });
     // these tests essentially verify that the attributes we set on the host are mirrored to the internal textarea
-    describe('WCAG 4.1.2 - Name, Role, Value', () => {
-        test('required state is exposed', async () => {
+    describe("WCAG 4.1.2 - Name, Role, Value", () => {
+        test("required state is exposed", async () => {
             const page = render(html `<w-textarea label="Name" required></w-textarea>`);
             // getByLabelText resolves to the internal <textarea>, not the host element
-            await expect.element(page.getByLabelText('Name')).toHaveAttribute('required');
+            await expect
+                .element(page.getByLabelText("Name"))
+                .toHaveAttribute("required");
         });
-        test('disabled state is exposed', async () => {
+        test("disabled state is exposed", async () => {
             const page = render(html `<w-textarea label="Name" disabled></w-textarea>`);
-            await expect.element(page.getByLabelText('Name')).toBeDisabled();
+            await expect.element(page.getByLabelText("Name")).toBeDisabled();
         });
-        test('readonly state is exposed', async () => {
+        test("readonly state is exposed", async () => {
             const page = render(html `<w-textarea label="Name" readonly></w-textarea>`);
-            await expect.element(page.getByLabelText('Name')).toHaveAttribute('readonly');
+            await expect
+                .element(page.getByLabelText("Name"))
+                .toHaveAttribute("readonly");
         });
-        test('value is exposed', async () => {
+        test("value is exposed", async () => {
             const page = render(html `<w-textarea label="Name" value="Hello"></w-textarea>`);
-            await expect.element(page.getByLabelText('Name')).toHaveValue('Hello');
+            await expect.element(page.getByLabelText("Name")).toHaveValue("Hello");
         });
     });
-    describe('WCAG 2.1.1 - Keyboard', () => {
-        test('textarea is focusable', async () => {
+    describe("WCAG 2.1.1 - Keyboard", () => {
+        test("textarea is focusable", async () => {
             const page = render(html `<w-textarea label="Message"></w-textarea>`);
-            const textarea = page.getByLabelText('Message');
+            const textarea = page.getByLabelText("Message");
             await textarea.click();
             // Check focus via activeElement - delegatesFocus means the shadow root's textarea gets focus
-            const wTextarea = document.querySelector('w-textarea');
-            await expect.poll(() => wTextarea?.shadowRoot?.activeElement?.tagName).toBe('TEXTAREA');
-        });
-        test('disabled textarea is not focusable', async () => {
-            const page = render(html `
-        <button>Before</button>
-        <w-textarea label="Message" disabled></w-textarea>
-        <button>After</button>
-      `);
-            const buttons = Array.from(document.querySelectorAll('button'));
+            const wTextarea = document.querySelector("w-textarea");
+            await expect
+                .poll(() => wTextarea?.shadowRoot?.activeElement?.tagName)
+                .toBe("TEXTAREA");
+        });
+        test("disabled textarea is not focusable", async () => {
+            render(html `
+				<button>Before</button>
+				<w-textarea label="Message" disabled></w-textarea>
+				<button>After</button>
+			`);
+            const buttons = [...document.querySelectorAll("button")];
             const beforeBtn = buttons[0];
             const afterBtn = buttons[1];
             expect(beforeBtn).toBeDefined();
             expect(afterBtn).toBeDefined();
-            beforeBtn?.focus();
+            beforeBtn.focus();
             // Attempt to move focus to the disabled textarea; focus should remain on "Before".
-            const wTextarea = document.querySelector('w-textarea');
+            const wTextarea = document.querySelector("w-textarea");
             wTextarea?.click();
             await expect.element(beforeBtn).toHaveFocus();
             // Verify disabled textarea doesn't receive focus

package/dist/packages/textarea/textarea.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 declare const WarpTextarea_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * A multi-line text input with built-in form validation, auto-resizing, and styling support.
@@ -15,7 +15,7 @@ declare class WarpTextarea extends WarpTextarea_base {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         clonable?: boolean;
-        customElementRegistry?: CustomElementRegistry;
+        customElementRegistry?: CustomElementRegistry | null;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
@@ -39,26 +39,26 @@ declare class WarpTextarea extends WarpTextarea_base {
     /**
      * Either a `label` or an `aria-label` must be provided.
      */
-    label: string;
+    label: string | undefined;
     /**
      * Use in combination with `invalid` to show as a validation error message,
      * or on its own to show a help text.
      *
      * @summary Description shown below the input field
      */
-    helpText: string;
+    helpText: string | undefined;
     /**
      * Sets the maximum number of text rows before the content starts scrolling.
      */
-    maxRows: number;
+    maxRows: number | undefined;
     /**
      * Sets the minimum number of text rows the textarea should display
      */
-    minRows: number;
+    minRows: number | undefined;
     /**
      * The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the input field when submitting the form
      */
-    name: string;
+    name: string | undefined;
     /**
      * Set a text that is shown in the textarea when it doesn't have a value.
      *
@@ -66,7 +66,7 @@ declare class WarpTextarea extends WarpTextarea_base {
      *
      * @summary Shown in the textarea when it doesn't have a value
      */
-    placeholder: string;
+    placeholder: string | undefined;
     /**
      * @deprecated Use the native `readonly` attribute instead
      */
@@ -82,7 +82,7 @@ declare class WarpTextarea extends WarpTextarea_base {
     /**
      * Lets you set the current value
      */
-    value: string;
+    value: string | undefined;
     /**
      * Show an icon behind the label indicating the field is optional
      */
@@ -110,11 +110,11 @@ declare class WarpTextarea extends WarpTextarea_base {
     /** @internal */
     get _helptextstyles(): string;
     /** @internal */
-    get _helpId(): string;
+    get _helpId(): string | undefined;
     /** @internal */
     get _id(): string;
     /** @internal */
-    get _error(): string;
+    get _error(): string | undefined;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
     firstUpdated(changedProperties: PropertyValues<this>): void;

package/dist/packages/textarea/textarea.hydration.test.d.ts

@@ -1 +1 @@
-import './textarea.js';
+import "./textarea.js";

package/dist/packages/textarea/textarea.hydration.test.js

@@ -1,42 +1,42 @@
-import { describe, expect, test, beforeEach, afterEach } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './textarea.js';
-describe('w-textarea React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./textarea.js";
+describe("w-textarea React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textarea', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textarea", {});
         expect(warnings).toEqual([]);
     });
-    test('with label hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textarea', {
-            label: 'Description',
+    test("with label hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textarea", {
+            label: "Description",
         });
         expect(warnings).toEqual([]);
     });
-    test('with value hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textarea', {
-            value: 'Some text content',
+    test("with value hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textarea", {
+            value: "Some text content",
         });
         expect(warnings).toEqual([]);
     });
-    test('with disabled state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textarea', {
+    test("with disabled state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textarea", {
             disabled: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with invalid state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textarea', {
+    test("with invalid state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textarea", {
             invalid: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with help text hydrates without warnings', async () => {
-        const warnings = await testHydration('w-textarea', {
-            'help-text': 'Enter a detailed description',
+    test("with help text hydrates without warnings", async () => {
+        const warnings = await testHydration("w-textarea", {
+            "help-text": "Enter a detailed description",
         });
         expect(warnings).toEqual([]);
     });