Pułapka fokusu w oknie modalnym
Silktide identyfikuje strony zawierające modalne okno dialogowe — wyskakujące okno blokujące interakcję z resztą strony — i prosi o sprawdzenie, czy fokus klawiatury jest prawidłowo zarządzany, gdy okno dialogowe jest otwarte. Jest to ręczna weryfikacja: automatyczne testowanie może wykryć okno dialogowe, ale nie może zaobserwować jego działania podczas otwierania i zamykania.
Dlaczego to jest ważne
Gdy modalne okno dialogowe jest otwarte, strona za nim jest widoczna, ale nieaktywna. Jeśli może opuścić okno dialogowe, użytkownicy klawiatury i przechodzą klawiszem Tab przez treści, których nie mogą zobaczyć ani użyć, odczytują stronę znajdującą się pod spodem bez kontekstu i całkowicie tracą swoje miejsce. Jeśli natomiast fokus nie zostanie przywrócony po zamknięciu okna dialogowego, trafiają na początek strony i muszą wrócić do miejsca, w którym byli.
Jak to naprawić
Otwórz każde okno dialogowe na stronie i zweryfikuj, używając wyłącznie klawiatury:
- Gdy okno dialogowe się otwiera, fokus przechodzi do jego wnętrza — zwykle do pierwszego elementu sterującego lub samego okna dialogowego.
- Naciskanie klawiszy Tab i Shift+Tab powoduje przechodzenie cyklicznie między elementami sterującymi okna dialogowego bez dotarcia do strony znajdującej się za nim.
- Naciśnięcie klawisza Escape zamyka okno dialogowe (w przypadku okien dialogowych, które można zamknąć).
- Gdy okno dialogowe się zamyka, fokus wraca do elementu, który je otworzył.
Jeśli którykolwiek z tych warunków nie jest spełniony, popraw implementację okna dialogowego. Natywny element <dialog> otwierany za pomocą showModal() zapewnia większość tego zachowania automatycznie; w przypadku niestandardowych okien dialogowych należy je zaimplementować skryptowo. Jeśli wszystko działa prawidłowo, wynik.
Jak Silktide to testuje
- Wyszukuje oznaki, że strona zawiera modalne okno dialogowe: natywny element
<dialog>, element zrole="dialog"lubrole="alertdialog", element zaria-modal="true"albo element z typową nazwą klasy w stylu modalnym, który zawiera również elementy sterujące umożliwiające uzyskanie fokusu. - Po znalezieniu któregokolwiek z nich wyświetla jeden prompt do weryfikacji dla strony.
Silktide nie może otworzyć okna dialogowego i obserwować działania fokusu w trakcie działania strony, dlatego ta kontrola nigdy nie kończy się automatycznym niepowodzeniem — prosi o weryfikację.
Rozwiązywanie problemów
Strona nie ma widocznego okna modalnego
Wiele witryn umieszcza znaczniki okna dialogowego na każdej stronie (wyskakujące okno newslettera, okno dialogowe dotyczące plików cookie, ukryta nakładka wyszukiwania), które pojawiają się tylko w określonych warunkach. Prompt nadal ma zastosowanie: zweryfikuj działanie okna dialogowego w stanie, w którym się otwiera. Jeśli znaczniki są pozostałością, której nigdy nie da się otworzyć, rozważ ich usunięcie.
Nasze okna dialogowe pochodzą z biblioteki zewnętrznej
Dobrze znane biblioteki okien dialogowych zwykle prawidłowo zarządzają fokusem, ale konfiguracja i niestandardowa zawartość mogą to zepsuć. Zweryfikuj działanie na własnych stronach, zamiast polegać na dokumentacji biblioteki.