Fragmenty, portale i pułapka kolejności DOM

Czytniki ekranu i klawiatura podążają za kolejnością DOM-u, czyli kolejnością, w której elementy występują w dokumencie. CSS może zmieniać rozmieszczenie wizualne, ale nie zmienia kolejności odczytywania.

Reactowy Fragment grupuje elementy potomne bez dodawania opakowującego elementu div. Dzięki temu DOM pozostaje przejrzysty, a listy i tabele nie są zaburzane przez zbędne elementy.

Dodatkowy element div wewnątrz listy lub tabeli może zaburzyć strukturę elementów nadrzędnych i potomnych oczekiwaną przez technologie asystujące. Fragment całkowicie zapobiega takiemu nieprawidłowemu zagnieżdżeniu.

Portal renderuje elementy potomne w innym węźle DOM-u, często bezpośrednio w elemencie body dokumentu. To standardowy sposób umieszczania okien modalnych nad całą pozostałą zawartością.

Mimo że znaczniki trafiają w inne miejsce, portal pozostaje częścią drzewa komponentów. Stan i kontekst przepływają normalnie, więc logika pozostaje bez zmian.

Portal umieszczony na końcu body może pojawić się za niezwiązanymi z nim treściami. Przechodzenie klawiszem Tab może przenieść fokus w odległe miejsce, dlatego w przypadku portali niezbędne jest zarządzanie fokusem.

Po otwarciu portalu klawiatura nie podąża za nim automatycznie. Jawnie przenieś fokus do okna modalnego, aby użytkownik znalazł się przy nowej zawartości.

Gdy modalny portal jest otwarty, utrzymuj klawisz Tab wewnątrz niego. Po zamknięciu przywróć fokus na elemencie, który go otworzył, ponieważ bliskość w DOM-ie nie zrobi tego za Ciebie.

Kolejność flexboxa CSS lub rozmieszczenie elementów w gridzie może zmienić wygląd ekranu. Kolejność przechodzenia klawiszem Tab nadal wynika ze struktury źródłowej, dlatego należy unikać zmieniania kolejności interaktywnych treści za pomocą CSS.

Pisz JSX tak, aby kolejność źródłowa odpowiadała logicznemu przebiegowi czytania. Dzięki temu zarówno użytkownicy widzący, jak i korzystający z czytników ekranu napotkają treści w tej samej, sensownej kolejności.

Przechodź przez aplikację klawiszem Tab i obserwuj, dokąd trafia fokus. Jeśli przeskakuje w nieoczekiwane miejsce, trzeba sprawdzić kolejność DOM-u lub portal.

Montujesz modal za pomocą portalu w document.body. Jaką nową odpowiedzialność to na Ciebie nakłada?

Używaj Fragmentów, aby unikać nieprawidłowych elementów opakowujących, zachowuj logiczną kolejność źródłową i starannie zarządzaj fokusem za każdym razem, gdy portal renderuje zawartość w innym miejscu. 🧩