Lompat ke isi
CirccaHIG

Komponen / Lapisan & umpan balik

Alert

Peringatan sistem ringkas ala macOS/iOS di tengah layar: judul, pesan, dan satu–dua tombol. Untuk keputusan cepat yang tidak bisa ditunda — hapus, sesi berakhir, koneksi terputus.
React · BetaFigma · siapFigmaSumber

Yang sudah ditangani

  • Diumumkan sebagai role="alertdialog"; judul dan pesan terhubung lewat aria-labelledby / aria-describedby.
  • Fokus terkunci di dalam Alert dan kembali ke pemicu setelah ditutup. Fokus awal: Batal pada Destructive, tombol aksi pada Default.
  • Klik di luar tidak menutup Alert; konten di belakangnya tidak bisa difokus atau dibacakan.
  • Saat aksi async berjalan, tombol aksi aria-busy dan Batal/Esc dinonaktifkan agar tidak ada keputusan ganda.

Keyboard

TombolFungsi
EscSama dengan Batal (tidak berlaku bila tanpa tombol Batal)
TabShift TabPindah antar-tombol
ReturnSpaceMenekan tombol yang sedang fokus

Tanggung jawab Anda

  • Beri label yang bermakna: teks label, atau aria-label untuk kontrol tanpa teks.
  • Uji di mode gelap dan kontras tinggi (pilih lewat menu Tema di kanan atas, atau tombol Terang/Gelap di tiap contoh).
  • Pastikan semua aksi bisa dijalankan dengan keyboard saja.
Esc
↑↓ pilih↵ buka12 hasil