Thành phần thanh điều hướng của BBC bị lỗi tùy theo màn hình ngoài

• Lỗi trong thành phần thanh điều hướng của BBC

  • Gần đây nhóm đã xử lý một lỗi kỳ lạ. Chỉ có một thành viên trong nhóm tái hiện được và nó chỉ xảy ra ở nhà.

• Nguyên nhân của lỗi

  • Khi nhấp vào nút 'Xem thêm' trên website BBC, menu lẽ ra phải mở ra, nhưng trên màn hình ngoài thì lại không hoạt động.
  • Lỗi chỉ xảy ra trên màn hình ngoài và không có vấn đề gì trên Safari.

• Tái hiện lỗi

  • Họ phát hiện lỗi chỉ xảy ra khi màn hình ngoài được đặt ở phía trên laptop.
  • Có thể tái hiện vấn đề bằng cách điều chỉnh vị trí màn hình trong phần cài đặt của hệ điều hành.

• Quá trình điều tra

  • Manh mối đầu tiên: Lỗi không xảy ra trên Safari.
  • Manh mối thứ hai: Chỉ xảy ra khi màn hình ngoài nằm phía trên và bên trái màn hình chính.
  • Manh mối thứ ba: Trên Chrome và Firefox, giá trị screenX và screenY là số âm.
  • Manh mối thứ tư: Lỗi chỉ xảy ra khi screenX và screenY là số âm.
  • Manh mối thứ năm: Trên Chrome và Firefox, góc trên bên trái của màn hình chính có tọa độ (0,0).

• Cách khắc phục

  • Đã sửa hàm isInvokedByMouse để kiểm tra xem screenX và screenY có khác 0 hay không.
  • Vấn đề khá phức tạp nhưng cách giải quyết lại đơn giản.
  • Cần refactor mã, nhưng giải pháp hiện tại là đủ.

• Bài học rút ra

  • Cần cẩn thận với các giả định về cách API hoạt động.
  • Dù đã kiểm thử đa dạng, lỗi này vẫn không bị phát hiện.
  • Điều này cho thấy trải nghiệm người dùng có thể thay đổi tùy theo cấu hình màn hình.

• Chỉnh sửa 2024-11-19: Có sự nhầm lẫn về việc sử dụng screenX, và thành phần điều hướng đã được refactor. Bài blog tiếp theo sẽ trình bày quá trình refactor và trả lời các câu hỏi.

[GN⁺]

Ý kiến Hacker News

• Giải thích lý do menu trên website của BBC có hành vi khác nhau khi mở bằng bàn phím và con trỏ

  • Khi mở bằng bàn phím, menu chuyển tiêu điểm tới liên kết đầu tiên mà không có hiệu ứng động
  • Khi mở bằng con trỏ, tiêu điểm chuyển tới vùng chứa menu
  • Khi xây dựng trải nghiệm cho người dùng bàn phím, sự kiện click hữu ích vì nó độc lập với thiết bị

• Đề xuất sửa isInvokedByMouse bằng cách kiểm tra screenX và screenY có khác 0 hay không

  • Cần tính đến trường hợp chuột thực sự ở vị trí 0,0
  • Cần tái cấu trúc thêm để giảm độ phức tạp của hàm xử lý sự kiện

• Khen ngợi khoản đầu tư của BBC vào khả năng truy cập và việc phát hiện lỗi

  • Đặt câu hỏi vì sao menu thả xuống không mở một cách nhất quán cho mọi người dùng
  • Thắc mắc liệu framework web hoặc web component có thể giải quyết các vấn đề này hay không

• Cố gắng giải quyết vấn đề bằng server-side template, CSS framework và lượng JS tối thiểu

  • Không chắc cách này có đáp ứng tiêu chuẩn truy cập của BBC hay không

• Chỉ ra đây là lỗi phát sinh từ một heuristic sai

  • Đề xuất khi kiểm tra tọa độ screenX và screenY thì phải xét cả giá trị âm chứ không chỉ giá trị dương

• Đặt nghi vấn vì sao website lại lấy vị trí chuột bằng tọa độ màn hình

  • Lập luận rằng chỉ riêng sự kiện click cũng đã cung cấp đủ thông tin

• Thắc mắc vì sao trình duyệt báo cáo tọa độ khác nhau tùy theo màn hình

  • Lo ngại việc web API nắm giữ thông tin này có thể gây ra rủi ro bảo mật và theo dõi thông tin

• Hỏi cách đúng để phân biệt click chuột và click bằng bàn phím

  • Đề xuất cách đặt cờ dựa trên các sự kiện mousedown và keydown

• Lập luận rằng nên dùng tọa độ viewport thay vì tọa độ màn hình

  • Cho rằng giá trị âm trong không gian màn hình không phải là lỗi

• Ấn tượng vì bài blog được viết mà không cần sự phê duyệt từ bộ phận quản lý và pháp lý của BBC