ngFor с модальным окном для каждого элемента в правильном порядке для программы чтения с экрана - PullRequest
Новая
       133

ngFor с модальным окном для каждого элемента в правильном порядке для программы чтения с экрана

0 голосов
/ 09 июля 2020

Проблемы с порядком чтения экрана после открытия модального диалогового окна. Имейте набор плиток кнопок, и при нажатии на них появляется всплывающее окно. Плитки используются с ngFor, а затем следует модальное окно. Когда вы переходите к плитке и нажимаете Enter, затем используйте стрелку вниз, диалоговое окно читается только после последней плитки. Есть ли способ вставить диалоговое окно после каждого элемента ngFor? Я пробовал несколько вещей, но у меня ничего не работает.

www.bsca.com/fad

<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>
...