Cách bot đánh giá của Modern Web Guidance giúp MetaMask cung cấp giao diện người dùng hiện đại và dễ tiếp cận

Gilberto Cocchi

Rick Viscomi

Ngày xuất bản: 10 tháng 11 năm 2026

MetaMask là một nền tảng tài chính tự quản lý với hơn 100 triệu lượt tải xuống tại khoảng 190 quốc gia. Tiện ích trình duyệt của công ty được phát triển công khai, vì vậy, các yêu cầu kéo liên tục đến từ những người đóng góp bên trong và bên ngoài công ty.

Kỹ sư UX của MetaMask là Francis Nepomuceno đã xem xét nhiều yêu cầu kéo và muốn có một cách nhất quán để giúp người đóng góp áp dụng các phương pháp hỗ trợ tiếp cận hay nhất và sử dụng các tính năng web hiện đại. Trong trình chỉnh sửa của mình, anh đã sử dụng Hướng dẫn về web hiện đại của Chrome, một bộ kỹ năng cung cấp các phương pháp hay nhất về nền tảng web và dữ liệu về khả năng tương thích của trình duyệt cho các tác nhân lập trình. Để đưa ra hướng dẫn tương tự cho những người đóng góp khác, anh đã thiết lập một bot để xem xét mọi yêu cầu kéo đến kho lưu trữ nguồn mở của MetaMask, bất kể công cụ mà tác giả sử dụng.

Thách thức: Theo kịp các tính năng web hiện đại

HTML và CSS hiện đại liên tục bổ sung các tính năng giúp cải thiện khả năng hỗ trợ tiếp cận và trải nghiệm người dùng, đồng thời việc theo dõi những tính năng hoạt động trên các trình duyệt là rất khó khăn. Với nhiều người đóng góp, kiến thức đó phải đến được với tất cả những người mở yêu cầu lấy dữ liệu.

Bảo mật là một lý do khác cần quan tâm: MetaMask hộp cát mọi phần phụ thuộc của bên thứ ba theo mặc định, giúp việc áp dụng tính năng trình duyệt gốc trở nên rẻ hơn so với giải pháp thay thế thư viện. Như Nepomuceno đã nói, "việc có quyền truy cập vào các API hiện đại này, chẳng hạn như có thể sử dụng hộp thoại và trình đơn thả xuống mà không cần JavaScript, là một thành công lớn".

Giải pháp: Modern Web Guidance xem xét mọi yêu cầu kéo

Vào ngày 16 tháng 9 năm 2026, một yêu cầu lấy dữ liệu đến MetaMask/metamask-extension đã thêm một trang "Cách hoạt động" có phần Câu hỏi thường gặp được xây dựng theo cách mà hầu hết các Câu hỏi thường gặp về React được xây dựng:

// Before: Custom React state (removes content from DOM)
const [expanded, setExpanded] = useState(false);
<button type="button" aria-expanded={expanded} onClick={() => setExpanded(c => !c)}>
  <Text>{question}</Text>
</button>
{expanded ? <Text>{answer}</Text> : null}

Khoảng 5 phút sau, bot đã bình luận. Trích dẫn hướng dẫn của search-hidden-content, bài viết này đưa ra 3 điểm:

• Việc hiển thị từng câu trả lời theo điều kiện sẽ xoá câu trả lời đó khỏi DOM, vì vậy, bạn không thể tìm thấy văn bản thu gọn bằng tính năng tìm trong trang của trình duyệt và công nghệ hỗ trợ sẽ khó phát hiện hơn.
• Thông tin công bố <details>/<summary> gốc (Baseline kể từ năm 2020) giữ nội dung trong DOM với ngữ nghĩa phù hợp. Đối với các bảng điều khiển loại trừ lẫn nhau, thuộc tính name dùng chung (Baseline Mới có từ năm 2024) sẽ tự động đóng các bảng điều khiển khác; đối với Câu hỏi thường gặp có nhiều câu trả lời, hãy bỏ qua thuộc tính này.
• Nếu nhóm ưu tiên thành phần Disclosure hiện có, thì ít nhất nhóm nên giữ các câu trả lời trong DOM bằng hidden="until-found" và trình nghe beforematch đồng bộ hoá aria-expanded và trạng thái biểu tượng.

