Le composant de barre de navigation de la BBC qui se cassait selon le moniteur externe utilisé

 (joshtumath.uk)
1 points par GN⁺ 2024-11-19 | 1 commentaires | Partager sur WhatsApp

  • Bug du composant de barre de navigation de la BBC

    • L’équipe a récemment résolu un bug étrange. Une seule personne de l’équipe pouvait le reproduire, et cela ne se produisait que chez elle.

  • Cause du bug

    • En cliquant sur le bouton « Plus » du site de la BBC, le menu était censé s’ouvrir, mais cela ne fonctionnait pas sur un moniteur externe.
    • Le problème ne se produisait que sur un moniteur externe, et Safari n’était pas affecté.

  • Reproduction du bug

    • Ils ont découvert que le bug ne se produisait que lorsque le moniteur externe était placé au-dessus de l’ordinateur portable.
    • Il était possible de reproduire le problème en ajustant la position du moniteur dans les réglages du système d’exploitation.

  • Enquête

    • Premier indice : le bug ne se produisait pas dans Safari.
    • Deuxième indice : il ne se produisait que lorsque le moniteur externe était situé au-dessus et à gauche du moniteur principal.
    • Troisième indice : dans Chrome et Firefox, les valeurs de screenX et screenY étaient négatives.
    • Quatrième indice : le bug ne se produisait que lorsque screenX et screenY étaient négatifs.
    • Cinquième indice : dans Chrome et Firefox, le coin supérieur gauche du moniteur principal correspond aux coordonnées (0,0).

  • Solution

    • La fonction isInvokedByMouse a été modifiée pour vérifier que screenX et screenY ne sont pas égaux à 0.
    • Le problème était complexe, mais la solution était simple.
    • Le code aurait besoin d’un refactoring, mais la solution actuelle est suffisante.

  • Leçon à retenir

    • Il faut se méfier des hypothèses sur le fonctionnement des API.
    • Malgré de nombreux tests, le bug n’avait pas été détecté.
    • Cela a montré que l’expérience utilisateur peut varier selon la configuration des moniteurs.

  • Correction du 2024-11-19 : il y avait une confusion autour de l’utilisation de screenX, et le composant de navigation a été refactoré. Un prochain billet de blog détaillera ce refactoring et répondra aux questions.

À lire aussi

1 commentaires

 
GN⁺ 2024-11-19
Avis Hacker News

  • Explique pourquoi, sur le site de la BBC, l’ouverture du menu via le clavier et via le pointeur produit des comportements différents

    • Lors d’une ouverture au clavier, le focus passe au premier lien sans animation
    • Lors d’une ouverture au pointeur, le focus passe au conteneur du menu
    • Lorsqu’on conçoit une expérience pour les utilisateurs du clavier, l’événement click est utile car il est indépendant du périphérique

  • Propose de modifier isInvokedByMouse pour vérifier si screenX et screenY sont différents de 0

    • Il faut tenir compte du cas où la souris se trouve réellement en 0,0
    • Un refactoring supplémentaire est nécessaire pour réduire la complexité des fonctions de gestion d’événements

  • Salue l’investissement de la BBC dans l’accessibilité ainsi que la découverte du bug

    • Se demande pourquoi le menu déroulant ne s’ouvre pas de manière cohérente pour tous les utilisateurs
    • S’interroge sur la capacité des frameworks web ou des composants web à résoudre ce type de problème

  • Tente de résoudre le problème avec des templates côté serveur, un framework CSS et un minimum de JS

    • N’est pas certain que cela respecte les standards d’accessibilité de la BBC

  • Souligne qu’il s’agit d’un bug provoqué par une mauvaise heuristique

    • Suggère que, lors de la vérification des coordonnées screenX et screenY, il faut prendre en compte les valeurs négatives et pas seulement les positives

  • S’interroge sur la raison pour laquelle le site utilise les coordonnées d’écran pour obtenir la position de la souris

    • Affirme que l’événement click fournit à lui seul des informations suffisantes

  • Se demande pourquoi les navigateurs rapportent des coordonnées différentes selon le moniteur

    • Craint que le fait que les API web disposent de ces informations n’introduise des risques de sécurité et de traçage

  • Demande quelle est la bonne méthode pour distinguer un clic de souris d’un clic au clavier

    • Propose de définir un indicateur à partir des événements mousedown et keydown

  • Estime qu’il faudrait utiliser les coordonnées du viewport plutôt que les coordonnées d’écran

    • Considère que les valeurs négatives dans l’espace écran ne constituent pas un bug

  • Est impressionné que le billet de blog ait été publié sans validation des équipes de direction et du service juridique de la BBC