Filter & Sort Toolbar
Komposisi pill filter periode, dropdown urutan, dan kotak pencarian yang ditempatkan di atas daftar/tabel — dipakai di dashboard penjualan tutor dan katalog paket.
Tiga elemen, satu baris
Setiap elemen (pill filter, select urutan, pencarian) sudah punya dokumentasi masing-masing sebagai komponen tersendiri. Yang belum terdokumentasi adalah bagaimana ketiganya dikomposisikan bersama di atas sebuah daftar atau tabel: pill filter untuk pilihan bersifat eksklusif dengan sedikit opsi (periode waktu), select untuk daftar urutan yang lebih panjang, dan pencarian bebas teks untuk mempersempit hasil lebih jauh — ketiganya bisa dipakai bersamaan tanpa saling menggantikan.
Contoh komposisi
Diadaptasi dari pola nyata di halaman penjualan tutor: grup pill periode diberi role="group" dengan aria-label deskriptif, karena secara visual terlihat seperti tab tapi berfungsi sebagai filter, bukan navigasi konten.
Urutan tab order & responsif
- Susun DOM sesuai urutan visual (filter → urutan → pencarian) supaya urutan Tab keyboard masuk akal, jangan diubah lewat CSS order tanpa alasan kuat.
- Di layar sempit (<640px), tumpuk ketiganya secara vertikal penuh lebar (
flex-wrap+w-full) alih-alih memaksanya muat dalam satu baris yang menyempit dan sulit disentuh. - Filter pill yang sedang aktif diberi
aria-pressed="true", bukan hanya dibedakan lewat warna, supaya status pilihannya terbaca oleh pembaca layar.