// After: Native <details> / <summary> disclosure (findable with find-in-page)
<details>
  <summary>
    <Text>{question}</Text>
  </summary>
  <Text>{answer}</Text>
</details>

Mười ba phút sau, tác giả đã đẩy một bản sửa lỗi. Thành phần này đã trở thành một thông tin công bố <details>/<summary> gốc, các câu trả lời thu gọn vẫn nằm trong DOM để tìm trong trang và hai nút điều hướng đã trở thành đường liên kết.

Bot đó là một Cursor Automation chạy Modern Web Guidance và Nepomuceno đã thiết lập bot đó bằng một câu lệnh gồm ba dòng. Đến ngày 21 tháng 10 năm 2026, tức là sau 5 tuần:

• Bot đã chạy trên khoảng 480 yêu cầu kéo và nhận xét về 64 yêu cầu kéo (57 yêu cầu kéo tính năng và bản sửa lỗi, cộng với 7 yêu cầu kéo tự động phát hành và đồng bộ hoá) của 26 tác giả.
• Trong các yêu cầu kéo về tính năng và bản sửa lỗi, các kỹ sư đã khắc phục 43 phát hiện và khắc phục một phần 3 phát hiện khác, trên 22 yêu cầu kéo.
• Các kỹ sư đã hành động nhanh chóng: trong số 38 bản sửa lỗi có thể xác định được, 19 bản sửa lỗi được áp dụng trong vòng 15 phút và 26 bản sửa lỗi được áp dụng trong vòng một giờ, với thời gian trung bình từ khi nhận xét đến khi sửa lỗi là 15,2 phút.

Sau đây là cách MetaMask định cấu hình bot, những gì bot phát hiện được và những điểm bot gây nhiễu.

Câu lệnh thiết lập gồm 3 dòng

Khi được hỏi về cách thiết lập quy trình tự động hoá, Nepomuceno trả lời: "Chắc chắn rồi, không có gì đặc biệt trong cách thiết lập của chúng tôi. Chúng tôi chỉ giữ cho nội dung ngắn gọn và có phạm vi rõ ràng." Toàn bộ chỉ dẫn:

- Run /modern-web-guidance for any client-facing changes
- Run /chrome-extensions for any relevant extension changes
- Comment on the PR only when there are issues to address. Keep the comment focused on actionable items

Cách hoạt động trong thực tế:

• Bot này chỉ đưa ra lời khuyên: Trong hai ngày đầu tiên, bot đã đăng các bài đánh giá "yêu cầu thay đổi" (và một bài phê duyệt) mà các tác giả đã bỏ qua sau khi giải quyết xong; kể từ ngày 18 tháng 9, mọi bài đánh giá đều là bình luận. Tính năng này không chặn việc hợp nhất, vì vậy, tác giả vẫn có quyền quyết định cuối cùng đối với từng đề xuất.
• Bot trích dẫn các hướng dẫn và tệp cụ thể trong kho lưu trữ: Trong số 64 yêu cầu kéo mà bot nhận xét, bot đã đưa ra 122 kết quả. Trong số 102 yêu cầu kéo về tính năng và bản sửa lỗi, 63 yêu cầu nêu rõ hướng dẫn cụ thể trong Modern Web Guidance mà họ đang áp dụng, chẳng hạn như search-hidden-content, state-aware-sticky-headers hoặc sms-otp-form, đồng thời trỏ đến một tệp hiện có trong kho lưu trữ khi tệp đó đã sử dụng mẫu đề xuất.
• Bot này chỉ hoạt động khi có yêu cầu kéo liên quan đến giao diện người dùng: Trong số khoảng 480 yêu cầu kéo trong 5 tuần đó, có ít nhất 100 yêu cầu kéo liên quan đến giao diện người dùng hoặc mã ứng dụng, và bot này tìm thấy trung bình khoảng 2 vấn đề cho mỗi yêu cầu kéo mà bot này nhận xét. Những nhóm có kho lưu trữ chủ yếu là giao diện người dùng có thể thấy Gemini nhận xét về một phần lớn hơn.

