Temu Duga Frontend: Bagaimanakah Anda Membina Kotak Dialog Modal yang Boleh Diakses?

Gesaan dan Konteks yang Berkenaan

Bina kotak dialog modal boleh guna semula untuk temu duga pengekodan UI frontend. Pemanggil membekalkan tajuk, penerangan ringkas pilihan, kandungan badan, keadaan terbuka, serta panggilan balik sahkan dan tutup. Dialog mestilah menyokong pengguna tetikus, sentuhan, papan kekunci, dan teknologi bantuan. Pemusatan visual dan latar belakang malap (dimmed backdrop) diperlukan, tetapi masalah utamanya ialah tingkah laku: kandungan di luar dialog aktif tidak boleh diakses, dialog mempunyai nama yang berguna, fokus memasuki dan kekal di dalamnya, setiap pengguna mempunyai cara eksplisit untuk menutupnya, dan fokus kembali ke tempat yang logik selepas itu.

Andaikan pelayar malar hijau (evergreen browsers) semasa menyokong API dialog natif. Terangkan juga bagaimana kontrak tersebut akan dilaksanakan apabila penemu duga secara eksplisit melarang elemen natif, paparan web terbina dalam (embedded webview) tiada sokongan, atau pustaka komponen sedia ada telah memiliki primitif tersuai yang telah diuji. Unit boleh guna semula ini tidak boleh mengekod mati (hard-code) satu sasaran fokus awal kerana borang, dialog bermaklumat yang panjang, dan pengesahan pemadaman yang tidak boleh diubah memerlukan pilihan yang berbeza.

Pelaksanaan ini tidak termasuk pengambilan data khusus aplikasi, reka bentuk animasi, atau pengurus modal yang lengkap. Itu menjadi topik susulan. Kriteria penerimaan boleh diperhatikan: pengaktifan papan kekunci, penempatan fokus, pembendungan fokus, penamaan boleh akses, tingkah laku tutup, pemulihan fokus, pelapisan (layering), dan tingkah laku yang stabil melalui pemaparan semula (rerenders) dan penyahlekapan (unmounts).

Perkara yang Dinilai oleh Penemu Duga

Isyarat pertama ialah sama ada calon mentakrifkan "modal" sebagai satu kontrak tingkah laku. Panel berpusat dengan nilai tindanan (stacking value) yang tinggi hanyalah satu tindanan (overlay). Modal sebenar menjadikan seluruh dokumen yang lain bersifat lengai (inert), membendung turutan tab, mendedahkan semantik dialog, dan menguruskan kitaran hayat fokus yang lengkap. Menambah atribut ARIA tanpa menjadikan kandungan luar tidak boleh diakses mencipta pepohon kebolehcapaian yang mengelirukan.

Isyarat kedua ialah pertimbangan platform. Elemen dialog natif yang dibuka dengan showModal() memasuki lapisan atas (top layer) pelayar, mencipta latar belakang (backdrop), menjadikan elemen lain dalam dokumen yang sama lengai, dan membekalkan tingkah laku papan kekunci modal. Membukanya dengan show() atau dengan menetapkan atribut open padanya adalah bukan modal. Jawapan yang kukuh menggunakan primitif natif apabila kontrak pelayar produk membenarkannya, sambil masih mampu menyatakan setiap varian tak berubah (invariant) yang mesti dihasilkan semula oleh pelaksanaan tersuai.

Isyarat ketiga ialah dasar fokus dan bukannya peraturan "fokus butang pertama" yang dihafal. Borang pendek mungkin memfokuskan medan pertamanya yang tidak sah atau utama. Dialog panjang yang menyerupai dokumen selalunya perlu memfokuskan tajuk statik dengan sasaran fokus berprogram supaya permulaan dan struktur semantik kekal tersedia. Pengesahan yang tidak boleh diubah pada awalnya harus memfokuskan tindakan yang paling kurang merosakkan. Semasa ditutup, fokus biasanya kembali kepada pembuka (opener); jika elemen tersebut telah dialih keluar, pemanggil mesti memilih item kerja logik yang seterusnya.

