@warp-ds/elements 2.10.0-next.9 → 2.10.0

package/dist/packages/radio-group/radio-group.test.js

@@ -1,28 +1,26 @@
-import { i18n } from '@lingui/core';
-import { html } from 'lit';
-import { expect, test, vi } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './radio-group.js';
-import '../radio/radio.js';
+import { i18n } from "@lingui/core";
+import { html } from "lit";
+import { expect, test, vi } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./radio-group.js";
+import "../radio/radio.js";
+import { messages } from "./locales/en/messages.mjs";
 // Initialize i18n with English locale for tests
-i18n.load('en', {
-    'radio-group.label.optional': ['(optional)'],
-    'radio-group.validation.required': ['Please select an option.'],
-});
-i18n.activate('en');
-test('selects radio on click and dispatches input/change', async () => {
+i18n.load("en", messages);
+i18n.activate("en");
+test("selects radio on click and dispatches input/change", async () => {
     render(html `
-    <w-radio-group label="Choices" name="choice">
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<w-radio-group label="Choices" name="choice">
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     const onInput = vi.fn();
     const onChange = vi.fn();
-    group.addEventListener('input', onInput);
-    group.addEventListener('change', onChange);
+    group.addEventListener("input", onInput);
+    group.addEventListener("change", onChange);
     await group.updateComplete;
     radios[1].click();
     await group.updateComplete;
@@ -34,138 +32,214 @@ test('selects radio on click and dispatches input/change', async () => {
     await group.updateComplete;
     expect(onChange).toHaveBeenCalledTimes(1);
 });
-test('renders help text when provided', async () => {
+test("renders help text when provided", async () => {
     const page = render(html `
-    <w-radio-group name="choices" label="Choices" help-text="Select one">
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    await expect.element(page.getByText('Select one')).toBeVisible();
+		<w-radio-group name="choices" label="Choices" help-text="Select one">
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    await expect.element(page.getByText("Select one")).toBeVisible();
 });
-test('disabled group renders help text in disabled color', async () => {
+test("disabled group renders help text in disabled color", async () => {
     render(html `
-    <w-radio-group name="choices" label="Choices" help-text="Select one" disabled>
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
+		<w-radio-group
+			name="choices"
+			label="Choices"
+			help-text="Select one"
+			disabled
+		>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
     await group.updateComplete;
     const helpText = group.shadowRoot?.querySelector('[part~="help-text"]');
     expect(helpText).not.toBeNull();
-    const swatch = document.createElement('div');
-    swatch.style.color = 'var(--w-s-color-text-disabled)';
+    const swatch = document.createElement("div");
+    swatch.style.color = "var(--w-s-color-text-disabled)";
     document.body.append(swatch);
     const disabledColor = getComputedStyle(swatch).color;
     swatch.remove();
     if (!helpText) {
-        throw new Error('Expected help text element to exist');
+        throw new Error("Expected help text element to exist");
     }
     expect(getComputedStyle(helpText).color).toBe(disabledColor);
 });
-test('renders optional text when optional is true', async () => {
+test("renders optional indicator as 'Optional' without parentheses", async () => {
+    const page = render(html `
+		<w-radio-group name="choices" label="Choices" optional>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    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-radio-group name="choices" label="Choices" required optional>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    await expect.element(page.getByText("Choices")).toBeVisible();
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("includes optional indicator in the accessible name", async () => {
+    const page = render(html `
+		<w-radio-group name="choices" label="Choices" optional>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    await expect
+        .element(page.getByRole("radiogroup", { name: /Choices.*Optional/ }))
+        .toBeVisible();
+});
+test("removes optional indicator when required is added dynamically", async () => {
+    const page = render(html `
+		<w-radio-group name="choices" label="Choices" optional>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    const group = document.querySelector("w-radio-group");
+    group.required = true;
+    await group.updateComplete;
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("shows optional indicator when required is removed dynamically", async () => {
+    const page = render(html `
+		<w-radio-group name="choices" label="Choices" required optional>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    expect(page.getByText("Optional").query()).toBeNull();
+    const group = document.querySelector("w-radio-group");
+    group.required = false;
+    await group.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-radio-group name="choices" aria-label="Choices" optional>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
+    await group.updateComplete;
+    expect(page.getByText("Optional").query()).toBeNull();
+});
+test("excludes optional indicator from accessible name when required suppresses it", async () => {
     const page = render(html `
-    <w-radio-group name="choices" label="Choices" optional>
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    await expect.element(page.getByText('(optional)')).toBeVisible();
+		<w-radio-group name="choices" label="Choices" required optional>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = page.getByRole("radiogroup", { name: "Choices" });
+    await expect.element(group).toBeVisible();
+    // Verify "Optional" is not part of the accessible name
+    expect(page.getByRole("radiogroup", { name: /Optional/ }).query()).toBeNull();
 });
-test('associates selected value with form submission', async () => {
+test("associates selected value with form submission", async () => {
     render(html `
-    <form>
-      <w-radio-group label="Choices" name="choice">
-        <w-radio value="alpha">Alpha</w-radio>
-        <w-radio value="beta">Beta</w-radio>
-      </w-radio-group>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<form>
+			<w-radio-group label="Choices" name="choice">
+				<w-radio value="alpha">Alpha</w-radio>
+				<w-radio value="beta">Beta</w-radio>
+			</w-radio-group>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     await group.updateComplete;
     let data = new FormData(form);
-    expect(data.get('choice')).toBeNull();
+    expect(data.get("choice")).toBeNull();
     radios[0].click();
     await group.updateComplete;
     data = new FormData(form);
-    expect(data.get('choice')).toBe('alpha');
+    expect(data.get("choice")).toBe("alpha");
 });
-test('radio group does not submit its own value', async () => {
+test("radio group does not submit its own value", async () => {
     render(html `
-    <form>
-      <w-radio-group label="Choices" name="choice">
-        <w-radio value="alpha">Alpha</w-radio>
-        <w-radio value="beta">Beta</w-radio>
-      </w-radio-group>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<form>
+			<w-radio-group label="Choices" name="choice">
+				<w-radio value="alpha">Alpha</w-radio>
+				<w-radio value="beta">Beta</w-radio>
+			</w-radio-group>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     await group.updateComplete;
     radios[1].click();
     await group.updateComplete;
     const data = new FormData(form);
-    expect(data.get('choice')).toBe('beta');
+    expect(data.get("choice")).toBe("beta");
 });
-test('does not submit a value when name is missing', async () => {
+test("does not submit a value when name is missing", async () => {
     render(html `
-    <form>
-      <w-radio-group name="choices" label="Choices">
-        <w-radio value="alpha">Alpha</w-radio>
-        <w-radio value="beta">Beta</w-radio>
-      </w-radio-group>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<form>
+			<w-radio-group name="choices" label="Choices">
+				<w-radio value="alpha">Alpha</w-radio>
+				<w-radio value="beta">Beta</w-radio>
+			</w-radio-group>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     await group.updateComplete;
     radios[0].click();
     await group.updateComplete;
     const data = new FormData(form);
-    expect(data.get('choice')).toBeNull();
+    expect(data.get("choice")).toBeNull();
 });
-test('required group reports validity based on selection', async () => {
+test("required group reports validity based on selection", async () => {
     render(html `
-    <w-radio-group label="Choices" name="choice" required>
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<w-radio-group label="Choices" name="choice" required>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     await group.updateComplete;
     await expect.poll(() => group.checkValidity()).toBe(false);
     expect(group.validity.valueMissing).toBe(true);
-    expect(group.validationMessage).not.toBe('');
+    expect(group.validationMessage).not.toBe("");
     radios[0].click();
     await group.updateComplete;
     await expect.poll(() => group.checkValidity()).toBe(true);
     expect(group.validity.valid).toBe(true);
 });
-test('required group blocks form submission until a selection is made', async () => {
+test("required group blocks form submission until a selection is made", async () => {
     render(html `
-    <form>
-      <w-radio-group label="Choices" name="choice" required>
-        <w-radio value="alpha">Alpha</w-radio>
-        <w-radio value="beta">Beta</w-radio>
-      </w-radio-group>
-      <button type="submit">Submit</button>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<form>
+			<w-radio-group label="Choices" name="choice" required>
+				<w-radio value="alpha">Alpha</w-radio>
+				<w-radio value="beta">Beta</w-radio>
+			</w-radio-group>
+			<button type="submit">Submit</button>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     const submit = document.querySelector('button[type="submit"]');
     const onSubmit = vi.fn(() => {
         const data = new FormData(form);
-        expect(data.get('choice')).toBe('alpha');
+        expect(data.get("choice")).toBe("alpha");
     });
-    form.addEventListener('submit', (event) => {
+    form.addEventListener("submit", (event) => {
         if (!form.checkValidity()) {
             event.preventDefault();
             return;
@@ -185,30 +259,30 @@ test('required group blocks form submission until a selection is made', async ()
     await expect.poll(() => form.checkValidity()).toBe(true);
     expect(onSubmit).toHaveBeenCalledTimes(1);
 });
-test('required group exposes a validation message when empty', async () => {
+test("required group exposes a validation message when empty", async () => {
     render(html `
-    <w-radio-group label="Choices" name="choice" required>
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
+		<w-radio-group label="Choices" name="choice" required>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
     await group.updateComplete;
     await expect.poll(() => group.reportValidity()).toBe(false);
-    expect(group.validationMessage).not.toBe('');
+    expect(group.validationMessage).not.toBe("");
 });
-test('resets to default selection on form reset', async () => {
+test("resets to default selection on form reset", async () => {
     render(html `
-    <form>
-      <w-radio-group label="Choices" name="choice">
-        <w-radio value="alpha" checked>Alpha</w-radio>
-        <w-radio value="beta">Beta</w-radio>
-      </w-radio-group>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<form>
+			<w-radio-group label="Choices" name="choice">
+				<w-radio value="alpha" checked>Alpha</w-radio>
+				<w-radio value="beta">Beta</w-radio>
+			</w-radio-group>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     await group.updateComplete;
     await expect.poll(() => radios[0].checked).toBe(true);
     await expect.poll(() => radios[1].checked).toBe(false);
@@ -219,15 +293,15 @@ test('resets to default selection on form reset', async () => {
     await expect.poll(() => radios[0].checked).toBe(true);
     await expect.poll(() => radios[1].checked).toBe(false);
 });
-test('disabled group prevents selection and disables child radios', async () => {
+test("disabled group prevents selection and disables child radios", async () => {
     render(html `
-    <w-radio-group name="choices" label="Choices" disabled>
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<w-radio-group name="choices" label="Choices" disabled>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     await group.updateComplete;
     // Check the disabled property - aria-disabled is set via ElementInternals
     expect(radios[0].disabled).toBe(true);
@@ -238,38 +312,38 @@ test('disabled group prevents selection and disables child radios', async () =>
     await group.updateComplete;
     expect(radios[0].checked).toBe(false);
 });
-test('name changes after render affect form submission', async () => {
+test("name changes after render affect form submission", async () => {
     render(html `
-    <form>
-      <w-radio-group label="Choices" name="choice">
-        <w-radio value="alpha">Alpha</w-radio>
-        <w-radio value="beta">Beta</w-radio>
-      </w-radio-group>
-    </form>
-  `);
-    const form = document.querySelector('form');
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<form>
+			<w-radio-group label="Choices" name="choice">
+				<w-radio value="alpha">Alpha</w-radio>
+				<w-radio value="beta">Beta</w-radio>
+			</w-radio-group>
+		</form>
+	`);
+    const form = document.querySelector("form");
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     await group.updateComplete;
     radios[0].click();
     await group.updateComplete;
     let data = new FormData(form);
-    expect(data.get('choice')).toBe('alpha');
-    group.name = 'preference';
+    expect(data.get("choice")).toBe("alpha");
+    group.name = "preference";
     await group.updateComplete;
     data = new FormData(form);
-    expect(data.get('choice')).toBeNull();
-    expect(data.get('preference')).toBe('alpha');
+    expect(data.get("choice")).toBeNull();
+    expect(data.get("preference")).toBe("alpha");
 });
-test('re-enabling a disabled group restores tabbable radio', async () => {
+test("re-enabling a disabled group restores tabbable radio", async () => {
     render(html `
-    <w-radio-group name="choices" label="Choices" disabled>
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta" checked>Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<w-radio-group name="choices" label="Choices" disabled>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta" checked>Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     await group.updateComplete;
     expect(radios[0].tabIndex).toBe(-1);
     expect(radios[1].tabIndex).toBe(-1);
@@ -279,15 +353,15 @@ test('re-enabling a disabled group restores tabbable radio', async () => {
     await expect.poll(() => radios[1].tabIndex).toBe(0);
     await expect.poll(() => radios[0].tabIndex).toBe(-1);
 });
-test('only one radio is tabbable at a time', async () => {
+test("only one radio is tabbable at a time", async () => {
     render(html `
-    <w-radio-group name="choices" label="Choices">
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<w-radio-group name="choices" label="Choices">
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     await group.updateComplete;
     await expect.poll(() => radios[0].tabIndex).toBe(0);
     await expect.poll(() => radios[1].tabIndex).toBe(-1);
@@ -296,30 +370,30 @@ test('only one radio is tabbable at a time', async () => {
     await expect.poll(() => radios[0].tabIndex).toBe(-1);
     await expect.poll(() => radios[1].tabIndex).toBe(0);
 });
-test('warns when used in a form without a name', async () => {
-    const warn = vi.spyOn(console, 'warn').mockImplementation(() => { });
+test("warns when used in a form without a name", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => { });
     render(html `
-    <form>
-      <w-radio-group label="Choices">
-        <w-radio value="alpha">Alpha</w-radio>
-        <w-radio value="beta">Beta</w-radio>
-      </w-radio-group>
-    </form>
-  `);
-    const group = document.querySelector('w-radio-group');
+		<form>
+			<w-radio-group label="Choices">
+				<w-radio value="alpha">Alpha</w-radio>
+				<w-radio value="beta">Beta</w-radio>
+			</w-radio-group>
+		</form>
+	`);
+    const group = document.querySelector("w-radio-group");
     await group.updateComplete;
     expect(warn).toHaveBeenCalledWith('w-radio-group: "name" is required for form submission.');
     warn.mockRestore();
 });
-test('propagates invalid state to child radios', async () => {
+test("propagates invalid state to child radios", async () => {
     render(html `
-    <w-radio-group label="Choices" name="choice" required>
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
+		<w-radio-group label="Choices" name="choice" required>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
     await group.updateComplete;
     group.reportValidity();
     await group.updateComplete;
@@ -330,64 +404,64 @@ test('propagates invalid state to child radios', async () => {
     expect(radios[0].invalid).toBe(false);
     expect(radios[1].invalid).toBe(false);
 });
-test('adds and removes tabindex on the host when invalid', async () => {
+test("adds and removes tabindex on the host when invalid", async () => {
     render(html `
-    <w-radio-group label="Choices" name="choice">
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
+		<w-radio-group label="Choices" name="choice">
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
     await group.updateComplete;
-    expect(group.hasAttribute('tabindex')).toBe(false);
-    group.setAttribute('invalid', '');
+    expect(group.hasAttribute("tabindex")).toBe(false);
+    group.setAttribute("invalid", "");
     await group.updateComplete;
-    expect(group.getAttribute('tabindex')).toBe('0');
-    group.removeAttribute('invalid');
+    expect(group.getAttribute("tabindex")).toBe("0");
+    group.removeAttribute("invalid");
     await group.updateComplete;
-    expect(group.hasAttribute('tabindex')).toBe(false);
+    expect(group.hasAttribute("tabindex")).toBe(false);
 });
-test('updates optional text when locale changes', async () => {
-    i18n.load('fr', {
-        'radio-group.label.optional': ['(optionnel)'],
-        'radio-group.validation.required': ['Please select an option.'],
+test("updates optional text when locale changes", async () => {
+    i18n.load("fr", {
+        "radio-group.label.optional": ["Facultatif"],
+        "radio-group.validation.required": ["Please select an option."],
     });
     const page = render(html `
-    <w-radio-group name="choices" label="Choices" optional>
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
-    await group.updateComplete;
-    await expect.element(page.getByText('(optional)')).toBeVisible();
-    i18n.activate('fr');
-    await group.updateComplete;
-    await expect.element(page.getByText('(optionnel)')).toBeVisible();
-    i18n.activate('en');
+		<w-radio-group name="choices" label="Choices" optional>
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
+    await group.updateComplete;
+    await expect.element(page.getByText("Optional")).toBeVisible();
+    i18n.activate("fr");
+    await group.updateComplete;
+    await expect.element(page.getByText("Facultatif")).toBeVisible();
+    i18n.activate("en");
 });
-test('does not set aria-labelledby when label is missing', async () => {
+test("does not set aria-labelledby when label is missing", async () => {
     render(html `
-    <w-radio-group name="choices">
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
-    await group.updateComplete;
-    const fieldset = group.shadowRoot?.querySelector('fieldset');
-    expect(fieldset?.getAttribute('aria-labelledby')).toBeNull();
+		<w-radio-group name="choices">
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
+    await group.updateComplete;
+    const fieldset = group.shadowRoot?.querySelector("fieldset");
+    expect(fieldset?.getAttribute("aria-labelledby")).toBeNull();
 });
-test('applies group name to child radios when missing', async () => {
+test("applies group name to child radios when missing", async () => {
     render(html `
-    <w-radio-group label="Choices" name="choice">
-      <w-radio value="alpha">Alpha</w-radio>
-      <w-radio value="beta">Beta</w-radio>
-    </w-radio-group>
-  `);
-    const group = document.querySelector('w-radio-group');
-    const radios = Array.from(document.querySelectorAll('w-radio'));
-    await group.updateComplete;
-    expect(radios[0].getAttribute('name')).toBe('choice');
-    expect(radios[1].getAttribute('name')).toBe('choice');
+		<w-radio-group label="Choices" name="choice">
+			<w-radio value="alpha">Alpha</w-radio>
+			<w-radio value="beta">Beta</w-radio>
+		</w-radio-group>
+	`);
+    const group = document.querySelector("w-radio-group");
+    const radios = [...document.querySelectorAll("w-radio")];
+    await group.updateComplete;
+    expect(radios[0].getAttribute("name")).toBe("choice");
+    expect(radios[1].getAttribute("name")).toBe("choice");
 });