Przywracanie fokusu po zamknięciu warstwy

Gdy otwiera się modal, menu lub szuflada, fokus przenosi się do ich wnętrza. Po zamknięciu należy przywrócić fokus do miejsca, w którym znajdował się użytkownik.

Jeśli zamknięta warstwa pozostawi fokus na usuniętym elemencie, fokus wróci do treści strony. Użytkownik zostaje wtedy zagubiony i nie wie, gdzie się znajduje.

Naprawę należy rozpocząć przed otwarciem: zapisz referencję do elementu, który wywołał warstwę, zwykle document.activeElement.

Po zamknięciu warstwy wywołaj focus() na zapamiętanym elemencie wywołującym, aby użytkownik wrócił dokładnie do miejsca, w którym rozpoczął.

Otwarcie: zapisz element wywołujący i ustaw fokus na warstwie. Zamknięcie: ukryj warstwę i przywróć fokus elementowi wywołującemu. Ta pętla to kontrakt fokusu każdej warstwy, którą można zamknąć. 🔁

Element dialog przeglądarki automatycznie przywraca fokus elementowi otwierającemu po wywołaniu close(), dzięki czemu nie trzeba robić tego ręcznie.

Przywracaj fokus niezależnie od sposobu zamknięcia warstwy: przycisk Zamknij, klawisz Escape i kliknięcie tła powinny przenieść użytkownika z powrotem.

Jeśli element wywołujący został usunięty podczas otwarcia warstwy, przenieś fokus do rozsądnego pobliskiego elementu, nigdy w pustkę.

Użytkownicy myszy, którzy widzą ekran, prawie tego nie zauważają, ale dla użytkowników klawiatury i czytników ekranu brak przywrócenia fokusu może sprawić, że funkcja stanie się nieużyteczna.

Otwórz warstwę klawiszem Enter, zamknij ją klawiszem Escape i sprawdź, czy obramowanie fokusu ponownie pojawia się na przycisku, który ją otworzył.

Traktuj przywracanie fokusu jako część tworzenia każdej nakładki, a nie czynność odkładaną na później. Dodaj je od razu wraz z logiką otwierania i zamykania.

Niestandardowy modal zostaje zamknięty. Dokąd należy przenieść fokus?

Potrafi już Pan zamknąć pełny cykl: zapisać element wywołujący przy otwieraniu, przywrócić do niego fokus przy każdym sposobie zamknięcia i korzystać z natywnego dialogu, gdy jest to możliwe. 🎯