Isyarat keempat ialah ketepatan kitaran hayat rangka kerja. Keadaan pelayar imperatif dan keadaan UI deklaratif tidak boleh tersasar. Memanggil showModal() dua kali, mengalih keluar dialog terbuka sebelum menyegerakkan keadaan, menutupnya tanpa mengemas kini induk, atau memulihkan fokus kepada nod basi menyebabkan pepijat sebenar. Pendengar peristiwa (event listeners) memerlukan pembersihan, label unik mesti kekal stabil, dan pemaparan pelayan tidak boleh memanggil API pelayar semasa pemaparan.

Isyarat terakhir ialah kualiti pengesahan. Pemeriksaan kebolehcapaian automatik boleh mengesan nama yang hilang atau atribut tidak sah, tetapi ia tidak dapat membuktikan bahawa fokus mendarat pada elemen yang betul untuk aliran kerja ini, bahawa Tab dan Shift+Tab kekal dibendung, bahawa Escape mengikut dasar produk, atau bahawa fokus kembali ke tempat yang logik selepas pembuka hilang. Perkara tersebut memerlukan pemeriksaan papan kekunci dan pembaca skrin.

Soalan untuk Dijelaskan Sebelum Menjawab

• Adakah ini benar-benar modal? Jika pengguna mesti terus berinteraksi dengan halaman, gunakan dialog bukan modal, popover, atau panel sebaris (inline panel). Jangan melabelkannya sebagai modal semata-mata kerana ia terapung di atas kandungan.
• Bolehkah saya menggunakan elemen dialog natif? Jika ya, gunakan showModal() dan kekalkan tingkah laku lalainya. Jika tidak, laksanakan semantik, kelengaian luar, pembendungan fokus, Escape, dan pemulihan secara eksplisit.
• Apakah kandungan yang dipaparkan di dalamnya? Borang ringkas, dokumen berstruktur yang panjang, dan amaran memerlukan perihalan boleh akses dan pilihan fokus awal yang berbeza.
• Bolehkah operasi itu diterbalikkan? Untuk pemadaman atau pembayaran, fokuskan Batal atau kawalan lain yang paling kurang memusnahkan. Untuk dialog penerusan rutin, tindakan seterusnya yang berkemungkinan mungkin sesuai.
• Bagaimanakah ia boleh ditutup? Sentiasa sediakan kawalan tutup atau batal yang kelihatan. Jelaskan Escape, klik latar belakang, kejayaan penghantaran, dan sama ada input yang belum disimpan memerlukan langkah pengesahan.
• Apakah yang patut menerima fokus selepas ditutup? Biasanya pembuka. Jika penciptaan mengalih keluar atau menggantikan nod tersebut, kenal pasti pengganti logik yang stabil sebelum menulis komponen.
• Bolehkah dialog bertingkat (stack)? Utamakan satu modal aktif. Jika tingkatan diperlukan, hanya dialog paling atas mengendalikan penutupan, dan menutupnya akan memulihkan fokus di dalam dialog di bawahnya.
• Pelayar dan teknologi bantuan manakah yang berada dalam skop? Ini menentukan sama ada elemen natif adalah mencukupi, memerlukan lapisan keserasian, atau mesti digantikan dengan primitif teruji yang telah mantap.

Rangka Kerja Jawapan 30 Saat

