Hangi harici monitöre bağlı olduğuna göre bozulan BBC gezinme çubuğu bileşeni

• BBC gezinme çubuğu bileşenindeki hata

  • Ekip yakın zamanda garip bir hatayı çözdü. Yalnızca bir ekip üyesi bunu yeniden üretebiliyordu ve sorun sadece evde ortaya çıkıyordu.

• Hatanın nedeni

  • BBC web sitesindeki 'Daha fazla' düğmesine tıklandığında menünün açılması gerekiyordu, ancak harici monitörde çalışmıyordu.
  • Sorun yalnızca harici monitörde ortaya çıkıyordu ve Safari'de böyle bir problem yoktu.

• Sorunun yeniden üretilmesi

  • Hatanın yalnızca harici monitör dizüstü bilgisayarın üstünde konumlandığında ortaya çıktığı keşfedildi.
  • İşletim sistemi ayarlarında monitör konumu değiştirilerek sorun yeniden üretilebildi.

• İnceleme süreci

  • Birinci ipucu: Safari'de hata ortaya çıkmıyordu.
  • İkinci ipucu: Sorun yalnızca harici monitör ana monitörün üstünde ve solunda konumlandığında ortaya çıkıyordu.
  • Üçüncü ipucu: Chrome ve Firefox'ta screenX ve screenY değerleri negatift i.
  • Dördüncü ipucu: Hata yalnızca screenX ve screenY negatif olduğunda ortaya çıkıyordu.
  • Beşinci ipucu: Chrome ve Firefox'ta ana monitörün sol üst köşesi (0,0) koordinatıydı.

• Çözüm

  • isInvokedByMouse fonksiyonu, screenX ve screenY değerlerinin 0 olup olmadığını kontrol edecek şekilde değiştirildi.
  • Sorun karmaşıktı ama çözüm basitti.
  • Kodun refactor edilmesi gerekiyor, ancak mevcut çözüm şimdilik yeterli.

• Çıkarılan dersler

  • API'lerin nasıl çalıştığına dair varsayımlara dikkat etmek gerekiyor.
  • Çeşitli testlere rağmen bu hata daha önce fark edilmedi.
  • Monitör yapılandırmasına göre kullanıcı deneyiminin değişebileceği görüldü.

• 2024-11-19 düzeltmesi: screenX kullanımına dair bir karışıklık vardı ve gezinme bileşeni refactor edildi. Bir sonraki blog yazısında refactor süreci ve sorulara yanıtlar paylaşılacak.

[GN⁺]

Hacker News görüşleri

• BBC web sitesinde menüyü klavye ve işaretçiyle açarken neden farklı davranış görüldüğünü açıklıyor

  • Klavyeyle açıldığında animasyon olmadan odak ilk bağlantıya taşınıyor
  • İşaretçiyle açıldığında odak menü kapsayıcısına taşınıyor
  • Klavye kullanıcıları için deneyim oluştururken click etkinliğinin cihazdan bağımsız olması nedeniyle faydalı olduğu belirtiliyor

• isInvokedByMouse değerini değiştirerek screenX ve screenY değerlerinin 0 dışı olup olmadığını kontrol etme yöntemi öneriliyor

  • Farenin gerçekten 0,0 konumunda olabileceği dikkate alınmalı
  • Olay işleyici fonksiyonunun karmaşıklığını azaltmak için ek refaktöring gerektiği söyleniyor

• BBC'nin erişilebilirliğe yaptığı yatırım ve hatayı bulması övülüyor

  • Açılır menünün neden tüm kullanıcılar için tutarlı biçimde açılmadığı soruluyor
  • Web framework'lerinin veya web component'lerinin bu tür sorunları çözüp çözemeyeceği merak ediliyor

• Sunucu tarafı şablonlar, CSS framework'leri ve minimum düzeyde JS kullanarak sorunu çözmeye çalıştığını söylüyor

  • Bunun BBC'nin erişilebilirlik standartlarına uyup uymadığından emin olmadığını belirtiyor

• Bunun hatalı bir heuristic nedeniyle oluşan bir bug olduğu belirtiliyor

  • screenX ve screenY koordinatlarını kontrol ederken yalnızca pozitif değil negatif değerlerin de dikkate alınması öneriliyor

• Web sitesinin neden fare konumunu ekran koordinatlarıyla aldığı sorgulanıyor

  • Yalnızca click etkinliğinin yeterli bilgi sağladığı savunuluyor

• Tarayıcının monitöre göre neden farklı koordinatlar bildirdiği merak ediliyor

  • Web API'lerinin bu tür bilgilere sahip olmasının güvenlik ve bilgi takibi riski yaratabileceği konusunda endişe dile getiriliyor

• Fare tıklaması ile klavye tıklamasını ayırmanın doğru yöntemi soruluyor

  • mousedown ve keydown etkinliklerine dayalı bir bayrak ayarlama yöntemi öneriliyor

• Ekran koordinatları yerine viewport koordinatlarının kullanılması gerektiği savunuluyor

  • Ekran uzayındaki negatif değerlerin bir bug olmadığı düşünülüyor

• BBC'nin yönetim ve hukuk ekiplerinden onay almadan blog yazısı yayımlamış olmasından etkilendiğini söylüyor