Focus Management
Memindahkan focus setelah perubahan UI yang penting tanpa mencuri posisi user pada perubahan kecil.
Tujuan belajar
- Menentukan kapan perubahan UI perlu mengarahkan focus
- Memfokuskan confirmation atau control berikutnya setelah action besar
- Menjaga focus tidak hilang ketika content diganti secara dinamis
- Menguji focus journey setelah open, close, save, atau remove action
Isi lesson
5 blok- 1.Focus adalah posisi kerja user, bukan efek visual yang boleh dipindah sembaranganBelum selesaiWajib
- 2.Feedback simpan menerima focus setelah form digantiBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Focus adalah posisi kerja user, bukan efek visual yang boleh dipindah sembarangan
WajibPerubahan UI yang besar dapat membuat keyboard dan screen reader user kehilangan context. Contohnya, saat draft lesson berhasil disimpan dan form diganti menjadi confirmation, focus yang tetap berada pada button lama dapat hilang bersama node tersebut. Pada kasus seperti itu, pindahkan focus secara sengaja ke confirmation atau action berikutnya yang menjelaskan hasilnya. Namun jangan melakukan focus jump pada setiap perubahan kecil seperti mengetik, filter ringan, atau update counter; itu justru mengganggu posisi kerja user. Pilih target berdasarkan pertanyaan sederhana: setelah action selesai, informasi atau control apa yang paling perlu ditemukan user sekarang?
Bagian ini memengaruhi progres lesson.
Feedback simpan menerima focus setelah form diganti
Wajibimport { useRef, useState } from "react";
export function LessonNote() {
const [isSaved, setIsSaved] = useState(false);
const confirmationRef = useRef<HTMLHeadingElement>(null);
function saveNote() {
setIsSaved(true);
window.setTimeout(() => confirmationRef.current?.focus(), 0);
}
return isSaved ? (
<section>
<h2 ref={confirmationRef} tabIndex={-1}>Catatan tersimpan</h2>
<button type="button">Kembali ke lesson</button>
</section>
) : (
<form>
<label htmlFor="lesson-note">Catatan</label>
<textarea id="lesson-note" />
<button type="button" onClick={saveNote}>Simpan catatan</button>
</form>
);
}heading confirmation diberi tabIndex -1 agar dapat menerima programmatic focus tanpa masuk ke Tab order normal. Focus berpindah hanya setelah form benar-benar berubah menjadi hasil simpan. Setelah user memahami status, mereka dapat melanjutkan ke action berikutnya. Pada product nyata, pastikan pesan failure memiliki strategy lain yang jelas dan jangan menutup form sebelum user dapat memperbaiki error.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususFocus saved lesson note confirmation
Pindahkan focus ke confirmation setelah form catatan berubah menjadi saved state.
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
Kapan memindahkan focus setelah state change paling layak dipertimbangkan?
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Focus perlu dikelola ketika UI mengganti atau menghapus posisi kerja user.
- Target focus harus menjelaskan hasil action atau memberi langkah berikutnya yang relevan.
- tabIndex -1 dapat dipakai pada target programmatic focus yang tidak perlu masuk tab order reguler.
- Jangan mencuri focus untuk update kecil yang tidak mengubah journey user.
- Berikutnya, kamu akan memilih ARIA sebagai informasi tambahan yang benar-benar dibutuhkan, bukan sebagai pengganti HTML native.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Focus adalah posisi kerja user, bukan efek visual yang boleh dipindah sembarangan.