Accessibility Issue: The narrator announces the selected radio button as "non-selected" when...

Working on the Angular 16 reactive form, where we are creating the p-radiobutton dynamically. When the user uses the screen-reader to select a radio button, the JAWS/Narrator announces it as non-selected even though it is selected. In the accessibility tree, we can see the checked property shows as false when we select the radio button via Spacebar/Enter.

Accessibility Tree screenshot

I tried aria-checked attributes, checked attributes, ChangeDetector etc. but it is still not working. My expectation is when a user is using a screen-reader and on selecting the radio button using Spacebar/Enter keyboard, it should announce it as "Marketing radio button selected 1of 2".

Code

<div class="card flex justify-content-center">
<form class="flex flex-column gap-3" [formGroup]="formGroup">
<div *ngFor="let category of categories" class="field-checkbox">
<p-radioButton
[inputId]="category.key"
[value]="category"
formControlName="selectedCategory"
/>
<label [for]="category.key" class="ml-2"> {{ category.name }} </label>
</div>
</form>
</div>

Continue reading...