Lompat ke isi
CirccaHIG

Komponen / Form & input

FilterBar

Baris pencarian + filter + jumlah hasil di atas daftar dokumen (PO, invoice, BAST).
React · BetaFigma · siapFigmaSumber

Yang sudah ditangani

  • Akar ber-role="search" (landmark) dengan nama "Cari dan filter"; chip dikelompokkan role="group" "Filter".
  • Jumlah hasil di region aria-live="polite" yang selalu dirender, sehingga perubahan terbaca tanpa memindah fokus.
  • Setelah "Hapus semua filter", fokus pindah ke chip pertama agar tidak hilang.
  • Baris membungkus di layar sempit; urutan fokus tetap kiri→kanan, atas→bawah.

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