"Saya akan mentakrifkan enam varian tak berubah: nama boleh akses, latar belakang lengai, fokus awal yang disengajakan, turutan tab yang dibendung, penutupan eksplisit dan Escape, serta pemulihan fokus yang logik. Pada pelayar semasa, saya akan menggunakan elemen dialog natif dengan showModal() untuk lapisan atas, latar belakang, kelengaian, dan tingkah laku fokus teras. Fokus awal mengikut tugasan: tajuk untuk kandungan panjang, medan yang berkaitan untuk borang, dan Batal untuk tindakan yang tidak boleh diubah. Dalam React, saya akan menyegerakkan keadaan terkawal dengan kesan buka dan tutup yang dikawal rapi (guarded), mendengar terus untuk pembatalan, dan mengesahkan pembukaan papan kekunci, kedu-dua arah tab, penutupan, penamaan pembaca skrin, pemulihan fokus, pemaparan semula, dan dialog bertingkat."

Penyelaman Mendalam Langkah demi Langkah

Mulakan dengan varian tak berubah yang bebas daripada React, CSS, atau elemen natif:

OPEN
  exactly one active modal owns interaction
  outside content is visually obscured and behaviorally inert
  dialog has an accessible name from a visible title
  focus is inside the dialog on a purposefully selected target

WHILE OPEN
  Tab and Shift+Tab cannot enter the background document
  visible close or cancel control is reachable
  only the top modal handles a close request

CLOSE
  parent open state and browser dialog state agree
  focus returns to the opener if it exists
  otherwise focus moves to a predefined logical successor

Pilih primitif seterusnya. Dialog natif ialah lalai untuk kontrak pelayar semasa. Memanggil showModal() meletakkannya di lapisan atas, memberikannya latar belakang, dan menjadikan kandungan lain dalam dokumennya lengai. Ini mengelakkan keperluan menyusuri setiap elemen boleh fokus secara manual, menetapkan aria-hidden merentas punca aplikasi, dan bertelagah dengan konteks tindanan. Memanggil show() atau menetapkan open menghasilkan dialog bukan modal, jadi ia bukanlah jalan pintas yang boleh ditukar ganti.

Dialog tersuai kekal sah apabila temu duga melarang elemen natif atau produk sudah menggunakan primitif komponen yang matang. Ia mesti memaparkan bekas dengan semantik dialog dan nama boleh akses, menetapkan semantik modal hanya apabila interaksi luar benar-benar disekat, menjadikan semua punca latar belakang lengai, membendung fokus, mengendalikan Escape, memulihkan fokus, dan memaparkannya di atas konteks tindanan aplikasi. Memportal panel ke badan dokumen membantu dengan pemotongan (clipping) dan penindanan, tetapi portal sahaja tidak membekalkan sebarang tingkah laku kebolehcapaian tersebut.

Gunakan jadual keputusan fokus awal:

• Untuk borang pendek, fokuskan medan pertama yang perlu diambil tindakan oleh pengguna, terutamanya medan yang tidak sah selepas pengesahan.
• Untuk teks panjang, senarai, atau jadual, fokuskan tajuk atau elemen statik lain pada permulaan dengan sasaran fokus berprogram. Jangan ratakan struktur kaya menjadi satu perihalan boleh akses yang panjang.
• Untuk tindakan yang tidak boleh diubah, fokuskan Batal atau tindakan yang paling kurang memusnahkan.
• Untuk pengesahan mudah atau penerusan, fokuskan tindakan yang paling mungkin apabila berbuat demikian tidak mencetuskan bahaya yang tidak disengajakan.

Nama boleh akses biasanya harus merujuk kepada tajuk yang kelihatan. Penerangan teks biasa yang pendek boleh dirujuk secara berasingan. Tinggalkan satu rujukan perihalan untuk kandungan yang mengandungi beberapa perenggan, senarai, atau jadual supaya pengguna teknologi bantuan boleh menavigasi struktur tersebut. Ikon tutup masih memerlukan nama boleh akses, dan kawalan tutup atau batal yang kelihatan mesti wujud walaupun Escape disokong.

Contoh React berikut mengekalkan keadaan pelayar natif disegerakkan dengan keadaan aplikasi terkawal. Prop description sengaja dijadikan rentetan pendek; kandungan kompleks diletakkan dalam children dan tidak ditetapkan sebagai satu penerangan yang diratakan.

'use client'

