Komponen bilah navigasi BBC yang rusak tergantung monitor eksternal

• Bug pada komponen bilah navigasi BBC

  • Baru-baru ini tim berhasil memperbaiki bug yang aneh. Hanya satu anggota tim yang bisa mereproduksinya, dan itu pun hanya terjadi di rumah.

• Penyebab bug

  • Saat tombol 'Lainnya' di situs BBC diklik, menu seharusnya terbuka, tetapi di monitor eksternal itu tidak berfungsi.
  • Masalah ini hanya terjadi di monitor eksternal, dan di Safari tidak ada masalah.

• Mereproduksi masalah

  • Ditemukan bahwa bug hanya muncul ketika monitor eksternal berada di atas laptop.
  • Masalah bisa direproduksi dengan menyesuaikan posisi monitor di pengaturan OS.

• Proses investigasi

  • Petunjuk pertama: Di Safari, bug tidak terjadi.
  • Petunjuk kedua: Masalah hanya terjadi ketika monitor eksternal berada di atas dan di kiri monitor utama.
  • Petunjuk ketiga: Di Chrome dan Firefox, nilai screenX dan screenY bernilai negatif.
  • Petunjuk keempat: Bug hanya muncul ketika screenX dan screenY bernilai negatif.
  • Petunjuk kelima: Di Chrome dan Firefox, sudut kiri atas monitor utama adalah koordinat (0,0).

• Solusi

  • Fungsi isInvokedByMouse diubah agar memeriksa apakah screenX dan screenY bukan 0.
  • Masalahnya rumit, tetapi solusinya sederhana.
  • Refaktorisasi kode masih diperlukan, tetapi solusi saat ini sudah memadai.

• Pelajaran

  • Kita perlu berhati-hati terhadap asumsi tentang cara kerja API.
  • Meskipun sudah dilakukan berbagai pengujian, bug ini tetap tidak ditemukan.
  • Hal ini menunjukkan bahwa pengalaman pengguna bisa berbeda tergantung konfigurasi monitor.

• Perbaikan 2024-11-19: Ada kebingungan terkait penggunaan screenX, dan komponen navigasi telah direfaktorisasi. Dalam posting blog berikutnya, proses refaktorisasi dan jawaban atas berbagai pertanyaan akan dibagikan.

[GN⁺]

Komentar Hacker News

• Menjelaskan alasan menu di situs BBC menunjukkan perilaku berbeda saat dibuka dengan keyboard dan pointer

  • Saat dibuka dengan keyboard, fokus berpindah ke tautan pertama tanpa animasi
  • Saat dibuka dengan pointer, fokus berpindah ke kontainer menu
  • Saat membuat pengalaman untuk pengguna keyboard, event click berguna karena independen terhadap perangkat

• Mengusulkan perbaikan isInvokedByMouse dengan memeriksa apakah screenX dan screenY tidak bernilai 0

  • Perlu mempertimbangkan kasus ketika mouse benar-benar berada di 0,0
  • Diperlukan refaktorisasi tambahan untuk mengurangi kompleksitas fungsi event handler

• Memuji investasi BBC pada aksesibilitas dan penemuan bug tersebut

  • Mempertanyakan mengapa menu dropdown tidak terbuka secara konsisten untuk semua pengguna
  • Penasaran apakah framework web atau web component dapat menyelesaikan masalah seperti ini

• Mencoba menyelesaikan masalah dengan server-side template, framework CSS, dan JS seminimal mungkin

  • Tidak yakin apakah itu sudah memenuhi standar aksesibilitas BBC

• Menunjukkan bahwa bug ini disebabkan oleh heuristik yang keliru

  • Menyarankan agar saat memeriksa koordinat screenX dan screenY, nilai negatif juga diperhitungkan, bukan hanya nilai positif

• Mempertanyakan mengapa situs web mengambil posisi mouse dari koordinat layar

  • Berpendapat bahwa event click saja sudah memberikan informasi yang cukup

• Penasaran mengapa browser melaporkan koordinat yang berbeda tergantung monitor yang digunakan

  • Khawatir API web yang memiliki informasi semacam ini dapat menimbulkan risiko keamanan dan pelacakan informasi

• Bertanya tentang cara yang benar untuk membedakan klik mouse dan klik keyboard

  • Menyarankan metode menetapkan flag berdasarkan event mousedown dan keydown

• Berpendapat bahwa koordinat viewport seharusnya digunakan alih-alih koordinat layar

  • Menganggap nilai negatif dalam ruang layar bukanlah bug

• Terkesan karena blog tersebut ditulis tanpa persetujuan dari tim manajemen dan tim hukum BBC