@warp-ds/elements 2.8.0-next.2 → 2.8.0-next.3

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

@@ -0,0 +1,185 @@
+import { html } from 'lit';
+import { expect, test } from 'vitest';
+import { render } from 'vitest-browser-lit';
+import './radio.js';
+test('checks on click and remains checked on subsequent clicks', async () => {
+    render(html `<w-radio value="alpha">Alpha</w-radio>`);
+    const radio = document.querySelector('w-radio');
+    await radio.updateComplete;
+    expect(radio.checked).toBe(false);
+    radio.click();
+    await radio.updateComplete;
+    expect(radio.checked).toBe(true);
+    radio.click();
+    await radio.updateComplete;
+    expect(radio.checked).toBe(true);
+});
+test('does not check when disabled', async () => {
+    render(html `<w-radio value="alpha" disabled>Alpha</w-radio>`);
+    const radio = document.querySelector('w-radio');
+    await radio.updateComplete;
+    expect(radio.checked).toBe(false);
+    expect(radio.getAttribute('aria-disabled')).toBe('true');
+    expect(radio.tabIndex).toBe(-1);
+    radio.click();
+    await radio.updateComplete;
+    expect(radio.checked).toBe(false);
+});
+test('updates aria-checked and tabIndex when checked', async () => {
+    render(html `<w-radio value="alpha">Alpha</w-radio>`);
+    const radio = document.querySelector('w-radio');
+    await radio.updateComplete;
+    expect(radio.getAttribute('aria-checked')).toBe('false');
+    radio.checked = true;
+    await radio.updateComplete;
+    expect(radio.getAttribute('aria-checked')).toBe('true');
+    expect(radio.tabIndex).toBe(0);
+});
+test('checked state uses selected border color', async () => {
+    render(html `<w-radio value="alpha">Alpha</w-radio>`);
+    const radio = document.querySelector('w-radio');
+    await radio.updateComplete;
+    const control = radio.shadowRoot?.querySelector('.control');
+    if (!control) {
+        throw new Error('Expected radio control element to exist');
+    }
+    radio.click();
+    await radio.updateComplete;
+    const swatch = document.createElement('div');
+    swatch.style.borderColor = 'var(--w-s-color-border-selected)';
+    document.body.append(swatch);
+    const selectedColor = getComputedStyle(swatch).borderColor;
+    swatch.remove();
+    expect(getComputedStyle(control).borderColor).toBe(selectedColor);
+});
+test('disabled control uses disabled background and border colors', async () => {
+    render(html `<w-radio value="alpha" disabled>Alpha</w-radio>`);
+    const radio = document.querySelector('w-radio');
+    await radio.updateComplete;
+    const control = radio.shadowRoot?.querySelector('.control');
+    if (!control) {
+        throw new Error('Expected radio control element to exist');
+    }
+    const bgSwatch = document.createElement('div');
+    bgSwatch.style.backgroundColor = 'var(--w-s-color-background-disabled-subtle)';
+    document.body.append(bgSwatch);
+    const disabledBg = getComputedStyle(bgSwatch).backgroundColor;
+    bgSwatch.remove();
+    const borderSwatch = document.createElement('div');
+    borderSwatch.style.borderColor = 'var(--w-s-color-border-disabled)';
+    document.body.append(borderSwatch);
+    const disabledBorder = getComputedStyle(borderSwatch).borderColor;
+    borderSwatch.remove();
+    const controlStyle = getComputedStyle(control);
+    expect(controlStyle.backgroundColor).toBe(disabledBg);
+    expect(controlStyle.borderColor).toBe(disabledBorder);
+});
+test('reflects disabled state changes and updates tabIndex', async () => {
+    render(html `<w-radio value="alpha">Alpha</w-radio>`);
+    const radio = document.querySelector('w-radio');
+    await radio.updateComplete;
+    expect(radio.getAttribute('aria-disabled')).toBe('false');
+    expect(radio.tabIndex).toBe(0);
+    radio.checked = true;
+    await radio.updateComplete;
+    expect(radio.tabIndex).toBe(0);
+    radio.disabled = true;
+    await radio.updateComplete;
+    expect(radio.getAttribute('aria-disabled')).toBe('true');
+    expect(radio.tabIndex).toBe(-1);
+    radio.disabled = false;
+    await radio.updateComplete;
+    expect(radio.getAttribute('aria-disabled')).toBe('false');
+    expect(radio.tabIndex).toBe(0);
+});
+test('focuses the host element', async () => {
+    render(html `<w-radio value="alpha">Alpha</w-radio>`);
+    const radio = document.querySelector('w-radio');
+    await radio.updateComplete;
+    radio.focus();
+    await expect.poll(() => document.activeElement).toBe(radio);
+});
+test('associates selected value with form submission', async () => {
+    render(html `
+    <form>
+      <w-radio name="choice" value="alpha">Alpha</w-radio>
+      <w-radio name="choice" value="beta">Beta</w-radio>
+    </form>
+  `);
+    const form = document.querySelector('form');
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await radios[0].updateComplete;
+    let data = new FormData(form);
+    expect(data.get('choice')).toBeNull();
+    radios[0].click();
+    await radios[0].updateComplete;
+    data = new FormData(form);
+    expect(data.get('choice')).toBe('alpha');
+    radios[1].click();
+    await radios[1].updateComplete;
+    expect(radios[0].checked).toBe(false);
+    expect(radios[1].checked).toBe(true);
+    data = new FormData(form);
+    expect(data.get('choice')).toBe('beta');
+});
+test('standalone radios with same name are mutually exclusive', async () => {
+    render(html `
+    <w-radio name="group" value="one">One</w-radio>
+    <w-radio name="group" value="two">Two</w-radio>
+  `);
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await radios[0].updateComplete;
+    radios[0].click();
+    await radios[0].updateComplete;
+    expect(radios[0].checked).toBe(true);
+    expect(radios[1].checked).toBe(false);
+    radios[1].click();
+    await radios[1].updateComplete;
+    expect(radios[0].checked).toBe(false);
+    expect(radios[1].checked).toBe(true);
+});
+test('standalone radios with same name use roving tab order', async () => {
+    render(html `
+    <w-radio name="group" value="one">One</w-radio>
+    <w-radio name="group" value="two">Two</w-radio>
+    <w-radio name="group" value="three">Three</w-radio>
+  `);
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await Promise.all(radios.map((radio) => radio.updateComplete));
+    expect(radios[0].tabIndex).toBe(0);
+    expect(radios[1].tabIndex).toBe(-1);
+    expect(radios[2].tabIndex).toBe(-1);
+    radios[2].click();
+    await Promise.all(radios.map((radio) => radio.updateComplete));
+    expect(radios[0].tabIndex).toBe(-1);
+    expect(radios[1].tabIndex).toBe(-1);
+    expect(radios[2].tabIndex).toBe(0);
+});
+test('arrow keys move selection between standalone radios with same name', async () => {
+    render(html `
+    <w-radio name="group" value="one">One</w-radio>
+    <w-radio name="group" value="two">Two</w-radio>
+    <w-radio name="group" value="three">Three</w-radio>
+  `);
+    const radios = Array.from(document.querySelectorAll('w-radio'));
+    await Promise.all(radios.map((radio) => radio.updateComplete));
+    radios[0].focus();
+    radios[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    await Promise.all(radios.map((radio) => radio.updateComplete));
+    expect(radios[0].checked).toBe(false);
+    expect(radios[1].checked).toBe(true);
+    expect(radios[1].tabIndex).toBe(0);
+    await expect.poll(() => document.activeElement).toBe(radios[1]);
+});
+test('required radio reports validity based on checked state', async () => {
+    render(html `<w-radio name="choice" value="alpha" required>Alpha</w-radio>`);
+    const radio = document.querySelector('w-radio');
+    await radio.updateComplete;
+    await expect.poll(() => radio.reportValidity()).toBe(false);
+    expect(radio.validationMessage).not.toBe('');
+    expect(radio.invalid).toBe(true);
+    radio.click();
+    await radio.updateComplete;
+    await expect.poll(() => radio.reportValidity()).toBe(true);
+    expect(radio.invalid).toBe(false);
+});

package/dist/packages/radio/react.d.ts

@@ -0,0 +1,2 @@
+import { WRadio } from './radio.js';
+export declare const Radio: import("@lit/react").ReactWebComponent<WRadio, {}>;

package/dist/packages/radio/react.js

@@ -0,0 +1,11 @@
+import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
+import React from 'react';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Radio = createComponent({
+    tagName: 'w-radio',
+    elementClass: Component,
+    react: React,
+});

package/dist/packages/radio/required-validator.d.ts

@@ -0,0 +1,11 @@
+import type { Validator } from './form-associated-element';
+export interface RequiredValidatorOptions {
+    /** This is a cheap way for us to get translation strings for the user without having proper translations. */
+    validationElement?: HTMLSelectElement | HTMLInputElement;
+    /**
+     * The property to check if its not null-ish. For most elements this will be "value".
+     * For "checkbox" for example it will be "checked"
+     */
+    validationProperty?: string;
+}
+export declare const RequiredValidator: (options?: RequiredValidatorOptions) => Validator;

package/dist/packages/radio/required-validator.js

@@ -0,0 +1,34 @@
+export const RequiredValidator = (options = {}) => {
+    let { validationElement, validationProperty } = options;
+    if (!validationElement) {
+        validationElement = Object.assign(document.createElement('input'), { required: true });
+    }
+    if (!validationProperty) {
+        validationProperty = 'value';
+    }
+    const obj = {
+        observedAttributes: ['required'],
+        message: validationElement.validationMessage, // @TODO: Add a translation.
+        checkValidity(element) {
+            const validity = {
+                message: '',
+                isValid: true,
+                invalidKeys: [],
+            };
+            const isRequired = element.required ?? element.hasAttribute('required');
+            // Always true if the element isn't required.
+            if (!isRequired) {
+                return validity;
+            }
+            const value = element[validationProperty];
+            const isEmpty = !value;
+            if (isEmpty) {
+                validity.message = typeof obj.message === 'function' ? obj.message(element) : obj.message || '';
+                validity.isValid = false;
+                validity.invalidKeys.push('valueMissing');
+            }
+            return validity;
+        },
+    };
+    return obj;
+};

package/dist/packages/radio/slot.d.ts

@@ -0,0 +1,20 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** A reactive controller that determines when slots exist. */
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleSlotChange;
+}
+/**
+ * Given a list of nodes, this function iterates over all of them and returns the concatenated
+ * HTML as a string. This is useful for getting the HTML that corresponds to a slot’s assigned nodes (since we can't use slot.innerHTML as an alternative).
+ * @param nodes - The list of nodes to iterate over.
+ * @param callback - A function that can be used to customize the HTML output for specific types of nodes. If the function returns undefined, the default HTML output will be used.
+ */
+export declare function getInnerHTML(nodes: Iterable<Node>, callback?: (node: Node) => string | undefined): string;

