fix: fast-radio elements with the same name should be grouped when validating

[radium-v]

🐛 Bug Report

Multiple required <fast-radio> elements with the same name attribute aren't grouped together when checking form validity. Each radio is treated as an independent form element.

💻 Repro or Code Sample

This test adds two required <fast-radio> elements to a form, then checks their validity.

test("should be invalid when the `required` attribute is present and no value is selected on multiple radios", async () => {
        await root.evaluate(node => {
            node.innerHTML = /* html */ `
            <form>
                <fast-radio required name="test" value="test">test</fast-radio>
                <fast-radio required name="test" value="test2">test2</fast-radio>
            </form>
            `;
        });

        const form = page.locator("form");

        const firstRadio = page.locator("fast-radio").nth(0);
        const secondRadio = page.locator("fast-radio").nth(1);

        await expect(firstRadio).not.toBeChecked();

        await expect(secondRadio).not.toBeChecked();

        await expect(firstRadio).toHaveJSProperty("validity.valueMissing", true);

        await expect(secondRadio).toHaveJSProperty("validity.valueMissing", true);

        expect(await form.evaluate((node: HTMLFormElement) => node.checkValidity())).toBe(
            false
        );

        firstRadio.evaluate(node => {
            node.dispatchEvent(new MouseEvent("click"));
        });

        await expect(firstRadio).toBeChecked();

        await expect(secondRadio).not.toBeChecked();

        await expect(firstRadio).toHaveJSProperty("validity.valueMissing", false);

        await expect(secondRadio).toHaveJSProperty("validity.valueMissing", false);

        expect(await form.evaluate((node: HTMLFormElement) => node.checkValidity())).toBe(
            true
        );

        await secondRadio.click();

        await expect(firstRadio).not.toBeChecked();

        await expect(secondRadio).toBeChecked();

        await expect(firstRadio).toHaveJSProperty("validity.valueMissing", false);

        await expect(secondRadio).toHaveJSProperty("validity.valueMissing", false);

        expect(await form.evaluate((node: HTMLFormElement) => node.checkValidity())).toBe(
            true
        );

        await form.evaluate((node: HTMLFormElement) => {
            node.reset();
        });

        await expect(firstRadio).not.toBeChecked();

        await expect(secondRadio).not.toBeChecked();

        await expect(firstRadio).toHaveJSProperty("validity.valueMissing", true);

        await expect(secondRadio).toHaveJSProperty("validity.valueMissing", true);

        expect(await form.evaluate((node: HTMLFormElement) => node.checkValidity())).toBe(
            false
        );
    });

🤔 Expected Behavior

Selecting a required <fast-radio> that's grouped with other radios via name should cause all grouped radios to be valid.

😯 Current Behavior

Each radio is individually selectable, with its own validation. Selecting a radio doesn't deselect others, and each radio marked required reports its own validity state.

[janechu]

Unfortunately @microsoft/fast-components has been deprecated for some time.