title: ngFor with modal window for each item in correct order for screen reader
body: <p>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.</p>
  <p><a href="http://www.bsca.com/fad" rel="nofollow noreferrer">www.bsca.com/fad</a></p>
  <pre><code>&lt;button
       role=&quot;button&quot;
       *ngFor=&quot;let grid of grids; let i = index&quot;
       [ngClass]=&quot;getTileClassName()&quot;
       [class.selected]=&quot;selected_type === grid.title&quot;
       (click)=&quot;selectProvider($event, grid, wcmtpl)&quot;
       (keyup)=&quot;handleTabIndexForGrid($event)&quot;
       type=&quot;button&quot;
       class=&quot;button-grid-item&quot;
       aria-haspopup=&quot;true&quot;
       aria-expanded=&quot;false&quot;
       [attr.id]=&quot;grid.value&quot;
       (keydown)=&quot;onGridSelect(grid.title)&quot;&gt;
           &lt;span class=&quot;label-wrap&quot;&gt;
              &lt;span (keydown)=&quot;handleTabIndexForGrid($event)&quot; class=&quot;button-grid-label&quot;&gt;
                 {{ grid.title }}
              &lt;/span&gt;
            &lt;/span&gt;
  &lt;/button&gt;
  
  &lt;div
     #memberConfirmModal
     role=&quot;dialog&quot;
     (onfocusout)=&quot;closePopupOnFocusout($event)&quot;
     (keyup)=&quot;closePopup($event)&quot;
     id=&quot;memberConfirmModal&quot;
     autofocus
     z-index=&quot;9999&quot;
     aria-hidden=&quot;false&quot;
     [class.show]=&quot;selected_type&quot;
     [ngStyle]=&quot;alert_style&quot;
     tabindex=&quot;-1&quot;&gt;
              &lt;button
                #closeButtonModal
                class=&quot;close close-button-margin&quot;
                (keydown)=&quot;onShiftTabFocusChange($event, noMbrLogin)&quot;
                aria-label=&quot;Close dialog popup&quot;
                tabindex=&quot;0&quot;
              &gt;
              &lt;/button&gt;
              &lt;div id=&quot;confirmDialog&quot; class=&quot;wrapper&quot;&gt;
                &lt;fieldset class=&quot;mb-2&quot;&gt;
                  &lt;legend class=&quot;mb-2&quot;&gt;
                    &lt;span tab-index=&quot;0&quot; class=&quot;body-regular&quot; #messageConfirmation&gt;
                      {{ &quot;bsc_member&quot; | langtranslate }}
                      &lt;span class=&quot;sr-only&quot;
                        &gt;{{ &quot;Note&quot; | langtranslate }}:
                        {{ &quot;choosing_a_provider&quot; | langtranslate }}
                      &lt;/span
                    &gt;
                    &lt;/span&gt;
                  &lt;/legend&gt;
                  &lt;button
                    role=&quot;button&quot;
                    (click)=&quot;goTo(false)&quot;
                    aria-hidden=&quot;false&quot;
                    type=&quot;button&quot;
                    #mbrLogin
                    id=&quot;mbrLogin&quot;
                    tabindex=&quot;0&quot;
                    class=&quot;btn-sm btn-primary inline&quot;
                    gtm-track-click=&quot;{'eventCategory': 'Find a Doctor','eventAction': 'Authentication','eventLabel': 'Authentication Prompt: Yes I am a member','eventNonInteraction': 'false','event': 'eventTracker'}&quot;
                  &gt;
                    {{ &quot;yes&quot; | langtranslate }}
                  &lt;/button&gt;
                  &lt;button
                    role=&quot;button&quot;
                    (click)=&quot;goTo(true)&quot;
                    aria-hidden=&quot;false&quot;
                    (keydown)=&quot;handleKeyEventsForNO($event)&quot;
                    (blur)=&quot;onTabFocusChange($event, closeButtonModal)&quot;
                    type=&quot;button&quot;
                    id=&quot;nonMember&quot;
                    tabindex=&quot;0&quot;
                    #noMbrLogin
                    class=&quot;btn-sm btn-primary inline&quot;
                    gtm-track-click=&quot;{'eventCategory': 'Find a Doctor','eventAction': 'Authentication','eventLabel': 'Authentication Prompt: No I am not a member','eventNonInteraction': 'false','event': 'eventTracker'}&quot;
                  &gt;
                    {{ &quot;no&quot; | langtranslate }}
                  &lt;/button&gt;
                &lt;/fieldset&gt;
                &lt;p class=&quot;mb-0&quot;&gt;
                  &lt;span id=&quot;confirmDialogNote&quot; aria-hidden=&quot;true&quot; hidden
                    &gt;{{ &quot;note_text&quot; | langtranslate }}
                    {{ &quot;choosing_a_provider&quot; | langtranslate }}
                    {{ &quot;press_tab&quot; | langtranslate }}&lt;/span
                  &gt;
                  &lt;span class=&quot;text-uppercase&quot;&gt;{{ &quot;note&quot; | langtranslate }}&lt;/span&gt;
                  {{ &quot;choosing_a_provider&quot; | langtranslate }}
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>