package/dist/packages/radio/slot.js

@@ -0,0 +1,71 @@
+/** A reactive controller that determines when slots exist. */
+export class HasSlotController {
+    constructor(host, ...slotNames) {
+        this.slotNames = [];
+        this.handleSlotChange = (event) => {
+            const slot = event.target;
+            if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
+                this.host.requestUpdate();
+            }
+        };
+        (this.host = host).addController(this);
+        this.slotNames = slotNames;
+    }
+    hasDefaultSlot() {
+        return [...this.host.childNodes].some((node) => {
+            if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== '') {
+                return true;
+            }
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node;
+                const tagName = el.tagName.toLowerCase();
+                // Ignore visually hidden elements since they aren't rendered
+                if (tagName === 'w-visually-hidden') {
+                    return false;
+                }
+                // If it doesn't have a slot attribute, it's part of the default slot
+                if (!el.hasAttribute('slot')) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }
+    hasNamedSlot(name) {
+        return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+    }
+    test(slotName) {
+        return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+    }
+    hostConnected() {
+        this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);
+    }
+    hostDisconnected() {
+        this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);
+    }
+}
+/**
+ * Given a list of nodes, this function iterates over all of them and returns the concatenated
+ * HTML as a string. This is useful for getting the HTML that corresponds to a slot’s assigned nodes (since we can't use slot.innerHTML as an alternative).
+ * @param nodes - The list of nodes to iterate over.
+ * @param callback - A function that can be used to customize the HTML output for specific types of nodes. If the function returns undefined, the default HTML output will be used.
+ */
+export function getInnerHTML(nodes, callback) {
+    let html = '';
+    for (const node of nodes) {
+        if (callback) {
+            const customHTML = callback(node);
+            if (customHTML !== undefined) {
+                html += customHTML;
+                continue;
+            }
+        }
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            html += node.outerHTML;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            html += node.textContent;
+        }
+    }
+    return html;
+}