import { useEffect, useId, useRef, type ReactNode } from 'react'

interface AccessibleModalProps {
  open: boolean
  title: string
  description?: string
  initialFocus: 'heading' | 'cancel' | 'confirm'
  children: ReactNode
  onConfirm: () => void
  onOpenChange: (open: boolean) => void
}

export function AccessibleModal({
  open,
  title,
  description,
  initialFocus,
  children,
  onConfirm,
  onOpenChange,
}: AccessibleModalProps) {
  const dialogRef = useRef<HTMLDialogElement>(null)
  const headingRef = useRef<HTMLHeadingElement>(null)
  const cancelRef = useRef<HTMLButtonElement>(null)
  const confirmRef = useRef<HTMLButtonElement>(null)
  const titleId = useId()
  const descriptionId = useId()

  useEffect(() => {
    const dialog = dialogRef.current
    if (!dialog) return

    if (open && !dialog.open) {
      dialog.showModal()
      const target =
        initialFocus === 'confirm'
          ? confirmRef.current
          : initialFocus === 'cancel'
            ? cancelRef.current
            : headingRef.current
      target?.focus()
    } else if (!open && dialog.open) {
      dialog.close()
    }
  }, [initialFocus, open])

  useEffect(() => {
    const dialog = dialogRef.current
    if (!dialog) return

    const handleCancel = (event: Event) => {
      event.preventDefault()
      onOpenChange(false)
    }
    const handleClose = () => {
      if (open) onOpenChange(false)
    }

    dialog.addEventListener('cancel', handleCancel)
    dialog.addEventListener('close', handleClose)
    return () => {
      dialog.removeEventListener('cancel', handleCancel)
      dialog.removeEventListener('close', handleClose)
    }
  }, [onOpenChange, open])

  return (
    <dialog
      ref={dialogRef}
      aria-labelledby={titleId}
      aria-describedby={description ? descriptionId : undefined}
    >
      <h2 ref={headingRef} id={titleId} tabIndex={-1}>
        {title}
      </h2>
      {description ? <p id={descriptionId}>{description}</p> : null}
      {children}
      <div>
        <button ref={cancelRef} type="button" onClick={() => onOpenChange(false)}>
          Cancel
        </button>
        <button ref={confirmRef} type="button" onClick={onConfirm}>
          Confirm
        </button>
      </div>
    </dialog>
  )
}

Kawalan di sekeliling dialog.open mengelakkan panggilan imperatif pendua semasa pemaparan semula. Pendengar langsung cancel penting kerana peristiwanya boleh dibatalkan dan tidak menggelembung (bubble). Menghalang penutupan lalainya membolehkan keadaan terkawal berubah dahulu; kesan seterusnya menutup dialog natif. Pendengar close juga membaiki keadaan jika laluan penutupan natif yang lain dijalankan. API pelayar kekal di dalam kesan (effects), jadi pemaparan pelayan hanya memancarkan markup.

Pastikan dasar penutupan sentiasa eksplisit. Klik latar belakang tidak semestinya bersamaan dengan Batal secara automatik. Borang dengan kerja yang belum disimpan mungkin mengabaikan klik latar belakang, pemilih ringan mungkin menerimanya, dan pengesahan yang tidak boleh diubah tidak seharusnya hilang daripada peristiwa penunjuk (pointer event) yang tidak disengajakan. Jika produk menerima penutupan latar belakang, gunakan ujian hit kawasan latar belakang yang telah diuji dan halakan melalui laluan tutup terkawal yang sama. Pemeriksaan sasaran peristiwa sahaja boleh tersilap menganggap klik pada padding dialog sebagai klik latar belakang. Jangan sekali-kali mencipta sasaran tutup halimunan skrin penuh yang mencuri klik yang ditujukan untuk dialog tersebut.

