auro-radio: Required attribute always displays radios as error

[B-E-A-F]

Please verify the version of auro-radio you have installed

2.2.2

Please describe the bug

1. Add auro radio to your project
2. Set the required attribute on your auro-radio-group to true
3. Select an auro radio
4. See that the radio group is highlighted in red

Reproducing the error

This issue cannot be reproduced on the Auro docsite

Expected behavior

When selecting an auro radio item it should not always highlight in red after selecting a radio item.

What browsers are you seeing the problem on?

Chrome

Additional context

Was not able to reproduce this in the docs site, however, copy pasting the "required" code example you will see the same issue. I reproduced this on both an existing project, as well as a new project.

I am unable to upgrade to @aurodesignsystem/auro-radio until this is fixed. I tried every version, and I still got the same issue on all versions.

Before clicking:

After clicking:

Not able to reproduce on "@alaskaairux/auro-radio": "^1.6.2"

Exit criteria

The issue can be closed once the error is corrected, or the docs have been updated to correctly represent how the required attribute should work.

[jordanjones243]

@ArcherScript Can you reconfirm which version of auro-radio you have installed? The current version is 2.2.2 and that does not match up with what you listed.

[jordanjones243]

@ArcherScript Would you also be able to send a screenshot of how you are using auro-radio? It is hard to say whether this is a bug or implementation error since this is not reproducible on the docsite.

[B-E-A-F]

I can share the code file of how we are implementing auro-radio. Upgrading to the aurodesignsystem version is the only thing that changed when I started running into issues. Also, I've updated the original issue to the correct version with the issues.

<script context="module">
    let counter = 0;
</script>

<script lang="ts">
    // TODO: We can't upgrade to aurodesignsystem/auro-radio-group because of an outstanding bug
    // https://github.com/AlaskaAirlines/auro-radio/issues/125
    import '@alaskaairux/auro-radio';
    export let values: (string | boolean)[];
    export let options: string[];
    export let name;
    export let selected = values[0];

    const id = `radiogroup-${counter}`;
    counter++;

    function handleInput(e) {
        selected = values.find(val => e.target.value === val);
    }
</script>

<auro-radio-group required on:input={handleInput} data-testid={name}>
    <div slot="legend">
        <slot name="label" />
    </div>
    {#each values as value, i}
        <auro-radio
            id="{id}-{i}"
            {name}
            data-testid="{name}-{i}"
            {value}
            checked={value === selected}><span>{options[i]}</span></auro-radio
        >
    {/each}
</auro-radio-group>

<style>
    auro-radio span {
        line-height: 1.625;
        padding-top: 0.3rem;
        display: inline-block;
    }

    auro-radio {
        margin-bottom: 1rem;
    }
</style>

[jordanjones243]

Can you tell me what validity state your radio-group is in when this error occurs? You should be able to see the validity attribute on the component in the DOM. @ArcherScript

[B-E-A-F]

Validated that it is initialized at "valueMissing", and updates to "valueMissing" upon selection.

validity="valueMissing"

Here's a code snippet of its use:

        <RadioGroup
            name="language"
            options={['English', 'Español']}
            values={['en', 'es']}
            bind:selected
            >
            <p slot="label" class="select-lang">
                {$_('language_selector')}
            </p>
        </RadioGroup>

[jordanjones243]

During testing/bug exploration, I have created a dynamic example where radio buttons are created and inserted on JavaScript execution. I was able to reproduce the error documented in this issue and can verify that this is a valid bug. The example will be added to the docsite and when the bug fix is released.