Chú giải công cụ giống như vấn đề giao diện người dùng nhỏ nhất mà bạn có thể gặp phải. Chúng rất nhỏ và thường bị ẩn. Khi ai đó hỏi cách xây dựng một cái, câu trả lời truyền thống hầu như luôn được trả lời bằng cách sử dụng một số thư viện JavaScript. Và trong một thời gian dài, đó là lời khuyên hợp lý. Tôi cũng làm theo nó. Nhìn bề ngoài, một chú giải công cụ rất đơn giản. Di chuột hoặc tập trung vào một phần tử, hiển thị một hộp nhỏ có một số văn bản, sau đó ẩn nó khi người dùng di chuyển đi. Nhưng một khi bạn gửi một sản phẩm cho người dùng thực, các khía cạnh sẽ bắt đầu lộ rõ. Người dùng bàn phím Tab vào trình kích hoạt nhưng không bao giờ nhìn thấy chú giải công cụ. Trình đọc màn hình thông báo hai lần hoặc không thông báo gì cả. Chú giải công cụ nhấp nháy khi bạn di chuyển chuột quá nhanh. Nó chồng chéo nội dung trên màn hình nhỏ hơn. Nhấn Esc không đóng nó. Sự tập trung bị mất. Theo thời gian, mã chú giải công cụ của tôi đã phát triển thành thứ mà tôi không thực sự muốn sở hữu nữa. Người nghe sự kiện chất đống. Di chuột và tiêu điểm phải được xử lý riêng biệt. Nhấp chuột bên ngoài cần trường hợp đặc biệt. Các thuộc tính ARIA phải được đồng bộ hóa bằng tay. Mỗi bản sửa lỗi nhỏ đều bổ sung thêm một lớp logic khác. Các thư viện đã giúp ích, nhưng chúng cũng giống như những chiếc hộp đen mà tôi làm việc thay vì hiểu đầy đủ những gì đang xảy ra ở hậu trường. Đó là điều đã thúc đẩy tôi xem xét API Popover mới hơn. Tôi muốn xem điều gì sẽ xảy ra nếu tôi xây dựng lại một chú giải công cụ bằng cách sử dụng mô hình gốc của trình duyệt mà không có sự trợ giúp của thư viện. Khi chúng ta bắt đầu, cần lưu ý rằng, giống như bất kỳ tính năng mới nào, có một số vấn đề vẫn đang được giải quyết. Điều đó nói lên rằng, hiện tại nó được hỗ trợ rất tốt bởi trình duyệt, mặc dù có một số phần trong API tổng thể đang thay đổi liên tục. Trong thời gian chờ đợi, bạn nên để mắt đến Caniuse. Chú giải công cụ “Cũ” Trước API Popover, sử dụng thư viện chú giải công cụ không phải là một lối tắt. Đó là mặc định. Các trình duyệt không có khái niệm gốc về chú giải công cụ hoạt động trên chuột, bàn phím và công nghệ hỗ trợ. Nếu bạn quan tâm đến tính chính xác, lựa chọn duy nhất của bạn là sử dụng thư viện và đó chính xác là những gì tôi đã làm. Ở cấp độ cao, mẫu luôn giống nhau: phần tử kích hoạt, phần tử chú giải công cụ ẩn và JavaScript để phối hợp cả hai.
Thư viện đã xử lý hệ thống dây cho phép phần tử hiển thị khi di chuột hoặc tiêu điểm, ẩn khi làm mờ hoặc rời chuột và định vị lại/thay đổi kích thước khi cuộn.
Theo thời gian, chú giải công cụ có thể trở nên dễ hỏng. Những thay đổi nhỏ mang theo rủi ro. Sửa chữa nhỏ gây ra hồi quy. Tệ hơn nữa, việc thêm chú giải công cụ mới cũng có độ phức tạp tương tự. Về mặt kỹ thuật, mọi thứ đã hoạt động tốt nhưng chưa bao giờ có cảm giác ổn định hoặc trọn vẹn. Đó là tình trạng khi tôi quyết định xây dựng lại chú giải công cụ bằng API Popover gốc của trình duyệt. Khoảnh khắc tôi thử API Popover Tôi không chuyển sang sử dụng API Popover vì tôi muốn thử nghiệm điều gì đó mới mẻ. Tôi đã chuyển đổi vì tôi cảm thấy mệt mỏi với việc duy trì hành vi của chú giải công cụ mà tôi tin rằng trình duyệt đáng lẽ phải hiểu. Lúc đầu tôi đã hoài nghi. Hầu hết các API web mới đều hứa hẹn sự đơn giản nhưng vẫn yêu cầu xử lý chặt chẽ, xử lý từng trường hợp cụ thể hoặc logic dự phòng để tái tạo một cách lặng lẽ sự phức tạp tương tự mà bạn đang cố gắng thoát khỏi. Vì vậy, tôi đã thử API Popover theo cách nhỏ nhất có thể. Đây là những gì trông giống như:
1. Bàn phím “Chỉ hoạt động” Hỗ trợ bàn phím phụ thuộc vào nhiều lớp được sắp xếp chính xác: tiêu điểm phải kích hoạt chú giải công cụ, độ mờ phải ẩn nó, Esc phải được nối dây thủ công và thời gian rất quan trọng. Nếu bạn bỏ lỡ một trường hợp đặc biệt, chú giải công cụ sẽ mở quá lâu hoặc biến mất trước khi có thể đọc được. Với thuộc tính popover được đặt thành tự động hoặc thủ công, trình duyệt sẽ tiếp quản những điều cơ bản: Tab và Shift+Tab hoạt động bình thường, Esc luôn đóng chú giải công cụ và không cần thêm trình nghe.
Những gì đã biến mất khỏi cơ sở mã của tôi là trình xử lý phím tắt chung, logic dọn dẹp dành riêng cho Esc và kiểm tra trạng thái trong quá trình điều hướng bằng bàn phím. Trải nghiệm bàn phím không còn là thứ tôi phải duy trì nữa mà trở thành sự đảm bảo cho trình duyệt. 2. Khả năng dự đoán của trình đọc màn hình Đây làcải tiến lớn nhất. Ngay cả với công việc ARIA cẩn thận, hành vi vẫn khác nhau, như tôi đã trình bày trước đó. Mỗi thay đổi nhỏ đều cảm thấy rủi ro. Sử dụng một cửa sổ bật lên với vai trò phù hợp sẽ mang lại cảm giác ổn định hơn và có thể dự đoán được về những gì sắp xảy ra:
Và đây là một chiến thắng khác: Sau khi chuyển đổi, Lighthouse đã ngừng gắn cờ các cảnh báo trạng thái ARIA không chính xác cho tương tác, phần lớn là do không còn trạng thái ARIA tùy chỉnh nào khiến tôi vô tình mắc sai lầm.
3. Quản lý trọng tâm Sự tập trung đã từng rất mong manh. Trước đây, tôi có các quy tắc như: để trình kích hoạt tiêu điểm hiển thị chú giải công cụ, di chuyển tiêu điểm vào chú giải công cụ và không đóng, làm mờ trình kích hoạt khi quá gần cũng như đóng chú giải công cụ và khôi phục tiêu điểm theo cách thủ công. Điều này có tác dụng cho đến khi nó không hoạt động. Với API Popover, trình duyệt thực thi một mô hình đơn giản hơn trong đó tiêu điểm có thể di chuyển vào cửa sổ bật lên một cách tự nhiên hơn. Việc đóng cửa sổ bật lên sẽ trả lại tiêu điểm cho trình kích hoạt và không có bẫy lấy nét vô hình hoặc khoảnh khắc mất tiêu điểm. Và tôi đã không thêm mã khôi phục tiêu điểm; Tôi đã gỡ bỏ nó.
Kết luận API Popover có nghĩa là chú giải công cụ không còn là thứ bạn mô phỏng nữa. Chúng là thứ mà trình duyệt có thể hiểu được. Việc mở, đóng, hành vi bàn phím, xử lý Escape và phần lớn khả năng truy cập hiện đến từ chính nền tảng chứ không phải từ JavaScript đặc biệt. Điều đó không có nghĩa là các thư viện chú giải công cụ đã lỗi thời vì chúng vẫn có ý nghĩa đối với các hệ thống thiết kế phức tạp, khả năng tùy chỉnh cao hoặc các ràng buộc kế thừa, nhưng mặc định đã thay đổi. Lần đầu tiên, chú giải công cụ đơn giản nhất cũng có thể là chú giải chính xác nhất. Nếu bạn tò mò, hãy thử thử nghiệm này: Chỉ cần thay thế một chú giải công cụ trong sản phẩm của bạn bằng API Popover, không viết lại mọi thứ, không di chuyển toàn bộ hệ thống và chỉ cần chọn một chú giải và xem điều gì sẽ biến mất khỏi mã của bạn. Khi nền tảng cung cấp cho bạn một bản gốc tốt hơn, chiến thắng không chỉ là ít dòng JavaScript hơn mà còn ít điều bạn phải lo lắng hơn. Kiểm tra mã nguồn đầy đủ trong kho GitHub của tôi. Đọc thêm Để tìm hiểu sâu hơn về cửa sổ bật lên và các API liên quan:
“Poppin' In”, Geoff Graham “Làm rõ mối quan hệ giữa Popovers và Dialogs”, Zell Liew “popover=hint là gì?”, Una Kravets “Lệnh của Invoker”, Daniel Schwarz “Tạo thông báo tự động đóng bằng cửa sổ bật lên HTML”, Preethi Trình giải thích API Popover UI mở “Làm nổ tung những quả bóng bay”, John Rhea “Định vị neo CSS”, Juan Diego Rodríguez
MDN cũng cung cấp tài liệu kỹ thuật toàn diện cho API Popover.
