Ловушка фокусировки во всплывающем модальном режиме только IOS voiceOver - PullRequest
Новая
       16

Ловушка фокусировки во всплывающем модальном режиме только IOS voiceOver

0 голосов
/ 30 ноября 2018

У меня есть кликабельная ссылка на родительский компонент, который запустит пользовательский модал поверх него.Я фокусируюсь на большой большой проблеме в модале только на сафари ios VoiceOver.При перелистывании основное внимание уделяется родительской кликабельной ссылке.Как я могу перехватить фокус только на модальном и полностью отключить родительский компонент после модального всплывающего окна.

Мое приложение на Angular 5

Вот модальный шаблон 

<div class="modal-backdrop modal-open fade in" data-backdrop="static" data-keyboard="false"></div>
<div class="modal fade in"  id="confirmModal" role="dialog" aria-labelledby="modal-title" data-keyboard="false"  (keydown.escape)="cancel()"  >
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" id="btnClose" class="fa fa-times close" data-dismiss="modal" aria-label="Close" (tap)="cancel()"  (keydown.spacebar)="cancel()" (click)="cancel($event)" (keydown.space)="cancel()" (keydown.enter)="cancel();" (keydown.tab)="onTab()" (keydown.shift.tab)="onShiftTab()" (keydown.escape)="cancel()" ></button>                 
            </div>
            <div class="modal-footer">
                <button type="button" id="btnDefault" class="btn btn-default" data-dismiss="modal" (tap)="cancel()"  (keydown.enter)="cancel()" (click)="cancel($event)" (keydown.spacebar)="cancel()"  (keydown.space)="cancel()" (keydown.tab)="onTab()" (keydown.shift.tab)="onShiftTab()" (keydown.escape)="cancel()" attr.aria-label="cancelbutton">Cancel</button>
                <button type="button" id="btnPrimary" class="btn btn-primary"  (tap)="onOK()" (keydown.enter)="onOK()" (click)="onOK($event)" (keydown.spacebar)="cancel()" (keydown.space)="onOK()" (keydown.tab)="onTab()" (keydown.shift.tab)="onShiftTab()" (keydown.escape)="cancel()" attr.aria-label="buttonLabel">Confirm</button>
            </div>
        </div>      
</div>

1 Ответ

0 голосов
/ 30 ноября 2018

В общем, вы должны организовать свой HTML как 

<body>
  <div>
    <!-- your main page -->
  </div>
  <div style="visibility:hidden">
    <!-- your dialog -->
  </div>
</body>

, чтобы диалог был «родным братом» главной страницы.Когда ваш диалог отображается, вы можете добавить aria-hidden="true" на главную страницу, и это полностью «скроет» фоновую страницу от программ чтения с экрана.VoiceOver не позволит вам провести пальцем, чтобы перейти на фоновую страницу, если она скрыта. 

<body>
  <div aria-hidden="true">
    <!-- your main page -->
  </div>
  <div style="visibility:visible">
    <!-- your dialog -->
  </div>
</body>

Примечание использование атрибута CSS visibility в диалоговом окне.См. https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/ для получения дополнительной информации об этом.Посмотрите на заголовок «Дополнительные ошибки, которые нужно остерегаться».

Также обратите внимание, что вам все еще нужно перехватить фокус клавиатуры в диалоговом окне.aria-hidden не влияет на клавиатуру, он взаимодействует только с программой чтения с экрана.Для этого вы можете использовать inert атрибут и полизаполнение.См. Вышеупомянутый блог для информации об этом тоже.

...