Bản thân câu lệnh này hoạt động với mọi trình chạy tác nhân; Modern Web Guidance được cài đặt dưới dạng một kỹ năng hoặc trình bổ trợ cho Cursor, Claude Code, Codex, GitHub Copilot, Antigravity và các tác nhân lập trình khác. Khi chạy kỹ năng, tác nhân sẽ tra cứu các hướng dẫn phù hợp trong chỉ mục cục bộ mà không cần khoá API, đồng thời kiểm tra điểm khác biệt so với các hướng dẫn đó bằng cách sử dụng bất kỳ mô hình nào mà trình chạy tác nhân của nhóm đã cung cấp.

Những vấn đề mà Modern Web Guidance phát hiện được nhưng linter thì không

Linter tĩnh có thể gắn cờ một thuộc tính bị thiếu trên một phần tử, nhưng những phát hiện sau đây liên quan đến hành vi tương tác, ngữ nghĩa HTML và cách các thành phần kết hợp với nhau trên các tệp.

Trường phí giao dịch có vẻ như có thể chỉnh sửa nhưng lại âm thầm bỏ qua dữ liệu đầu vào

Trong phần cài đặt phí giao dịch nâng cao của MetaMask, trường giới hạn gas (giới hạn phí mạng mà một giao dịch có thể tiêu tốn) có vẻ như có thể chỉnh sửa được nhưng lại âm thầm bỏ qua thông tin đầu vào của người dùng. Điều này xảy ra khi mức phí ước tính vẫn đang tải hoặc không tải được. Trong khi đó, nút Lưu bị tắt mà không có nội dung giải thích nào mà công nghệ hỗ trợ có thể đọc được.

Dựa vào hướng dẫn về biểu mẫu, bot đã gắn cờ 3 cách khắc phục:

• Tắt trường giới hạn gas khi không có thông tin ước tính và kết nối văn bản trạng thái hiển thị của trường đó với trường để công nghệ hỗ trợ đọc nội dung giải thích.
• Kết nối nút Lưu bị vô hiệu hoá với cùng một văn bản trạng thái đó để trình đọc màn hình biết lý do nút này bị vô hiệu hoá.
• Chuyển trường này sang chế độ nhập số để người dùng thiết bị di động có thể sử dụng bàn phím số.

Tác giả đã áp dụng cả ba cách khắc phục cho cả hai phương thức cài đặt và hợp nhất chúng thành một thành phần duy nhất.

Các nút trên biểu ngữ ẩn URL

Trong biểu ngữ trạng thái cho một trong các tính năng giao dịch của MetaMask, các thao tác "Câu hỏi thường gặp" và "liên hệ với Nhóm hỗ trợ MetaMask" được tạo dưới dạng các nút mở một thẻ mới bằng JavaScript thay vì dưới dạng đường liên kết. Trong vòng ba phút, bot đã trích dẫn hướng dẫn về HTML và hỗ trợ tiếp cận để gắn cờ rằng trình đọc màn hình thông báo các phần tử này là nút và người dùng mất đi các tính năng của đường liên kết, chẳng hạn như sao chép URL hoặc mở URL trong thẻ mới từ trình đơn theo bối cảnh. Nó cũng chỉ ra một thành phần biểu ngữ hiện có trong toàn bộ mã nguồn của MetaMask, vốn đã hiển thị các hành động này dưới dạng đường liên kết thực.

Mười hai phút sau, tác giả chuyển cả hai hành động thành đường liên kết. "Tôi thấy rất hữu ích khi một hướng dẫn được áp dụng, các bài đánh giá trong tương lai sẽ đề cập đến hướng dẫn đó như một ví dụ tham khảo", Nepomuceno cho biết.

Thông tin xác minh có nhãn nằm ở nơi khác

Khả năng đọc nhiều tệp của bot cũng phát huy tác dụng trên một biểu mẫu nhiều bước. Linter tĩnh chỉ thấy một trường văn bản có văn bản phần giữ chỗ bên trong mỗi bước và không thể biết rằng tiêu đề và hướng dẫn hiển thị nằm trong một thành phần bố cục mẹ. Trích dẫn hướng dẫn về biểu mẫu và hỗ trợ tiếp cận, bot nhận thấy phần giữ chỗ là nhãn duy nhất của trường, tiêu đề bước và hướng dẫn trong bố cục mẹ không liên kết với dữ liệu đầu vào, đồng thời thông báo lỗi và thông báo "đã gửi lại mã" không được thông báo cho trình đọc màn hình. Mười lăm phút sau, cả ba đều được khắc phục và hệ thống hỗ trợ tiếp cận đó vẫn giữ nguyên khi yêu cầu kéo tiếp theo định kiểu lại dữ liệu đầu vào của mã dưới dạng sáu hộp chữ số trực quan.