package/dist/packages/radio/watch.d.ts

@@ -0,0 +1,26 @@
+import type { LitElement } from 'lit';
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    /**
+     * If true, will only start watching after the initial update/render
+     */
+    waitUntilFirstUpdate?: boolean;
+}
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

package/dist/packages/radio/watch.js

@@ -0,0 +1,39 @@
+/**
+ * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an
+ * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the
+ * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.
+ *
+ * Usage:
+ *
+ * @watch('propName')
+ * handlePropChange(oldValue, newValue) {
+ *   ...
+ * }
+ */
+export function watch(propertyName, options) {
+    const resolvedOptions = {
+        waitUntilFirstUpdate: false,
+        ...options,
+    };
+    return (proto, decoratedFnName) => {
+        // @ts-expect-error - update is a protected property
+        const { update } = proto;
+        const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+        // @ts-expect-error - update is a protected property
+        proto.update = function (changedProps) {
+            watchedProperties.forEach((property) => {
+                const key = property;
+                if (changedProps.has(key)) {
+                    const oldValue = changedProps.get(key);
+                    const newValue = this[key];
+                    if (oldValue !== newValue) {
+                        if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                            this[decoratedFnName](oldValue, newValue);
+                        }
+                    }
+                }
+            });
+            update.call(this, changedProps);
+        };
+    };
+}

