O componente da barra de navegação da BBC que quebrou dependendo do monitor externo

• Bug no componente da barra de navegação da BBC

  • Recentemente, a equipe resolveu um bug estranho. Apenas um integrante conseguia reproduzi-lo, e isso só acontecia em casa.

• Causa do bug

  • Ao clicar no botão "Mais" do site da BBC, o menu deveria abrir, mas não funcionava em um monitor externo.
  • O problema só ocorria no monitor externo, e no Safari não havia problema.

• Reprodução do problema

  • Descobriu-se que o bug só acontecia quando o monitor externo ficava posicionado acima do notebook.
  • Foi possível reproduzir o problema ajustando a posição do monitor nas configurações do sistema.

• Processo de investigação

  • Primeira pista: no Safari, o bug não ocorria.
  • Segunda pista: só acontecia quando o monitor externo estava acima e à esquerda do monitor principal.
  • Terceira pista: no Chrome e no Firefox, os valores de screenX e screenY eram negativos.
  • Quarta pista: o bug só ocorria quando screenX e screenY eram negativos.
  • Quinta pista: no Chrome e no Firefox, o canto superior esquerdo do monitor principal é a coordenada (0,0).

• Solução

  • A função isInvokedByMouse foi alterada para verificar se screenX e screenY não são 0.
  • Era um problema complexo, mas a solução foi simples.
  • Ainda é necessário refatorar o código, mas a solução atual é suficiente.

• Lição aprendida

  • É preciso ter cuidado com suposições sobre como as APIs funcionam.
  • Apesar de vários testes, o bug não havia sido encontrado.
  • Ficou claro que a experiência do usuário pode mudar conforme a configuração dos monitores.

• Atualização em 2024-11-19: houve confusão sobre o uso de screenX, e o componente de navegação foi refatorado. Em um próximo post no blog, serão apresentados o processo de refatoração e as respostas às perguntas.

[GN⁺]

Comentários do Hacker News

• Explica por que o site da BBC apresenta comportamentos diferentes ao abrir o menu com teclado e com ponteiro

  • Ao abrir com teclado, o foco vai para o primeiro link sem animação
  • Ao abrir com ponteiro, o foco vai para o contêiner do menu
  • Ao criar uma experiência para usuários de teclado, o evento click é útil por ser independente do dispositivo

• Sugere corrigir isInvokedByMouse verificando se screenX e screenY são diferentes de 0

  • É preciso considerar o caso em que o mouse realmente esteja em 0,0
  • É necessário refatorar mais para reduzir a complexidade da função de tratamento de eventos

• Elogia o investimento da BBC em acessibilidade e a descoberta do bug

  • Questiona por que o menu suspenso não abre de forma consistente para todos os usuários
  • Pergunta se frameworks web ou web components poderiam resolver esse tipo de problema

• Tentou resolver o problema usando templates server-side, framework CSS e o mínimo possível de JS

  • Não tem certeza se isso atende aos padrões de acessibilidade da BBC

• Aponta que o bug foi causado por uma heurística incorreta

  • Sugere que, ao verificar as coordenadas screenX e screenY, valores negativos também devem ser considerados, e não apenas os positivos

• Questiona por que o site obtém a posição do mouse por coordenadas de tela

  • Argumenta que o evento click por si só já fornece informação suficiente

• Pergunta por que o navegador relata coordenadas diferentes dependendo do monitor

  • Demonstra preocupação de que APIs web terem esse tipo de informação possa trazer riscos de segurança e rastreamento

• Pergunta qual é a forma correta de distinguir cliques de mouse e cliques de teclado

  • Sugere definir uma flag com base nos eventos mousedown e keydown

• Defende que coordenadas da viewport deveriam ser usadas em vez de coordenadas da tela

  • Considera que valores negativos no espaço de tela não são um bug

• Fica impressionado com o fato de o blog ter sido publicado sem aprovação da gerência e do jurídico da BBC