Một vài điều khác mà bot phát hiện được

Sau đây là 5 kết quả khác trong cùng một thử nghiệm kéo dài 5 tuần:

• Một chi tiết CSS mà kỹ sư đứng sau bot đã bỏ lỡ: Yêu cầu kéo của chính Nepomuceno cho các thẻ trang chủ cố định đã lồng các truy vấn trạng thái cuộn CSS mà không đặt tên cho vùng chứa của chúng và bật/tắt đường viền theo cách làm thay đổi bố cục giữa chừng. Bot đã trích dẫn hướng dẫn về tiêu đề cố định nhận biết trạng thái, và anh ấy đã sửa cả hai. Anh nhận thấy các bài đánh giá này hữu ích cho việc định vị neo và truy vấn trạng thái cuộn.
• Giới hạn độ trượt giá giữa chừng khi nhập: Giá trị độ trượt giá tuỳ chỉnh (mức biến động giá mà người dùng chấp nhận trong một giao dịch) bị giới hạn ở mức 100% cho mỗi lần nhập, khiến 101 trở thành 100 trong khi người dùng vẫn đang nhập. Theo hướng dẫn về biểu mẫu, bản sửa lỗi đã chuyển quy trình xác thực sang thời điểm trường mất tiêu điểm và thêm một biểu ngữ cảnh báo dễ thấy.
• Chỉ báo tải mà trình đọc màn hình không thể sử dụng: Khung tải danh sách mã thông báo đặt nhãn "đang tải" trên một phần tử chung không có vai trò, điều này bị ARIA cấm. Bot đã chỉ ra hai thành phần trong toàn bộ mã nguồn vốn đã sử dụng mẫu chỉ dành cho trình đọc màn hình của MetaMask (cả hai đều được cập nhật sau khi Modern Web Guidance xem xét sáu ngày trước đó) và tác giả đã điều chỉnh bộ khung theo mẫu đó tám phút sau.
• Hành động không đồng bộ không được bảo vệ: Nút "Xem trên nhà cung cấp" không đồng bộ không có biện pháp bảo vệ trong khi thực hiện, vì vậy, thao tác nhấp đúp có thể mở các thẻ trùng lặp và trình theo dõi trong nền. Tác giả đã thêm một lính gác chưa đầy bốn phút sau khi bình luận.
• Xác thực thao tác gõ phím mà không có biểu mẫu: Trang Nhập NFT được xác thực trên mỗi thao tác gõ phím và thiếu phần tử <form> cho ngữ nghĩa gửi. Cả hai đều được khắc phục 19 phút sau khi xem xét.

Mọi bài đánh giá đều được công khai. Bạn có thể xem toàn bộ nhận xét của bot trên từng yêu cầu kéo được liên kết, và bạn có thể duyệt xem tất cả nhận xét trên GitHub.

Những vấn đề chưa được khắc phục và mức độ ồn ào

Không phải phát hiện nào cũng được chấp nhận. Bảng sau đây cho thấy cách MetaMask kiểm đếm 102 kết quả về các yêu cầu kéo tính năng và bản sửa lỗi (20 kết quả khác nằm trong 7 yêu cầu kéo bản phát hành và đồng bộ hoá, trong đó quy trình xem xét không được kỳ vọng sẽ thay đổi mã):

Phân tích theo chủ đề trên tất cả 122 kết quả (bao gồm cả 20 kết quả về yêu cầu phát hành và kéo đồng bộ hoá):

Một vài quy luật trong những con số đó:

