Eine kaputte BBC-Navigationsleisten-Komponente – abhängig vom externen Monitor

• Bug in der BBC-Navigationsleisten-Komponente

  • Das Team hat kürzlich einen seltsamen Bug behoben. Nur ein Teammitglied konnte ihn reproduzieren, und er trat nur zu Hause auf.

• Ursache des Bugs

  • Beim Klick auf den Button „Mehr“ auf der BBC-Website sollte sich das Menü öffnen, auf einem externen Monitor funktionierte das jedoch nicht.
  • Das Problem trat nur auf externen Monitoren auf, in Safari gab es es nicht.

• Reproduktion des Problems

  • Es wurde festgestellt, dass der Bug nur auftrat, wenn sich der externe Monitor oberhalb des Laptops befand.
  • Durch Anpassen der Monitorposition in den OS-Einstellungen ließ sich das Problem reproduzieren.

• Untersuchungsprozess

  • Erster Hinweis: In Safari trat der Bug nicht auf.
  • Zweiter Hinweis: Er trat nur auf, wenn sich der externe Monitor oberhalb und links vom Hauptmonitor befand.
  • Dritter Hinweis: In Chrome und Firefox waren die Werte für screenX und screenY negativ.
  • Vierter Hinweis: Der Bug trat nur auf, wenn screenX und screenY negativ waren.
  • Fünfter Hinweis: In Chrome und Firefox ist die obere linke Ecke des Hauptmonitors die Koordinate (0,0).

• Lösung

  • Die Funktion isInvokedByMouse wurde so geändert, dass geprüft wird, ob screenX und screenY nicht 0 sind.
  • Das Problem war komplex, aber die Lösung einfach.
  • Ein Code-Refactoring ist nötig, aber die aktuelle Lösung reicht vorerst aus.

• Erkenntnisse

  • Man sollte bei Annahmen über die Funktionsweise von APIs vorsichtig sein.
  • Trotz umfangreicher Tests wurde der Bug nicht entdeckt.
  • Es wurde deutlich, dass sich die User Experience je nach Monitorkonfiguration unterscheiden kann.

• Änderung vom 2024-11-19: Es gab Verwirrung über die Verwendung von screenX, und die Navigationskomponente wurde refaktoriert. Im nächsten Blogpost sollen der Refactoring-Prozess und Antworten auf Fragen folgen.

[GN⁺]

Hacker-News-Kommentare

• Es wird erklärt, warum sich das Öffnen des Menüs auf der BBC-Website per Tastatur und per Zeiger unterschiedlich verhält

  • Beim Öffnen per Tastatur springt der Fokus ohne Animation auf den ersten Link
  • Beim Öffnen per Zeiger springt der Fokus auf den Menü-Container
  • Beim Erstellen einer Erfahrung für Tastaturnutzer ist das click-Event nützlich, weil es geräteunabhängig ist

• Es wird vorgeschlagen, isInvokedByMouse so zu ändern, dass geprüft wird, ob screenX und screenY ungleich 0 sind

  • Dabei muss berücksichtigt werden, dass sich die Maus tatsächlich bei 0,0 befinden könnte
  • Um die Komplexität der Event-Handler-Funktion zu verringern, ist zusätzliches Refactoring nötig

• Die Investitionen der BBC in Barrierefreiheit und das Auffinden des Bugs werden gelobt

  • Es wird gefragt, warum sich das Dropdown-Menü nicht für alle Nutzer konsistent öffnet
  • Es wird darüber nachgedacht, ob Web-Frameworks oder Web-Components solche Probleme lösen können

• Es wird versucht, das Problem mit serverseitigen Templates, einem CSS-Framework und minimalem JS zu lösen

  • Es besteht Unsicherheit, ob dies den Barrierefreiheitsstandards der BBC entspricht

• Es wird darauf hingewiesen, dass der Bug durch eine fehlerhafte Heuristik entstanden ist

  • Es wird vorgeschlagen, bei der Prüfung der Koordinaten screenX und screenY nicht nur positive, sondern auch negative Werte zu berücksichtigen

• Es wird infrage gestellt, warum die Website die Mausposition über Bildschirmkoordinaten ermittelt

  • Es wird argumentiert, dass das click-Event allein bereits ausreichende Informationen liefert

• Es wird hinterfragt, warum Browser je nach Monitor unterschiedliche Koordinaten melden

  • Es besteht die Sorge, dass Web-APIs mit solchen Informationen Sicherheits- und Tracking-Risiken verursachen könnten

• Es wird gefragt, wie sich Mausklicks und per Tastatur ausgelöste Klicks korrekt unterscheiden lassen

  • Es wird vorgeschlagen, anhand von mousedown- und keydown-Events ein Flag zu setzen

• Es wird argumentiert, dass statt Bildschirmkoordinaten besser Viewport-Koordinaten verwendet werden sollten

  • Negative Werte im Bildschirmraum werden nicht als Bug angesehen

• Es beeindruckt, dass der Blogbeitrag ohne Freigabe durch Management und Rechtsabteilung der BBC veröffentlicht wurde