package/dist/packages/radio-group/locales/da/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/radio-group/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"radio-group.validation.required\":[\"Vælg en mulighed.\"],\"radio-group.label.optional\":[\"Valgfri\"]}");

package/dist/packages/radio-group/locales/en/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/radio-group/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"radio-group.validation.required\":[\"Please select an option.\"],\"radio-group.label.optional\":[\"Optional\"]}");

package/dist/packages/radio-group/locales/fi/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/radio-group/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"radio-group.validation.required\":[\"Valitse vaihtoehto.\"],\"radio-group.label.optional\":[\"Valinnainen\"]}");

package/dist/packages/radio-group/locales/nb/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/radio-group/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"radio-group.validation.required\":[\"Velg et alternativ.\"],\"radio-group.label.optional\":[\"Valgfri\"]}");

package/dist/packages/radio-group/locales/sv/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/radio-group/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"radio-group.validation.required\":[\"Välj ett alternativ.\"],\"radio-group.label.optional\":[\"Valfritt\"]}");

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,61 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+
+  .form-control {
+    position: relative;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .label {
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+    font-weight: 700;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-smoothing: grayscale;
+    cursor: pointer;
+    padding-bottom: 16px;
+    color: var(--w-s-color-text);
+    display: block;
+  }
+
+  .optional {
+    font-weight: 400;
+    color: var(--w-s-color-text-subtle);
+    margin-inline-start: 0.5rem;
+  }
+
+  .radio-group-required .label::after {
+    content: var(--wa-form-control-required-content);
+    margin-inline-start: var(--wa-form-control-required-content-offset);
+  }
+
+  [part~='form-control-input'] {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    gap: 16px;
+  }
+
+  /* Help text */
+  [part~='help-text'] {
+    margin-block-start: 16px;
+    font-size: var(--w-font-size-xs);
+    line-height: var(--w-line-height-xs);
+    color: var(--w-s-color-text-subtle);
+  }
+
+  :host([disabled]) [part~='help-text'] {
+    color: var(--w-s-color-text-disabled);
+  }
+
+  [part~='help-text'].error {
+    color: var(--w-s-color-text-negative);
+  }
+
+`;

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

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

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

@@ -0,0 +1,118 @@
+import { i18n } from '@lingui/core';
+import { userEvent } from '@vitest/browser/context';
+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.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>
+      `);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        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>
+      `);
+            await expect(page).toHaveNoAxeViolations();
+        });
+        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');
+            group.reportValidity?.();
+            await expect(page).toHaveNoAxeViolations();
+        });
+    });
+    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();
+        });
+    });
+    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>
+      `);
+            await expect.element(page.getByRole('radiogroup', { name: 'Preferences' })).toHaveAccessibleDescription('Select one');
+        });
+        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>
+      `);
+            await expect.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 () => {
+            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'));
+            await radios[0].updateComplete;
+            radios[0].focus();
+            await expect.poll(() => document.activeElement).toBe(radios[0]);
+            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 expect.poll(() => radios[2].checked).toBe(true);
+            await expect.poll(() => document.activeElement).toBe(radios[2]);
+        });
+        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'));
+            await radios[0].updateComplete;
+            radios[0].focus();
+            await expect.poll(() => document.activeElement).toBe(radios[0]);
+            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 expect.poll(() => radios[0].checked).toBe(true);
+            await expect.poll(() => document.activeElement).toBe(radios[0]);
+        });
+    });
+});