El componente de la barra de navegación de la BBC que se rompía según el monitor externo

• Un bug en el componente de la barra de navegación de la BBC

  • Hace poco el equipo resolvió un bug extraño. Solo una persona del equipo podía reproducirlo, y solo ocurría en su casa.

• La causa del bug

  • Al hacer clic en el botón "Más" del sitio web de la BBC, el menú debía abrirse, pero en un monitor externo no funcionaba.
  • Solo ocurría en el monitor externo, y en Safari no había problema.

• Reproducción del problema

  • Descubrieron que el bug solo ocurría cuando el monitor externo estaba colocado encima de la laptop.
  • Ajustando la posición del monitor en la configuración del sistema se podía reproducir el problema.

• Proceso de investigación

  • Primera pista: En Safari el bug no ocurría.
  • Segunda pista: Solo ocurría cuando el monitor externo estaba arriba y a la izquierda del monitor principal.
  • Tercera pista: En Chrome y Firefox, los valores de screenX y screenY eran negativos.
  • Cuarta pista: El bug solo ocurría cuando screenX y screenY eran negativos.
  • Quinta pista: En Chrome y Firefox, la esquina superior izquierda del monitor principal es la coordenada (0,0).

• Solución

  • Se cambió la función isInvokedByMouse para verificar que screenX y screenY no fueran 0.
  • Era un problema complejo, pero la solución fue simple.
  • Hace falta refactorizar el código, pero por ahora esta solución es suficiente.

• Lecciones

  • Hay que tener cuidado con las suposiciones sobre cómo funcionan las APIs.
  • A pesar de varias pruebas, el bug no se había detectado.
  • Aprendieron que la experiencia de usuario puede variar según la configuración de los monitores.

• Corrección 2024-11-19: Hubo confusión sobre el uso de screenX, y se refactorizó el componente de navegación. En la próxima entrada del blog se explicará el proceso de refactorización y se responderán las preguntas.

[GN⁺]

Comentarios de Hacker News

• Explica por qué el sitio web de la BBC muestra un comportamiento distinto al abrir el menú con teclado y con puntero

  • Al abrirlo con teclado, el foco se mueve al primer enlace sin animación
  • Al abrirlo con puntero, el foco se mueve al contenedor del menú
  • Al crear una experiencia para usuarios de teclado, el evento click es útil porque es independiente del dispositivo

• Sugiere modificar isInvokedByMouse para comprobar si screenX y screenY no son 0

  • Hay que considerar el caso en que el mouse realmente esté en 0,0
  • Hace falta refactorizar más para reducir la complejidad de la función manejadora de eventos

• Elogia la inversión de la BBC en accesibilidad y el hallazgo del bug

  • Pregunta por qué el menú desplegable no se abre de forma consistente para todos los usuarios
  • Se pregunta si un framework web o los web components podrían resolver este tipo de problemas

• Intentó resolver el problema usando plantillas del lado del servidor, un framework CSS y JS mínimo

  • No está seguro de si eso cumple con los estándares de accesibilidad de la BBC

• Señala que es un bug causado por una heurística incorrecta

  • Sugiere que al comprobar las coordenadas screenX y screenY también se verifiquen valores negativos, no solo positivos

• Cuestiona por qué el sitio web obtiene la posición del mouse mediante coordenadas de pantalla

  • Sostiene que solo el evento click ya proporciona información suficiente

• Se pregunta por qué el navegador reporta coordenadas distintas según el monitor

  • Le preocupa que las APIs web tengan esta información por los riesgos de seguridad y rastreo

• Pregunta cuál es la forma correcta de distinguir entre un clic del mouse y un clic con teclado

  • Sugiere establecer una bandera basándose en los eventos mousedown y keydown

• Afirma que se deberían usar coordenadas del viewport en lugar de coordenadas de pantalla

  • Considera que los valores negativos en el espacio de pantalla no son un bug

• Le impresiona que hayan escrito el blog sin la aprobación del equipo de gestión y legal de la BBC