@warp-ds/elements 2.10.0-next.15 → 2.10.0-next.18

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

@@ -1,124 +1,126 @@
-import { i18n } from '@lingui/core';
-import { userEvent } from 'vitest/browser';
-import { html } from 'lit';
-import { describe, expect, test } from 'vitest';
-import { render } from 'vitest-browser-lit';
-import './radio-group.js';
-import '../radio/radio.js';
+import { i18n } from "@lingui/core";
+import { userEvent } from "vitest/browser";
+import { html } from "lit";
+import { describe, expect, test } from "vitest";
+import { render } from "vitest-browser-lit";
+import "./radio-group.js";
+import "../radio/radio.js";
 // Initialize i18n with English locale for tests
-i18n.load('en', {
-    'radio-group.label.optional': ['(optional)'],
-    'radio-group.validation.required': ['Please select an option.'],
+i18n.load("en", {
+    "radio-group.label.optional": ["(optional)"],
+    "radio-group.validation.required": ["Please select an option."],
 });
-i18n.activate('en');
-describe('w-radio-group accessibility (WCAG 2.2)', () => {
-    describe('axe-core automated checks', () => {
-        test('default state has no violations', async () => {
+i18n.activate("en");
+describe("w-radio-group accessibility (WCAG 2.2)", () => {
+    describe("axe-core automated checks", () => {
+        test("default state has no violations", async () => {
             const page = render(html `
-        <w-radio-group label="Preferences">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Preferences">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('with help text has no violations', async () => {
+        test("with help text has no violations", async () => {
             const page = render(html `
-        <w-radio-group label="Preferences" help-text="Select one">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Preferences" help-text="Select one">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
             await expect(page).toHaveNoAxeViolations();
         });
-        test('required invalid state has no violations', async () => {
+        test("required invalid state has no violations", async () => {
             const page = render(html `
-        <w-radio-group label="Preferences" required>
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
-            const group = document.querySelector('w-radio-group');
+				<w-radio-group label="Preferences" required>
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
+            const group = document.querySelector("w-radio-group");
             group.reportValidity?.();
             await expect(page).toHaveNoAxeViolations();
         });
     });
-    describe('WCAG 1.3.1 - Info and Relationships', () => {
-        test('group has accessible name from label', async () => {
+    describe("WCAG 1.3.1 - Info and Relationships", () => {
+        test("group has accessible name from label", async () => {
             const page = render(html `
-        <w-radio-group label="Preferences">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
-            await expect.element(page.getByRole('radiogroup', { name: 'Preferences' })).toBeVisible();
+				<w-radio-group label="Preferences">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
+            await expect
+                .element(page.getByRole("radiogroup", { name: "Preferences" }))
+                .toBeVisible();
         });
     });
-    describe('WCAG 3.3.2 - Labels or Instructions', () => {
-        test('help text is programmatically associated', async () => {
+    describe("WCAG 3.3.2 - Labels or Instructions", () => {
+        test("help text is programmatically associated", async () => {
             const page = render(html `
-        <w-radio-group label="Preferences" help-text="Select one">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group label="Preferences" help-text="Select one">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+				</w-radio-group>
+			`);
             await expect
-                .element(page.getByRole('radiogroup', { name: 'Preferences' }))
-                .toHaveAccessibleDescription('Select one');
+                .element(page.getByRole("radiogroup", { name: "Preferences" }))
+                .toHaveAccessibleDescription("Select one");
         });
-        test('slotted label and help text are associated', async () => {
+        test("slotted label and help text are associated", async () => {
             const page = render(html `
-        <w-radio-group>
-          <span slot="label">Slotted label</span>
-          <span slot="help-text">Slotted help text</span>
-          <w-radio value="one">One</w-radio>
-        </w-radio-group>
-      `);
+				<w-radio-group>
+					<span slot="label">Slotted label</span>
+					<span slot="help-text">Slotted help text</span>
+					<w-radio value="one">One</w-radio>
+				</w-radio-group>
+			`);
             await expect
-                .element(page.getByRole('radiogroup', { name: 'Slotted label' }))
-                .toHaveAccessibleDescription('Slotted help text');
+                .element(page.getByRole("radiogroup", { name: "Slotted label" }))
+                .toHaveAccessibleDescription("Slotted help text");
         });
     });
-    describe('WCAG 2.1.1 - Keyboard', () => {
-        test('arrow keys move selection between radios', async () => {
+    describe("WCAG 2.1.1 - Keyboard", () => {
+        test("arrow keys move selection between radios", async () => {
             render(html `
-        <w-radio-group label="Preferences">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two">Two</w-radio>
-          <w-radio value="three">Three</w-radio>
-        </w-radio-group>
-      `);
-            const radios = Array.from(document.querySelectorAll('w-radio'));
+				<w-radio-group label="Preferences">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two">Two</w-radio>
+					<w-radio value="three">Three</w-radio>
+				</w-radio-group>
+			`);
+            const radios = [...document.querySelectorAll("w-radio")];
             await radios[0].updateComplete;
             // Wait for radio-group to set tabIndex (async via slotchange)
             await expect.poll(() => radios[0].tabIndex).toBe(0);
             radios[0].focus();
             await expect.poll(() => document.activeElement).toBe(radios[0]);
-            await userEvent.keyboard('[ArrowDown]');
+            await userEvent.keyboard("[ArrowDown]");
             await expect.poll(() => radios[1].checked).toBe(true);
             await expect.poll(() => document.activeElement).toBe(radios[1]);
-            await userEvent.keyboard('[ArrowDown]');
+            await userEvent.keyboard("[ArrowDown]");
             await expect.poll(() => radios[2].checked).toBe(true);
             await expect.poll(() => document.activeElement).toBe(radios[2]);
         });
-        test('arrow keys wrap and skip disabled radios', async () => {
+        test("arrow keys wrap and skip disabled radios", async () => {
             render(html `
-        <w-radio-group label="Preferences">
-          <w-radio value="one">One</w-radio>
-          <w-radio value="two" disabled>Two</w-radio>
-          <w-radio value="three">Three</w-radio>
-        </w-radio-group>
-      `);
-            const radios = Array.from(document.querySelectorAll('w-radio'));
+				<w-radio-group label="Preferences">
+					<w-radio value="one">One</w-radio>
+					<w-radio value="two" disabled>Two</w-radio>
+					<w-radio value="three">Three</w-radio>
+				</w-radio-group>
+			`);
+            const radios = [...document.querySelectorAll("w-radio")];
             await radios[0].updateComplete;
             // Wait for radio-group to set tabIndex (async via slotchange)
             await expect.poll(() => radios[0].tabIndex).toBe(0);
             radios[0].focus();
             await expect.poll(() => document.activeElement).toBe(radios[0]);
-            await userEvent.keyboard('[ArrowDown]');
+            await userEvent.keyboard("[ArrowDown]");
             await expect.poll(() => radios[2].checked).toBe(true);
             await expect.poll(() => document.activeElement).toBe(radios[2]);
-            await userEvent.keyboard('[ArrowDown]');
+            await userEvent.keyboard("[ArrowDown]");
             await expect.poll(() => radios[0].checked).toBe(true);
             await expect.poll(() => document.activeElement).toBe(radios[0]);
         });

package/dist/packages/radio-group/radio-group.d.ts

@@ -1,7 +1,7 @@
-import type { PropertyValues } from 'lit';
-import { LitElement } from 'lit';
-import '../radio/radio.js';
-import type { WarpRadio } from '../radio/radio.js';
+import type { PropertyValues } from "lit";
+import { LitElement } from "lit";
+import "../radio/radio.js";
+import type { WarpRadio } from "../radio/radio.js";
 declare const WarpRadioGroup_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * Radios allow users to select a single option from a list of choices.
@@ -10,6 +10,15 @@ declare const WarpRadioGroup_base: import("@open-wc/form-control").Constructor<i
  *
  * @slot label - Alternative to the `label` attribute should you need custom HTML.
  * @slot help-text - Alternative to the `help-text` attribute should you need custom HTML.
+ *
+ * ## Architecture Note
+ * This component uses semantic <fieldset> element for grouping radio controls, which
+ * provides better accessibility and follows HTML best practices. Note that w-checkbox-group
+ * currently uses <div> instead - this inconsistency exists for historical reasons and may
+ * be addressed in a future major version to align both on the more semantic approach.
+ *
+ * TODO: Align w-checkbox-group to also use <fieldset> in a future major version after
+ * assessing backwards compatibility implications (CSS selectors, etc.).
  */
 export declare class WarpRadioGroup extends WarpRadioGroup_base {
     static styles: import("lit").CSSResult[];
@@ -107,7 +116,7 @@ export declare class WarpRadioGroup extends WarpRadioGroup_base {
 export declare const WRadioGroup: typeof WarpRadioGroup;
 declare global {
     interface HTMLElementTagNameMap {
-        'w-radio-group': WarpRadioGroup;
+        "w-radio-group": WarpRadioGroup;
     }
 }
 export {};

package/dist/packages/radio-group/radio-group.hydration.test.d.ts

@@ -1,2 +1,2 @@
-import '../radio/radio.js';
-import './radio-group.js';
+import "../radio/radio.js";
+import "./radio-group.js";

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

@@ -1,36 +1,47 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import '../radio/radio.js';
-import './radio-group.js';
-describe('w-radio-group React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "../radio/radio.js";
+import "./radio-group.js";
+describe("w-radio-group React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
     // Note: w-radio-group requires w-radio children to function properly.
     // Testing the parent element alone to verify its own attributes don't cause mismatch.
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio-group', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio-group", {});
         expect(warnings).toEqual([]);
     });
-    test('with label and name hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio-group', { label: 'Options', name: 'options' });
+    test("with label and name hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio-group", {
+            label: "Options",
+            name: "options",
+        });
         expect(warnings).toEqual([]);
     });
-    test('with optional hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio-group', { label: 'Options', name: 'options', optional: true });
+    test("with optional hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio-group", {
+            label: "Options",
+            name: "options",
+            optional: true,
+        });
         expect(warnings).toEqual([]);
     });
-    test('with help-text hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio-group', {
-            label: 'Options',
-            name: 'options',
-            'help-text': 'Select one',
+    test("with help-text hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio-group", {
+            label: "Options",
+            name: "options",
+            "help-text": "Select one",
         });
         expect(warnings).toEqual([]);
     });
-    test('required radio-group hydrates without warnings', async () => {
-        const warnings = await testHydration('w-radio-group', { label: 'Options', name: 'options', required: true });
+    test("required radio-group hydrates without warnings", async () => {
+        const warnings = await testHydration("w-radio-group", {
+            label: "Options",
+            name: "options",
+            required: true,
+        });
         expect(warnings).toEqual([]);
     });
 });