外部モニターによって壊れたBBCナビゲーションバーコンポーネント

• BBCナビゲーションバーコンポーネントのバグ

  • 最近、チームで奇妙なバグを解決した。あるチームメンバーだけが再現でき、自宅でのみ発生していた。

• バグの原因

  • BBCウェブサイトの「もっと見る」ボタンをクリックするとメニューが開くはずだが、外部モニターでは動作しなかった。
  • 外部モニターでのみ発生し、Safariでは問題なかった。

• 問題の再現

  • 外部モニターがノートPCの上に配置されているときにだけバグが発生することを発見した。
  • OS設定でモニターの位置を調整することで問題を再現できた。

• 調査の過程

  • 最初の手がかり: Safariではバグが発生しない。
  • 2つ目の手がかり: 外部モニターがメインモニターの上かつ左にあるときにだけ発生する。
  • 3つ目の手がかり: ChromeとFirefoxで screenX と screenY の値が負数だった。
  • 4つ目の手がかり: screenX と screenY が負数のときにだけバグが発生した。
  • 5つ目の手がかり: ChromeとFirefoxではメインモニターの左上が座標 (0,0) だった。

• 解決策

  • isInvokedByMouse 関数で screenX と screenY が 0 ではないことを確認するように変更した。
  • 複雑な問題だったが、解決策はシンプルだった。
  • コードのリファクタリングは必要だが、現時点ではこの解決策で十分だ。

• 教訓

  • APIの動作方式に対する思い込みには注意すべきだ。
  • さまざまなテストをしていたにもかかわらず、バグは見つからなかった。
  • モニター設定によってユーザー体験が変わりうることが分かった。

• 2024-11-19 修正: screenX の使用に関する混乱があり、ナビゲーションコンポーネントをリファクタリングした。次のブログ記事で、リファクタリングの過程と質問への回答を提供する予定だ。

[GN⁺]

Hacker Newsの意見

• BBCのウェブサイトで、キーボードとポインタでメニューを開く際に動作が異なる理由を説明している

  • キーボードで開くと、アニメーションなしで最初のリンクにフォーカスが移動する
  • ポインタで開くと、メニューコンテナにフォーカスが移動する
  • キーボード利用者向けの体験を作る際には、clickイベントがデバイス非依存であるため有用である

• isInvokedByMouseを修正し、screenXとscreenYが0以外かどうかを確認する方法を提案している

  • マウスが実際に0,0にある場合を考慮する必要がある
  • イベントハンドラ関数の複雑さを減らすために、追加のリファクタリングが必要である

• BBCのアクセシビリティへの投資とバグ発見を称賛している

  • ドロップダウンメニューがすべてのユーザーに対して一貫して開かない理由を問いかけている
  • ウェブフレームワークやWeb Componentsがこうした問題を解決できるのか気にしている

• サーバーサイドテンプレート、CSSフレームワーク、最小限のJSを使って問題を解決しようとした

  • BBCのアクセシビリティ基準に合致しているかは確信が持てない

• 誤ったヒューリスティックによって発生したバグだと指摘している

  • screenXとscreenY座標を確認する際、正の値だけでなく負の値も確認すべきだと提案している

• ウェブサイトがなぜ画面座標でマウス位置を取得するのか疑問を呈している

  • clickイベントだけでも十分な情報を提供すると主張している

• ブラウザがモニタによって異なる座標を報告する理由について疑問を抱いている

  • Web APIがこうした情報を持つことが、セキュリティや情報追跡のリスクを招く可能性があると懸念している

• マウスクリックとキーボードクリックを区別する正しい方法について質問している

  • mousedownとkeydownイベントに基づいてフラグを設定する方法を提案している

• 画面座標ではなくビューポート座標を使うべきだと主張している

  • 画面空間での負の値はバグではないと見ている

• BBCの管理部門および法務部門の承認なしにブログを書いたことに感銘を受けている