I've been facing a persistent accessibility issue with the main-component in Angular. This component contains four different templates, but depending on the radio button selection, other templates are displayed. The problem arises when these templates aren't loaded initially causing focus loss and preventing users from using the arrow keys when tabbing through the radio buttons.
Thank you.
main-component.ts
<div>
<form>
<custom-radio-button [value]="'A'" (change)="radioChange('A')">A</custom-radio-button>
<custom-radio-button [value]="'B'" (change)="radioChange('B')">B</custom-radio-button>
<custom-radio-button [value]="'C'" (change)="radioChange('C')">C</custom-radio-button>
<custom-radio-button [value]="'D'" (change)="radioChange('D')">D</custom-radio-button>
</form>
<ng-template *ngIf="selection == 'A'">A</ng-template>
<ng-template *ngIf="selection == 'B'">B</ng-template>
<ng-template *ngIf="selection == 'C'">C</ng-template>
<ng-template *ngIf="selection == 'D'">D</ng-template>
</div>
main-component.ts (has change event)
radioChange(value) {
this.selection = value;
}
Any assistance would be greatly appreciated.