• Các bản sửa lỗi nằm trong một thành phần thường được áp dụng nhiều hơn so với các thay đổi về khả năng hỗ trợ tiếp cận trên nhiều thành phần. Các bản sửa lỗi biểu mẫu và HTML vẫn nằm trong thành phần đang được xem xét, vì vậy, tác giả thường áp dụng ngay (19 trong số 31 bản sửa lỗi). Hỗ trợ tiếp cận có nhiều phát hiện nhất (38) nhưng chỉ có 12 phát hiện được khắc phục, thường là do bản sửa lỗi nằm ngoài phạm vi của yêu cầu kéo hoặc cần có một thành phần hệ thống thiết kế dùng chung chưa tồn tại.
• "Khác" là nơi nó đi ra ngoài hướng dẫn về nền tảng web. Mười sáu phát hiện bao gồm tính nhất quán của hệ thống thiết kế, lỗi logic, bản sao, chất lượng kiểm thử, chế độ tối và tính rõ ràng của mã; 3 phát hiện đã được xử lý, một trong số đó là lỗi hồi quy thực sự (thay đổi danh sách mạng làm hỏng tính năng điền trước biểu mẫu). Hầu hết trong số 16 lỗi đó đều dễ dàng bỏ qua, nhưng việc phát hiện lỗi hồi quy đó khiến chúng đáng được xem xét nhanh.
• Kết quả dương tính giả xuất phát từ cách nhân viên hỗ trợ áp dụng hướng dẫn và hầu hết các vấn đề đều có thể khắc phục được trong quá trình thiết lập. Vì bot đánh giá là một tác nhân đọc bản khác biệt thay vì linter tĩnh, nên kết quả dương tính giả của bot này là do đọc sai mã xung quanh hoặc áp dụng quy tắc nghiêm ngặt hơn so với hướng dẫn được liên kết. Bỏ qua các nhánh phát hành và đồng bộ hoá, đồng thời thắt chặt câu lệnh để tác nhân tuân thủ các quy tắc được nêu rõ trong hướng dẫn là những điều chỉnh tiếp theo rõ ràng.

Nepomuceno mô tả tác động rộng hơn đối với nhóm và thời gian xem xét:

Kỹ sư David Murdoch của MetaMask cũng đã đóng góp ý kiến cho chính tài liệu hướng dẫn này: Khi hướng dẫn về bố cục CSS có lỗi trong một ví dụ, anh đã gửi báo cáo vấn đề và nhóm Modern Web Guidance đã hợp nhất nội dung chỉnh sửa sau đó hai ngày.

Lời khuyên của MetaMask dành cho các nhóm đang cân nhắc sử dụng dịch vụ này

• Đọc hướng dẫn trước khi viết bất cứ nội dung gì. Chạy npx modern-web-guidance@latest search "accordion find in page" để xem tác nhân sẽ truy xuất hướng dẫn nào cho một nhiệm vụ. Bạn cũng có thể duyệt xem toàn bộ hướng dẫn về Modern Web Guidance.
• Bắt đầu bằng câu lệnh gồm 3 dòng và tác nhân bạn đã chạy. Cài đặt kỹ năng (npx modern-web-guidance@latest install hoặc lệnh bổ trợ của tác nhân), trỏ bất kỳ thứ gì có thể chạy trên các yêu cầu kéo vào kỹ năng đó và yêu cầu kỹ năng đó chỉ nhận xét khi có điều gì đó có thể thực hiện được và tuân thủ các quy tắc được nêu rõ ràng trong hướng dẫn. Việc giữ cho bot im lặng khi không có vấn đề gì xảy ra là lý do các kỹ sư của MetaMask vẫn đọc bình luận của bot.
• Một số phát hiện có thể không được giải quyết. Trong số 102 kết quả tìm thấy về tính năng và yêu cầu kéo bản sửa lỗi, 43 kết quả đã được khắc phục và 36 kết quả bị từ chối hoặc không được giải quyết. Tỷ lệ này phù hợp với bot xem xét tư vấn, trong khi tỷ lệ này sẽ gây gián đoạn khi kiểm tra chặn.
• Tiếp tục cho phép nhân viên đánh giá. Bot này rất giỏi về ngữ nghĩa nền tảng web, CSS hiện đại và các mẫu tương tác, nhưng không biết về sản phẩm.

Ngoài ra, còn có những điều mà MetaMask chưa đo lường được: sau 5 tuần, nhóm chưa theo dõi chi phí cho mỗi yêu cầu kéo, thời gian chạy, so sánh mô hình hoặc cách bot đánh giá hoạt động bên ngoài toàn bộ mã nguồn React.

Chỉ với 3 dòng cấu hình, MetaMask đã có một bot đánh giá trích dẫn một hướng dẫn cụ thể cho hầu hết các kết quả (và một ví dụ hiện có trong kho lưu trữ nếu có). Các đề xuất được chấp nhận thường được khắc phục trong vòng một giờ.