Fragmen, Portal, dan Perangkap Urutan DOM

Pembaca layar dan papan ketik mengikuti urutan DOM, yaitu urutan kemunculan elemen dalam dokumen. CSS mungkin memindahkan elemen secara visual, tetapi urutan pembacaan tidak berubah.

Fragment React mengelompokkan elemen anak tanpa menambahkan div pembungkus. Ini menjaga DOM tetap rapi dan mencegah daftar atau tabel rusak oleh elemen yang tidak semestinya.

Div tambahan di dalam daftar atau tabel dapat merusak struktur induk-anak yang diharapkan oleh teknologi bantu. Fragment sepenuhnya menghindari penyarangan yang tidak valid tersebut.

Portal merender elemen anak ke node DOM yang berbeda, sering kali ke document body. Ini merupakan cara standar untuk memasang modal di atas semua konten lainnya.

Walaupun markup ditempatkan di tempat lain, portal tetap berada dalam pohon komponen Anda. Status dan konteks mengalir secara normal, sehingga logika tidak terpengaruh.

Portal di akhir body dapat muncul setelah konten yang tidak berkaitan. Menekan Tab mungkin melompat ke tempat yang jauh, sehingga pengelolaan focus menjadi penting untuk portal.

Saat portal terbuka, papan ketik tidak otomatis mengikutinya. Pindahkan focus secara eksplisit ke dalam modal agar pengguna berada di tempat konten baru berada.

Saat modal portal terbuka, pertahankan Tab di dalamnya. Saat ditutup, kembalikan focus ke elemen yang membukanya, karena kedekatan DOM tidak akan melakukan hal ini untuk Anda.

Urutan flexbox CSS atau penempatan grid dapat mengatur ulang tampilan layar. Urutan tab tetap mengikuti sumber, jadi hindari mengatur ulang konten interaktif dengan CSS.

Tulis JSX Anda agar urutan sumber sesuai dengan alur pembacaan yang logis. Dengan begitu, pengguna yang dapat melihat maupun pengguna pembaca layar menemukan konten dalam urutan yang sama dan masuk akal.

Tekan Tab di seluruh aplikasi Anda dan amati ke mana focus berpindah. Jika focus melompat ke tempat yang tidak terduga, urutan DOM atau portal Anda perlu diperiksa.

Gunakan Fragment untuk menghindari pembungkus yang tidak valid, pertahankan urutan sumber yang logis, dan kelola focus dengan cermat setiap kali portal merender konten di tempat lain. 🧩