Advanced · Level 15: AccessibilityAdvanced65 menitBahasa Indonesia

Keyboard Traps

Mendeteksi area interaktif yang mengurung keyboard user dan memberi jalur keluar yang jelas untuk panel sederhana.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan keyboard trap dari sudut pandang journey user
Menguji Tab, Shift+Tab, Enter, dan Escape pada panel sederhana
Memberi close action yang native serta dapat ditemukan
Mengembalikan focus ke trigger setelah panel ditutup

Keyboard NavigationFocus ManagementEscape KeyAccessibility Debugging

Isi lesson

7 blok

1.
Area interaktif tidak boleh menjadi jalan buntuBelum selesaiWajib
2.
Panel catatan dengan jalan keluar keyboard yang jelasBelum selesaiWajib
3.
Coding practiceBelum selesaiWajib
4.
Writing practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
Jangan mengklaim panel aman hanya karena ada button TutupBelum selesaiWajib
7.
RingkasanBelum selesaiWajib

Area interaktif tidak boleh menjadi jalan buntu

Wajib

Keyboard trap terjadi ketika seseorang dapat masuk ke area interaktif tetapi tidak dapat keluar atau menemukan action untuk kembali dengan keyboard. Risiko ini sering muncul pada panel, overlay, menu custom, atau component yang memindahkan focus tanpa memikirkan jalan pulang. Untuk review dasar, jangan mulai dari library focus trap atau dialog yang kompleks. Pilih satu panel kecil, buka dengan keyboard, lalu uji apakah focus masuk ke control yang masuk akal, Tab dan Shift+Tab tetap dapat dipahami, Escape atau button Tutup bekerja bila panel memang bersifat sementara, dan focus kembali ke trigger setelah panel ditutup. Behavior ini harus diuji di browser, bukan disimpulkan dari markup saja.

Bagian ini memengaruhi progres lesson.

Panel catatan dengan jalan keluar keyboard yang jelas

Wajib

tsx

import { useRef, useState } from "react";

export default function CourseNotesPanel() {
  const [isOpen, setIsOpen] = useState(false);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const closeButtonRef = useRef<HTMLButtonElement>(null);

  function openNotes() {
    setIsOpen(true);
    window.setTimeout(() => closeButtonRef.current?.focus(), 0);
  }

  function closeNotes() {
    setIsOpen(false);
    window.setTimeout(() => triggerRef.current?.focus(), 0);
  }

  return (
    <section>
      <button ref={triggerRef} type="button" onClick={openNotes}>
        Buka catatan keyboard
      </button>
      {isOpen ? (
        <aside onKeyDown={(event) => event.key === "Escape" && closeNotes()}>
          <button ref={closeButtonRef} type="button" onClick={closeNotes}>
            Tutup catatan
          </button>
        </aside>
      ) : null}
    </section>
  );
}

Ini bukan implementasi modal production lengkap. Ia memperlihatkan pola review dasar untuk panel sementara: focus masuk ke close action saat dibuka, Escape dan button Tutup menutup panel, lalu focus kembali ke trigger agar keyboard user tidak kehilangan context. Component yang lebih kompleks akan dibahas pada module Accessible Components dengan pattern serta expectation yang lebih lengkap.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Fix course notes keyboard exit

Perbaiki panel catatan React agar keyboard user menerima focus saat membuka, dapat menutup dengan Escape, dan kembali ke trigger setelah close.

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.

8 cek otomatis5 checklist

Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis bug note untuk panel Bantuan course yang dapat dibuka dengan keyboard, tetapi setelah dibuka focus tetap berada di trigger dan Escape tidak melakukan apa pun. Jelaskan langkah reproduksi keyboard-only, dampaknya pada user, perbaikan yang kamu usulkan, dan cara kamu akan menguji focus kembali setelah panel ditutup.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/350 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Menyebut langkah reproduksi memakai keyboard.
Menjelaskan dampak user tanpa asumsi teknis berlebihan.
Menyebut close action dan Escape bila panel sementara.
Menyebut focus return ke trigger serta cara mengujinya.

Blok ini wajib untuk menyelesaikan lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Setelah panel sementara ditutup lewat Escape, focus yang paling masuk akal biasanya kembali ke

Progres lesson naik setelah jawaban benar.

Catatan penting

Wajib

Jangan mengklaim panel aman hanya karena ada button Tutup

Button Tutup saja belum membuktikan keyboard journey aman. Uji focus saat membuka, urutan Tab serta Shift+Tab di dalam panel, Escape bila sesuai pattern, focus return saat close, dan interaksi dengan control di belakang panel. FluentStack runtime dapat memperlihatkan contoh kecil, tetapi audit component production tetap perlu dilakukan di project lokalmu.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib

Keyboard trap adalah jalan buntu: user masuk ke area interaktif tetapi tidak dapat menemukan jalan keluar yang dapat dipakai.
Panel sementara perlu open journey, close action, dan focus return yang dapat dijelaskan serta diuji.
Tab, Shift+Tab, Enter, dan Escape adalah walkthrough dasar untuk component ini.
Pola dialog, dropdown, dan focus management yang lebih kompleks akan dibangun pada module berikutnya.
Sekarang Uji Kompetensi menggabungkan semantic review, keyboard order, focus, skip link, dan exit journey pada satu page.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Area interaktif tidak boleh menjadi jalan buntu.

Memuat progres Review module