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

package/dist/packages/textfield/textfield.test.js

@@ -1,9 +1,14 @@
+import { i18n } from "@lingui/core";
 import { userEvent } from "vitest/browser";
 import { html } from "lit";
 import { expect, test, vi } from "vitest";
 import { render } from "vitest-browser-lit";
 import "../affix/affix.js";
 import "./textfield.js";
+import { messages } from "./locales/en/messages.mjs";
+// Initialize i18n with English locale for tests
+i18n.load("en", messages);
+i18n.activate("en");
 test("renders the textfield", async () => {
     const component = html `<w-textfield label="Test label"></w-textfield>`;
     const page = render(component);
@@ -150,3 +155,69 @@ test("submits the associated form when input has focus and user presses Enter",
     await userEvent.keyboard("{Enter}");
     expect(onSubmit).toHaveBeenCalled();
 });
+test("renders optional indicator as 'Optional' without parentheses", async () => {
+    const page = render(html `<w-textfield label="Email" optional></w-textfield>`);
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    expect(page.getByText("(optional)").query()).toBeNull();
+});
+test("does not render optional indicator when both required and optional are set", async () => {
+    const page = render(html `<w-textfield label="Email" required optional></w-textfield>`);
+    await expect.element(page.getByText("Email")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("includes optional indicator in the accessible name", async () => {
+    const page = render(html `<w-textfield label="Email" optional></w-textfield>`);
+    await expect
+        .element(page.getByRole("textbox", { name: /Email.*Optional/ }))
+        .toBeVisible();
+});
+test("removes optional indicator when required is added dynamically", async () => {
+    const page = render(html `<w-textfield
+			label="Email"
+			optional
+			data-testid="field"
+		></w-textfield>`);
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    const el = page.getByTestId("field").element();
+    el.required = true;
+    await el.updateComplete;
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("shows optional indicator when required is removed dynamically", async () => {
+    const page = render(html `<w-textfield
+			label="Email"
+			required
+			optional
+			data-testid="field"
+		></w-textfield>`);
+    expect(page.getByText("Optional").query()).toBeNull();
+    const el = page.getByTestId("field").element();
+    el.required = false;
+    await el.updateComplete;
+    await expect.element(page.getByText("Optional")).toBeVisible();
+});
+test("does not render optional indicator when there is no label", async () => {
+    const page = render(html `<w-textfield aria-label="Email" optional></w-textfield>`);
+    await expect.element(page.getByLabelText("Email")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("excludes optional indicator from accessible name when required suppresses it", async () => {
+    const page = render(html `<w-textfield label="Email" required optional></w-textfield>`);
+    const input = page.getByRole("textbox", { name: "Email" });
+    await expect.element(input).toBeVisible();
+    // Verify "Optional" is not part of the accessible name
+    expect(page.getByRole("textbox", { name: /Optional/ }).query()).toBeNull();
+});
+test("renders localized optional text based on document lang", async () => {
+    const originalLang = document.documentElement.lang;
+    document.documentElement.lang = "nb";
+    const page = render(html `<w-textfield
+			label="Email"
+			optional
+			data-testid="field"
+		></w-textfield>`);
+    const el = page.getByTestId("field").element();
+    await el.updateComplete;
+    await expect.element(page.getByText("Valgfri")).toBeVisible();
+    document.documentElement.lang = originalLang;
+});

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.10.0-next.19",
+  "version": "2.10.0-next.20",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2269,6 +2269,11 @@
               "description": "Ensures a child slider thumb has a value before allowing the containing form to submit",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "optional",
+              "description": "Whether to show the optional indicator after the label.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "min",
               "description": "The minimum allowed value in the range inputs",
@@ -2356,6 +2361,11 @@
                 "description": "Ensures a child slider thumb has a value before allowing the containing form to submit",
                 "type": "boolean"
               },
+              {
+                "name": "optional",
+                "description": "Whether to show the optional indicator after the label.",
+                "type": "boolean"
+              },
               {
                 "name": "min",
                 "description": "The minimum allowed value in the range inputs",
@@ -2400,7 +2410,8 @@
                 "name": "labelFormatter",
                 "description": "Formatter for the min and max labels below the range.",
                 "type": "((slot: SliderSlot) => string) | undefined"
-              }
+              },
+              { "name": "_label" }
             ],
             "events": []
           }