Radio Groups

Axe will throw a critical error: "Ensures elements with an ARIA role that require child roles contain them". The ion-radio-group has a role of radio but its ion-radio items need to be associated with the ion-radio-group.

Before

<ion-radio-group value="grape">
    <ion-list-header>
        <ion-label>Toppings</ion-label>
    </ion-list-header>    
    <ion-item>
        <ion-label>Sprinkles</ion-label>
        <ion-radio slot="start" color="success" value="sprinkles"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Marshmallows</ion-label>
        <ion-radio slot="start" color="tertiary" value="marshmallows"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Cherries</ion-label>
        <ion-radio slot="start" color="danger" value="cherries"></ion-radio>
    </ion-item>
</ion-radio-group>

To associate the group to the radio buttons we set the aria-owns property to the list of ion-radio elements. We also need to provide a parent for the list of ion-item elements by adding an ion-list.

After

<ion-radio-group aria-owns="rad1 rad2 rad3" value="grape">
    <ion-list-header>
        <ion-label>Toppings</ion-label>
    </ion-list-header>
    <ion-list>
    <ion-item>
        <ion-label>Sprinkles</ion-label>
        <ion-radio id="rad1" slot="start" color="success" value="sprinkles"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Marshmallows</ion-label>
        <ion-radio id="rad2" slot="start" color="tertiary" value="marshmallows"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Cherries</ion-label>
        <ion-radio id="rad3" slot="start" color="danger" value="cherries"></ion-radio>
    </ion-item>
    </ion-list>
</ion-radio-group>