Dropdown Accessibility
Memilih trigger, expanded state, keyboard close behavior, dan pattern native yang tepat untuk daftar action atau navigation.
Tujuan belajar
- Membedakan disclosure sederhana dari application menu yang kompleks
- Menghubungkan button trigger dengan content yang dibuka
- Menjaga state expanded dan focus return saat close
- Menghindari role menu ketika daftar link biasa sudah cukup
Isi lesson
5 blok- 1.Nama visual dropdown tidak menentukan keyboard modelnyaBelum selesaiWajib
- 2.Disclosure resource course tanpa memaksakan role menuBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Nama visual dropdown tidak menentukan keyboard modelnya
WajibBanyak UI menyebut panel kecil sebagai dropdown, tetapi tujuan interaction-nya bisa berbeda. Daftar link untuk berpindah ke halaman lain sering cukup sebagai disclosure yang dibuka oleh button lalu berisi anchor native. Sebaliknya, application menu dengan role menu memiliki keyboard model khusus, termasuk focus movement antar menuitem, dan tidak boleh dipakai hanya karena tampilannya berupa panel. Mulai dari pekerjaan user: apakah mereka membuka beberapa navigation link, memilih command aplikasi, atau mengubah satu value? Pilih primitive paling sederhana yang memenuhi behavior itu. Untuk disclosure course sederhana, trigger button menyatakan apakah panel terbuka, Escape menutup bila panel sementara, dan focus kembali ke trigger saat close.
Bagian ini memengaruhi progres lesson.
Disclosure resource course tanpa memaksakan role menu
Wajibimport { useRef, useState } from "react";
export function CourseResources() {
const [isOpen, setIsOpen] = useState(false);
const triggerRef = useRef<HTMLButtonElement>(null);
function closeResources() {
setIsOpen(false);
window.setTimeout(() => triggerRef.current?.focus(), 0);
}
return (
<section>
<button
ref={triggerRef}
type="button"
aria-expanded={isOpen}
aria-controls="course-resources"
onClick={() => setIsOpen((previous) => !previous)}
>
Resource course
</button>
{isOpen ? (
<ul id="course-resources" onKeyDown={(event) => {
if (event.key === "Escape") closeResources();
}}>
<li><a href="#docs">Dokumentasi</a></li>
<li><a href="#notes">Catatan</a></li>
</ul>
) : null}
</section>
);
}Button menyatakan state lewat aria-expanded dan menghubungkan panel dengan aria-controls. Panel berisi link native sehingga Tab dapat keluar dari daftar seperti navigation biasa; ini bukan role menu. Escape hanya menangani panel sementara dan mengembalikan focus ke trigger. Bila kebutuhan berubah menjadi command menu dengan Arrow key dan menuitem, gunakan APG menu button pattern secara penuh, bukan sebagian attribute saja.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususBuild course resources disclosure
Buat disclosure Resource course dengan button native, expanded state, link native, Escape close, dan focus return.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Panel Resource course hanya berisi dua link dokumentasi. Pattern awal yang paling proporsional adalah
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Pilih dropdown pattern dari tugas user, bukan dari nama atau bentuk visual panel.
- Disclosure sederhana dapat memakai button, aria-expanded, aria-controls, dan content native.
- Escape serta focus return membantu panel sementara ditutup tanpa membuat user kehilangan context.
- Role menu hanya digunakan bila semua keyboard expectation menu benar-benar diimplementasikan.
- Berikutnya, tabs membutuhkan hubungan role dan keyboard movement yang lebih spesifik daripada disclosure sederhana.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Nama visual dropdown tidak menentukan keyboard modelnya.