Fragment, Portal e il problema dell'ordine nel DOM

Gli screen reader e la tastiera seguono l'ordine del DOM, ovvero l'ordine in cui gli elementi compaiono nel documento. Il CSS può spostare gli elementi visivamente, ma non cambia l'ordine di lettura.

Un Fragment di React raggruppa gli elementi figli senza aggiungere un div contenitore. In questo modo il DOM resta pulito e si evita di danneggiare liste o tabelle con elementi estranei.

Un div aggiuntivo all'interno di una lista o di una tabella può compromettere la struttura padre-figlio prevista dalle tecnologie assistive. Un Fragment evita completamente questo annidamento non valido.

Un Portal esegue il rendering degli elementi figli in un nodo DOM diverso, spesso nel body del documento. È il modo standard per montare le finestre modali sopra ogni altro elemento.

Anche se il markup viene inserito altrove, un portal resta nell'albero dei componenti. Lo State e il context continuano a fluire normalmente, quindi la logica non cambia.

Un portal alla fine del body può trovarsi dopo contenuti non correlati. La tabulazione potrebbe saltare in un punto molto lontano, quindi la gestione del focus diventa essenziale per i portal.

Quando si apre un portal, la tastiera non lo segue automaticamente. Sposti esplicitamente il focus nella finestra modale, così l'utente si trova nel nuovo contenuto.

Quando una finestra modale in un portal è aperta, mantenga il tasto Tab al suo interno. Alla chiusura, restituisca il focus all'elemento che l'ha aperta, perché la vicinanza nel DOM non lo farà automaticamente.

L'ordine di flexbox o il posizionamento nella griglia CSS possono riorganizzare ciò che appare sullo schermo. L'ordine di tabulazione segue comunque il sorgente, quindi eviti di riordinare i contenuti interattivi con il CSS.

Scriva il JSX in modo che l'ordine del sorgente corrisponda al flusso logico di lettura. In questo modo sia gli utenti vedenti sia quelli che usano uno screen reader incontrano i contenuti nella stessa sequenza sensata.

Prema Tab per spostarsi nell'app e osservi dove va il focus. Se salta in un punto imprevisto, è necessario intervenire sull'ordine del DOM o su un portal.

Monta una finestra modale con un portal in document.body. Quale nuova responsabilità comporta?

Usi i Fragment per evitare contenitori non validi, mantenga logico l'ordine del sorgente e gestisca con attenzione il focus ogni volta che un portal esegue il rendering di contenuti altrove. 🧩