Pemulihan fokus natif biasanya kembali kepada elemen yang memanggil. Aliran aplikasi boleh mengatasi perkara itu hanya dengan alasan kukuh. Apabila dialog mencipta baris baharu dan mengalih keluar butang "Tambah baris", sel pertama baris baharu ialah destinasi yang logik. Tangkap dasar ini pada pemanggil, kerana dialog boleh guna semula tidak dapat menyimpulkan perkara yang berubah dalam aliran kerja sekeliling.

Untuk dialog bertingkat, utamakan menukar kandungan dalam satu dialog. Jika modal kedua tidak dapat dielakkan, kekalkan susunan tindanan (stack): hanya entri teratasnya boleh ditutup daripada Escape atau latar belakang, dialog latar belakang kekal lengai, dan menutup entri teratas memulihkan fokus kepada kawalan yang membukanya di dalam dialog sebelumnya. Boolean global tidak boleh mewakili hubungan tersebut.

Uji tingkah laku, bukan sekadar atribut yang dipaparkan:

1. Open with Enter and Space; verify focus enters the intended target.
2. Tab from the last control and Shift+Tab from the first; verify background is unreachable.
3. Press Escape; verify one top dialog closes and controlled state becomes false.
4. Use the visible close and Cancel controls with keyboard, pointer, and touch.
5. Close normally; verify focus returns to the opener.
6. Remove the opener during completion; verify focus moves to the chosen logical successor.
7. Read with a screen reader; verify one useful title and no flattened rich description.
8. Open a destructive confirmation; verify initial focus is on the least destructive action.
9. Rerender repeatedly while open; verify no duplicate-open exception or focus reset.
10. Unmount during navigation; verify no listener leak or focus jump to the document body.
11. At 200% zoom and a small viewport, verify title, controls, and scrollable content remain reachable.
12. Run automated accessibility checks, then repeat the manual focus workflow they cannot prove.

Contoh Jawapan Berkualiti Tinggi

"Saya akan menganggap modal sebagai mesin keadaan fokus dan interaksi, bukan sebagai panel dengan nilai tindanan yang besar. Apabila ia dibuka, seluruh dokumen yang lain mesti menjadi lengai, dialog memerlukan nama yang terikat dengan tajuknya yang kelihatan, dan fokus mesti beralih ke sasaran yang dipilih daripada tugasan tersebut. Semasa dibuka, navigasi papan kekunci kekal di dalam dan kawalan tutup atau batal yang kelihatan sentiasa boleh dicapai. Semasa ditutup, fokus kembali kepada pembuka melainkan aliran kerja telah menggantikannya, dalam hal ini pemanggil membekalkan pengganti logik.

Untuk pelayar semasa, saya akan menggunakan elemen dialog natif dan memanggil showModal(). Itu memberi saya lapisan atas, latar belakang, kelengaian latar belakang, dan tingkah laku fokus modal teras. Menetapkan open atau memanggil show() akan menghasilkan tingkah laku bukan modal, jadi saya tidak akan menggunakan kedua-duanya sebagai pengganti. Jika latihan ini melarang elemen natif, saya akan menghasilkan semula varian tak berubah yang sama dengan peranan dialog, nama boleh akses, kelengaian luar yang sebenar, pembendungan fokus, pengendalian Escape, portal, dan pemulihan, sebaik-baiknya melalui primitif teruji sedia ada dan bukannya kod perangkap fokus ad hoc yang baharu.

Fokus awal bergantung pada kandungan. Saya akan memfokuskan medan yang berkaitan untuk borang pendek, tajuk statik untuk kandungan berstruktur yang panjang, dan Batal untuk tindakan yang tidak boleh diubah. Saya akan merujuk penerangan ringkas hanya apabila ia boleh difahami sebagai satu pengumuman; senarai dan berbilang perenggan kekal boleh dinavigasi sebagai struktur.

