Skip to main content

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.

Ionic Framework v7+

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 value="sprinkles"></ion-radio>
    </ion-item>

    <ion-item>
        <ion-label>Marshmallows</ion-label>
        <ion-radio 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>

After

<ion-radio-group>
   <ion-list-header>
      <ion-label>Toppings</ion-label>
   </ion-list-header>
   <ion-list>
      <ion-item>
         <ion-radio value="sprinkles">Sprinkles</ion-radio>
      </ion-item>

      <ion-item>
         <ion-radio value="marshmallows">Marshmallows</ion-radio>
      </ion-item>

      <ion-item>
         <ion-radio value="cherries">Cherries</ion-radio>
      </ion-item>
   </ion-list>
</ion-radio-group>

Ionic Framework v6

Version 6 of the framework is a little harder to fix accessibility of 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">
    <ion-list-header>
        <ion-label>Toppings</ion-label>
    </ion-list-header>
    <ion-list>
       <ion-item>
          <ion-label>Sprinkles</ion-label>
          <ion-radio id="rad1" value="sprinkles"></ion-radio>
       </ion-item>

       <ion-item>
          <ion-label>Marshmallows</ion-label>
          <ion-radio id="rad2" value="marshmallows"></ion-radio>
       </ion-item>

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