I have an accessibility bug that is Users who rely on screen readers are getting impacted as NVDA is narrating information multiple times for multiple buttons present in the page, while navigating using down arrow key. There is a button tag inside there is other tags. But screen reader reading other tags as button, and I need to fix that.
Expecting that Screen reader show narrate only Button one time only not to repeat again with other tags.
<button class="btn" [ngClass]="{'border-color-Red': answer?.AnswerId == 1,
'border-color-Orange': answer?.AnswerId == 2,
'border-color-Yellow': answer?.AnswerId == 3,
'border-color-LightGreen': answer?.AnswerId == 4,
'border-color-Green': answer?.AnswerId == 5}" (click)="selectAnswer(answer)">
<section class="d-flex">
<section class="header" [ngClass]="{'color-Red': assesment?.SelectedAnswerId == 1 && answer?.AnswerId == 1,
'color-Orange': assesment?.SelectedAnswerId == 2 && answer?.AnswerId == 2,
'color-Yellow': assesment?.SelectedAnswerId == 3 && answer?.AnswerId == 3,
'color-LightGreen': assesment?.SelectedAnswerId == 4 && answer?.AnswerId == 4,
'color-Green': assesment?.SelectedAnswerId == 5 && answer?.AnswerId == 5,
'color-pink': answer?.AnswerId == 1,
'color-light-orange':answer?.AnswerId == 2,
'color-light-yellow':answer?.AnswerId == 3,
'color-light-yellowgreen':answer?.AnswerId == 4,
'color-green-light':answer?.AnswerId == 5}">
<h6 class="font-caption-alt">{{answer.AnswerId}} = {{answer.Answer}}</h6>
</section>
<section class="body">
<p>{{answer.AnswerDesciption}}</p>
</section>
<section class="footer">
<label class="font-caption">
<input type="radio" id="answer-{{assesment?.Id}}-select-{{answer.Id}}"
[attr.aria-label]="isSelectedAnswer(assesment, answer?.AnswerId)?'Selected Radio':'Not Selected Radio'"
name="{{assesment?.Id}}-select" (click)="selectAnswer(assesment,answer)"
[checked]="isSelectedAnswer(assesment, answer?.AnswerId)" tabindex="0" />
<label for="answer-{{assesment?.Id}}-select-{{answer.Id}}"></label>
Select
</label>
</section>
</section>
</button>