Dalam React, saya akan menyegerakkan keadaan terkawal dengan showModal() dan close() di dalam kesan, mengawal daripada panggilan pendua, mendengar terus untuk peristiwa pembatalan yang tidak menggelembung, dan mengalih keluar pendengar semasa pembersihan. Penutupan latar belakang akan menjadi dasar produk yang eksplisit. Saya akan mengesahkan pembukaan papan kekunci, kedua-dua arah tab, Escape, penutupan eksplisit, penamaan pembaca skrin, pemulihan fokus apabila pencetus wujud atau hilang, pemaparan semula berulang, dialog bertingkat, zum, dan viewport kecil. Pemeriksaan automatik menambah baik aliran kerja itu tetapi tidak menggantikannya."

Kesilapan Biasa

• Menggayakan tindanan berpusat dan memanggilnya modal → kawalan latar belakang kekal boleh dicapai oleh papan kekunci atau teknologi bantuan → Takrifkan dan uji kelengaian serta kitaran hayat fokus.
• Menambah semantik modal tanpa menyekat interaksi luar → pepohon kebolehcapaian menjanjikan keadaan yang tidak dialami oleh pengguna penunjuk yang melihat → Tetapkan semantik modal hanya apabila tingkah laku benar-benar modal.
• Menogol atribut natif open → dialog dipaparkan tanpa tingkah laku showModal() → Gunakan kaedah modal yang betul dan selaraskannya dengan keadaan aplikasi.
• Sentiasa memfokuskan kawalan pertama → kandungan panjang mungkin bermula di luar skrin dan kerja yang memusnahkan mungkin memfokuskan tindakan berbahaya → Pilih fokus awal daripada struktur kandungan dan akibatnya.
• Meletakkan beberapa perenggan ke dalam satu perihalan boleh akses → pembaca skrin mengumumkan blok yang tidak berstruktur → Rujuk hanya perihalan pendek dan biarkan kandungan kaya boleh dinavigasi.
• Hanya bergantung pada Escape → pengguna sentuhan dan suis (switch users) mungkin tiada laluan penutupan yang jelas → Sertakan kawalan tutup atau batal yang kelihatan dan dinamakan.
• Menutup pada setiap klik latar belakang → input penunjuk yang tidak disengajakan membuang hasil kerja → Jadikan penutupan mudah (light-dismiss) sebagai dasar produk yang disengajakan dan boleh diuji.
• Menulis perangkap fokus manual sebelum memeriksa platform atau pustaka → kes pinggir (edge cases) bertambah di sekitar kawalan yang dilumpuhkan, perubahan DOM, portal, dan dialog bersarang → Utamakan elemen natif atau primitif matang yang telah diuji.
• Memanggil showModal() semasa pemaparan atau pada setiap pelaksanaan kesan → pemaparan pelayan gagal atau pelayar melontarkan ralat dan fokus ditetapkan semula → Panggil kaedah imperatif dalam kesan yang dikawal rapi.
• Memulihkan fokus kepada pencetus yang dialih keluar → fokus jatuh ke badan dokumen dan konteks papan kekunci hilang → Minta pemanggil mengenal pasti pengganti logik apabila aliran kerja mengubah halaman.
• Menganggap imbasan automatik sebagai bukti lengkap → ia tidak dapat menilai susunan fokus atau niat aliran kerja → Lakukan turutan manual papan kekunci dan pembaca skrin yang lengkap.

Soalan Susulan dan Jawapan

Susulan 1: Apakah yang berubah jika elemen dialog natif dilarang?

Paparkan portal yang mengandungi bekas peranan dialog dengan rujukan tajuk kelihatan dan semantik modal. Jadikan setiap punca aplikasi latar belakang lengai, bukan sekadar dimalapkan secara visual. Tangkap pembuka, pilih dan tetapkan fokus awal, bendung kedua-dua arah tab apabila zuriat boleh fokus berubah, kendalikan Escape pada dialog aktif, pulihkan fokus, dan bersihkan setiap mutasi dan pendengar. Terangkan sebab primitif yang diselenggara adalah lebih selamat daripada melaksanakan semula tingkah laku silang pelayar ini untuk setiap dialog produk.

