Having issues with the screen reading order after dialog modal window is open. Have a set of button tiles and when one is clicked a popup occurs. The tiles are used with ngFor and then modal box comes after. When you tab to the tile and click enter then use the down arrow it wont read the dialog box until after the last tile. Is there any way to insert the dialog box after each ngFor item? I have tried a few things, but nothing is working for me.
<button
role="button"
*ngFor="let grid of grids; let i = index"
[ngClass]="getTileClassName()"
[class.selected]="selected_type === grid.title"
(click)="selectProvider($event, grid, wcmtpl)"
(keyup)="handleTabIndexForGrid($event)"
type="button"
class="button-grid-item"
aria-haspopup="true"
aria-expanded="false"
[attr.id]="grid.value"
(keydown)="onGridSelect(grid.title)">
<span class="label-wrap">
<span (keydown)="handleTabIndexForGrid($event)" class="button-grid-label">
{{ grid.title }}
</span>
</span>
</button>
<div
#memberConfirmModal
role="dialog"
(onfocusout)="closePopupOnFocusout($event)"
(keyup)="closePopup($event)"
id="memberConfirmModal"
autofocus
z-index="9999"
aria-hidden="false"
[class.show]="selected_type"
[ngStyle]="alert_style"
tabindex="-1">
<button
#closeButtonModal
class="close close-button-margin"
(keydown)="onShiftTabFocusChange($event, noMbrLogin)"
aria-label="Close dialog popup"
tabindex="0"
>
</button>
<div id="confirmDialog" class="wrapper">
<fieldset class="mb-2">
<legend class="mb-2">
<span tab-index="0" class="body-regular" #messageConfirmation>
{{ "bsc_member" | langtranslate }}
<span class="sr-only"
>{{ "Note" | langtranslate }}:
{{ "choosing_a_provider" | langtranslate }}
</span
>
</span>
</legend>
<button
role="button"
(click)="goTo(false)"
aria-hidden="false"
type="button"
#mbrLogin
id="mbrLogin"
tabindex="0"
class="btn-sm btn-primary inline"
gtm-track-click="{'eventCategory': 'Find a Doctor','eventAction': 'Authentication','eventLabel': 'Authentication Prompt: Yes I am a member','eventNonInteraction': 'false','event': 'eventTracker'}"
>
{{ "yes" | langtranslate }}
</button>
<button
role="button"
(click)="goTo(true)"
aria-hidden="false"
(keydown)="handleKeyEventsForNO($event)"
(blur)="onTabFocusChange($event, closeButtonModal)"
type="button"
id="nonMember"
tabindex="0"
#noMbrLogin
class="btn-sm btn-primary inline"
gtm-track-click="{'eventCategory': 'Find a Doctor','eventAction': 'Authentication','eventLabel': 'Authentication Prompt: No I am not a member','eventNonInteraction': 'false','event': 'eventTracker'}"
>
{{ "no" | langtranslate }}
</button>
</fieldset>
<p class="mb-0">
<span id="confirmDialogNote" aria-hidden="true" hidden
>{{ "note_text" | langtranslate }}
{{ "choosing_a_provider" | langtranslate }}
{{ "press_tab" | langtranslate }}</span
>
<span class="text-uppercase">{{ "note" | langtranslate }}</span>
{{ "choosing_a_provider" | langtranslate }}
</p>
</div>
</div>
</div>
