Switch / Toggle

Sometimes you may want to make a button that can be toggled. An example might be a like button:

Before

<ion-button (click)="liked = !liked" slot="icon">
   <ion-icon *ngIf="liked" name="thumbs-up"></ion-icon>
   <ion-icon *ngIf="!liked" name="thumbs-up-outline"></ion-icon>
</ion-button>

The above example is difficult to understand with a screen reader. To add context here we used role of switch and make sure the toggle state is set using aria-checked.

After

<div role="switch" [attr.aria-checked]="liked">
   <ion-button aria-label="Item is liked" (click)="liked = !liked" slot="icon">
      <ion-icon aria-hidden="true" *ngIf="liked" name="thumbs-up"></ion-icon>
      <ion-icon aria-hidden="true" *ngIf="!liked" name="thumbs-up-outline"></ion-icon>
   </ion-button>
</div>