Susulan 2: Bagaimanakah anda mengendalikan borang dengan ralat pengesahan?

Biarkan dialog terbuka. Alihkan fokus ke medan tidak sah pertama atau ringkasan ralat yang berpaut ke medan tidak sah, dedahkan setiap mesej melalui perihalan boleh akses medannya, dan kekalkan nilai yang dimasukkan. Jangan umumkan setiap ralat medan sebagai satu perihalan dialog. Selepas penyerahan berjaya, tutup hanya apabila hasil aplikasi dilakukan (committed), kemudian alihkan fokus ke elemen yang mewakili hasil tersebut.

Susulan 3: Patutkah mengklik latar belakang menutup dialog?

Tentukan ia berdasarkan risiko kehilangan data. Pemilih ringan mungkin membenarkannya; borang panjang atau pengesahan yang memusnahkan biasanya memerlukan keputusan eksplisit. Jika didayakan, tutup hanya apabila urutan penunjuk bermula dan berakhir di kawasan latar belakang, gunakan peralihan keadaan yang sama seperti Batal, dan uji penunjuk ke bawah di dalam diikuti penunjuk ke atas di luar supaya seretan tidak disalah anggap sebagai niat.

Susulan 4: Bagaimanakah anda menganimasikan penutupan tanpa merosakkan pemulihan fokus?

Asingkan "penutupan diminta" daripada "dialih keluar daripada DOM." Tandakan dialog sebagai sedang ditutup, hentikan tindakan baharu, mainkan peralihan keluar, kemudian panggil laluan tutup natif dan kemas kini keadaan sebelum menyahlekap. Hormati keutamaan pengurangan pergerakan (reduced-motion) dan sediakan sandaran penyelesaian yang terikat. Pemulihan fokus berlaku pada sempadan penutupan sebenar, bukan apabila kelegapan mula-mula berubah.

Susulan 5: Bagaimana jika dialog kedua dibuka daripada yang pertama?

Elakkannya apabila aliran berbilang langkah dalam satu dialog adalah lebih jelas. Jika diperlukan, simpan susunan bertingkat yang teratur dengan pembuka bagi setiap entri. Hanya entri teratas bertindak balas terhadap Escape atau latar belakang; dialog yang lebih bawah kekal disekat. Menutup dialog anak memulihkan fokus kepada pembukanya di dalam dialog induk, dan menutup dialog induk kemudiannya memulihkan fokus kepada pembuka halaman.

Susulan 6: Bagaimanakah anda menghalang tatalan badan dan anjakan susun atur?

Anggap penguncian tatalan sebagai dasar visual dan input yang berasingan daripada kelengaian semantik. Catat kedudukan tatalan semasa, gunakan satu kunci terpusat semasa modal pertama dibuka, pampas lebar bar tatal yang hilang apabila diperlukan, dan lepaskan hanya selepas modal terakhir ditutup. Uji papan kekunci maya mudah alih, kawasan tatalan bersarang, zum, dan perubahan laluan; pemilikan yang dikira rujukan (reference-counted) menghalang satu dialog daripada membuka kunci halaman di bawah dialog yang lain.

Susulan 7: Bagaimanakah anda menguji ini dalam CI?

Gunakan ujian komponen untuk peralihan buka dan tutup terkawal, label, cabang fokus awal, pengendalian batal, dan pembersihan. Tambahkan ujian pelayar yang mengaktifkan pencetus sebenar, bergerak ke hadapan dan ke belakang melalui fokus, menekan Escape, mengalih keluar pembuka, dan menguji dialog bertingkat. Jalankan peraturan kebolehcapaian automatik untuk regresi struktur, kemudian kekalkan matriks manual merentas konfigurasi wakil pembaca skrin, papan kekunci, zum, sentuhan, dan kontras tinggi kerana penegasan CI tidak dapat menilai setiap pengumuman atau pilihan aliran kerja.