Comment un bot d'examen Modern Web Guidance aide MetaMask à proposer une UI moderne et accessible

Gilberto Cocchi

Rick Viscomi

Date de publication : 10 novembre 2026

MetaMask est une plate-forme financière auto-hébergée qui compte plus de 100 millions de téléchargements dans environ 190 pays. Son extension de navigateur est développée de manière ouverte, de sorte qu'un flux constant de demandes d'extraction provient de contributeurs internes et externes à l'entreprise.

Francis Nepomuceno, ingénieur UX chez MetaMask, a examiné un grand nombre de ces demandes d'extraction et souhaitait trouver un moyen cohérent d'aider les contributeurs à appliquer les bonnes pratiques d'accessibilité et à utiliser les fonctionnalités Web modernes. Dans son éditeur, il a déjà utilisé Modern Web Guidance de Chrome, un ensemble de compétences qui fournit aux agents de codage les bonnes pratiques de la plate-forme Web et des données de compatibilité des navigateurs. Pour offrir les mêmes conseils aux autres contributeurs, il a configuré un bot pour examiner chaque demande d'extraction dans le dépôt Open Source de MetaMask, quels que soient les outils utilisés par son auteur.

Le défi : suivre l'évolution des fonctionnalités Web modernes

Le HTML et le CSS modernes continuent d'ajouter des fonctionnalités qui améliorent l'accessibilité et l'expérience utilisateur, et il est difficile de savoir lesquelles fonctionnent sur tous les navigateurs. Avec de nombreux contributeurs, ces connaissances doivent être transmises à tous ceux qui ouvrent une demande d'extraction.

La sécurité est une autre raison de s'en soucier : MetaMask isole par défaut chaque dépendance tierce, ce qui rend l'adoption d'une fonctionnalité de navigateur native moins coûteuse que celle d'une bibliothèque alternative. Comme l'a dit Nepomuceno, "avoir accès à ces API modernes, comme pouvoir utiliser des boîtes de dialogue et des menus déroulants sans JavaScript, a été une grande victoire".

La solution : Modern Web Guidance examine chaque demande d'extraction

Le 16 septembre 2026, une demande d'extraction vers MetaMask/metamask-extension a ajouté une page "How it works" (Comment ça marche) avec une FAQ conçue comme la plupart des FAQ React :

// 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}

Environ cinq minutes plus tard, le bot a commenté. En citant le guide search-hidden-content, il a souligné trois points :

• Le rendu conditionnel de chaque réponse la supprime du DOM. Par conséquent, le texte réduit ne peut pas être trouvé avec la fonctionnalité de recherche sur la page du navigateur et est plus difficile à découvrir pour les technologies d'assistance.
• Une divulgation <details>/<summary> native (Baseline depuis 2020) conserve le contenu dans le DOM avec la sémantique appropriée. Pour les panneaux mutuellement exclusifs, un attribut name partagé (Baseline : nouvellement disponible depuis 2024) ferme automatiquement les autres. Pour une FAQ à ouverture multiple, omettez-le.
• Si l'équipe préfère son composant Disclosure existant, elle doit au moins conserver les réponses dans le DOM avec hidden="until-found" et un écouteur beforematch qui synchronise aria-expanded et l'état de l'icône.

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

Treize minutes plus tard, l'auteur a publié un correctif. Le composant est devenu une divulgation <details>/<summary> native, les réponses réduites sont restées dans le DOM pour la recherche sur la page, et deux boutons de navigation sont devenus des liens.

Ce bot est une automatisation de curseur exécutant Modern Web Guidance, et Nepomuceno l'a configuré avec un prompt de trois lignes. D'ici le 21 octobre 2026, soit cinq semaines après le lancement :

• Le bot a été exécuté sur environ 480 demandes d'extraction et a commenté 64 d'entre elles (57 demandes d'extraction de fonctionnalités et de correctifs, ainsi que 7 demandes d'extraction de publication et de synchronisation automatisées) provenant de 26 auteurs.
• Sur les demandes d'extraction de fonctionnalités et de correctifs, les ingénieurs ont corrigé 43 des résultats et partiellement corrigé trois autres, sur 22 demandes d'extraction.
• Les ingénieurs ont agi rapidement : sur les 38 correctifs avec un commit identifiable, 19 ont été appliqués en 15 minutes et 26 en une heure, soit une médiane de 15,2 minutes entre le commentaire et le correctif.

Voici comment MetaMask a configuré le bot, ce qu'il a détecté et où il a été bruyant.

La configuration est une requête de trois lignes

Interrogé sur la configuration de l'automatisation, Nepomuceno a répondu : "Bien sûr, il n'y a rien de spécial dans notre configuration. Nous nous contentons de rester concis et de nous concentrer sur l'essentiel." L'instruction complète :

- 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

Comment cela se comporte-t-il en pratique ?

• Il s'agit d'un avis : au cours de ses deux premiers jours, le bot a publié des avis "demande de modifications" (et une approbation), que les auteurs ont ignorés une fois qu'ils les ont traités. Depuis le 18 septembre, chaque avis est un commentaire. Elle ne bloque pas la fusion, ce qui permet aux auteurs de prendre la décision finale pour chaque suggestion.
• Il cite des guides et des fichiers spécifiques dans le dépôt : sur les 64 demandes d'extraction qu'il a commentées, le bot a relevé 122 résultats. Sur les 102 demandes d'extraction de fonctionnalités et de correctifs, 63 nomment le guide Modern Web Guidance spécifique qu'elles appliquent, comme search-hidden-content, state-aware-sticky-headers ou sms-otp-form, et pointent vers un fichier existant dans le dépôt lorsqu'il utilise déjà le modèle recommandé.
• Il reste silencieux, sauf si une demande d'extraction touche l'UI : sur les quelque 480 demandes d'extraction effectuées au cours de ces cinq semaines, au moins 100 ont touché l'UI ou le code client, et le bot a trouvé en moyenne deux résultats par demande d'extraction commentée. Les équipes disposant principalement de dépôts d'interface peuvent s'attendre à ce qu'il commente une plus grande partie.

Le prompt lui-même fonctionne avec n'importe quel exécuteur d'agent. Modern Web Guidance s'installe en tant que compétence ou plug-in pour Cursor, Claude Code, Codex, GitHub Copilot, Antigravity et d'autres agents de codage. Lorsqu'un agent exécute la compétence, il recherche les guides correspondants dans un index local sans clé API, et vérifie la différence par rapport à eux, en utilisant le modèle déjà fourni par l'exécuteur d'agent de l'équipe.

Ce que Modern Web Guidance a détecté et que les linters n'ont pas vu

Un linter statique peut signaler un attribut manquant sur un seul élément, mais les résultats suivants se résument au comportement d'interaction, à la sémantique HTML et à la façon dont les composants s'assemblent dans les fichiers.

Un champ de frais de transaction qui semblait modifiable, mais qui ignorait silencieusement les entrées

Dans les paramètres avancés des frais de transaction de MetaMask, le champ de limite de gaz (qui plafonne les frais de réseau qu'une transaction peut consommer) semblait modifiable, mais ignorait silencieusement les entrées des utilisateurs. Cela se produisait lorsqu'une estimation des frais était encore en cours de chargement ou avait échoué. En revanche, le bouton "Enregistrer" était désactivé, sans explication que la technologie d'assistance pouvait lire.

En citant le guide sur les formulaires, le bot a signalé trois corrections :

• Désactivez le champ de limite de gaz lorsqu'aucune estimation n'est disponible et associez son texte d'état visible au champ afin que la technologie d'assistance lise l'explication.
• Associez le bouton "Enregistrer" désactivé à ce même texte d'état afin que les lecteurs d'écran sachent pourquoi il est désactivé.
• Passez le champ en mode de saisie numérique pour que les utilisateurs mobiles disposent d'un pavé numérique.

L'auteur a appliqué les trois corrections aux deux fenêtres modales de paramètres et les a regroupées dans un seul composant.

Boutons de bannière qui masquaient leurs URL

Dans une bannière d'état de l'une des fonctionnalités de trading de MetaMask, les actions intégrées "FAQ" et "Contacter l'assistance MetaMask" ont été créées sous forme de boutons qui ouvrent un nouvel onglet avec JavaScript, plutôt que sous forme de liens. En trois minutes, le bot, citant les guides HTML et d'accessibilité, a signalé que les lecteurs d'écran les annonçaient comme des boutons et que les utilisateurs perdaient les affordances des liens, comme la copie de l'URL ou l'ouverture dans un nouvel onglet à partir du menu contextuel. Il a également indiqué un composant de bannière existant dans la codebase de MetaMask qui affiche déjà ces actions sous forme de liens réels.

Douze minutes plus tard, l'auteur a remplacé les deux actions par des liens. "Je trouve très utile que, lorsqu'une recommandation a été adoptée, les examens futurs la mentionnent comme exemple de référence", a déclaré Nepomuceno.

Entrées de validation dont les libellés se trouvaient ailleurs

La capacité du bot à lire plusieurs fichiers s'est également avérée utile pour un formulaire en plusieurs étapes. Un linter statique ne voit qu'un champ de texte avec un texte d'espace réservé à l'intérieur de chaque étape et ne peut pas savoir que l'en-tête et les instructions visibles se trouvent dans un composant de mise en page parent. En citant les guides sur les formulaires et l'accessibilité, le bot a détecté que l'espace réservé était le seul libellé du champ, que le titre de l'étape et les instructions de la mise en page parente n'étaient pas associés à l'entrée, et que les messages d'erreur et "code renvoyé" n'étaient pas annoncés aux lecteurs d'écran. Quinze minutes plus tard, les trois étaient corrigés, et le câblage d'accessibilité est resté intact lorsqu'une demande d'extraction ultérieure a restylé la saisie de code sous la forme de six zones de chiffres visuelles.

Quelques autres éléments détectés par le bot

Voici cinq autres conclusions tirées de la même période de cinq semaines :

• Un détail CSS que l'ingénieur à l'origine du bot a manqué : la propre demande d'extraction de Nepomuceno pour les onglets d'accueil fixes imbriquait des requêtes d'état de défilement CSS sans nommer leurs conteneurs et activait une bordure d'une manière qui décalait la mise en page en cours de défilement. Le bot a cité le guide sur les en-têtes persistants tenant compte de l'état, et il a corrigé les deux. Il a trouvé les avis utiles pour les requêtes de positionnement d'ancrage et d'état de défilement.
• Slippage plafonné en cours de saisie : les entrées de slippage personnalisées (le mouvement de prix qu'un utilisateur tolère sur une transaction) limitaient les valeurs à 100 % à chaque frappe, transformant 101 en 100 pendant que l'utilisateur était encore en train de taper. En suivant le guide sur les formulaires, le correctif a déplacé la validation au moment où le champ perd le focus et a ajouté une bannière d'avertissement visible.
• Un indicateur de chargement que les lecteurs d'écran ne pouvaient pas utiliser : un squelette de chargement de liste de jetons plaçait son libellé "chargement" sur un élément générique sans rôle, ce qui est interdit par ARIA. Le bot a indiqué deux composants de la codebase qui utilisaient déjà le modèle réservé aux lecteurs d'écran de MetaMask (tous deux mis à jour après un examen de Modern Web Guidance six jours plus tôt), et l'auteur a aligné le squelette sur ce modèle huit minutes plus tard.
• Action asynchrone non protégée : un bouton asynchrone "Afficher sur le fournisseur" n'avait pas de protection en cours, de sorte qu'un double-clic pouvait ouvrir des onglets en double et des observateurs en arrière-plan. L'auteur a ajouté une protection moins de quatre minutes après le commentaire.
• Validation des frappes sans formulaire : une page d'importation de NFT validait chaque frappe et ne comportait pas d'élément <form> pour la sémantique d'envoi. Les deux problèmes ont été résolus 19 minutes après l'examen.

Tous les avis sont publics. Les commentaires complets du bot se trouvent sur chaque demande d'extraction associée, et vous pouvez tous les parcourir sur GitHub.

Ce qu'il n'a pas corrigé et le niveau de bruit

Tous les résultats n'ont pas été enregistrés. Le tableau suivant montre comment MetaMask a comptabilisé les 102 résultats sur les demandes d'extraction de fonctionnalités et de correctifs (20 autres ont été trouvés sur sept demandes d'extraction de version et de synchronisation, où un examen n'est pas censé modifier le code) :

Répartition par thème des 122 résultats (y compris les 20 résultats sur les demandes d'extraction de version et de synchronisation) :

Voici quelques tendances qui se dégagent de ces chiffres :

• Les correctifs qui restent dans un seul composant sont beaucoup plus fréquents que les modifications d'accessibilité transversales. Les corrections de formulaires et de code HTML restent dans le composant examiné. Les auteurs les appliquent donc généralement immédiatement (19 corrections sur 31). L'accessibilité a généré le plus de résultats (38), mais seuls 12 ont été corrigés, généralement parce que le correctif n'entrait pas dans le champ d'application de la demande d'extraction ou nécessitait un composant de système de conception partagé qui n'existait pas encore.
• "Autre" correspond aux cas où il s'écarte des conseils de la plate-forme Web. Seize résultats concernaient la cohérence du système de conception, les bugs logiques, le texte, la qualité des tests, le mode sombre et l'hygiène du code. Trois d'entre eux ont été traités, dont une régression réelle (une modification de la liste des réseaux qui empêchait le préremplissage des formulaires). La plupart de ces 16 problèmes étaient faciles à ignorer, mais la détection de cette régression a justifié un examen rapide.
• Les faux positifs provenaient de la façon dont l'agent appliquait les guides, et la plupart des bruits peuvent être corrigés lors de la configuration. Comme le bot de révision est un agent qui lit un diff plutôt qu'un linter statique, ses faux positifs proviennent d'une mauvaise lecture du code environnant ou d'une application plus stricte d'une règle que celle du guide associé. Les prochains ajustements évidents consistent à ignorer les branches de publication et de synchronisation, et à resserrer la requête afin que l'agent respecte les règles explicitement énoncées dans un guide.

Nepomuceno décrit l'effet plus large sur l'équipe et le délai d'examen :

David Murdoch, ingénieur chez MetaMask, a également contribué aux conseils eux-mêmes : lorsque le guide de mise en page CSS comportait une erreur dans l'un de ses exemples, il a signalé un problème, et l'équipe Modern Web Guidance a fusionné une correction deux jours plus tard.

Ce que MetaMask dirait à une équipe qui envisage de l'utiliser

• Lisez les instructions avant de rédiger quoi que ce soit. Exécutez npx modern-web-guidance@latest search "accordion find in page" pour voir quels guides un agent récupérerait pour une tâche. Vous pouvez également parcourir l'ensemble des guides Modern Web Guidance.
• Commencez par le prompt de trois lignes et l'agent que vous exécutez déjà. Installez la compétence (npx modern-web-guidance@latest install ou la commande de plug-in d'un agent), pointez-la vers tout ce qui peut s'exécuter sur les demandes d'extraction, et demandez-lui de ne commenter que lorsqu'il y a une action à effectuer et de s'en tenir aux règles explicitement énoncées dans un guide. Le fait que le bot reste silencieux quand tout va bien est la raison pour laquelle les ingénieurs de MetaMask continuent de lire ses commentaires.
• Attendez-vous à ce que certains résultats ne soient pas traités. Sur 102 résultats concernant les demandes d'extraction de fonctionnalités et de correctifs, 43 ont été corrigés, et 36 ont été refusés ou non traités. Ce ratio fonctionne bien pour un bot d'examen consultatif, alors qu'il serait perturbateur en tant que vérification bloquante.
• Maintenez l'examen manuel. Le bot maîtrise la sémantique de la plate-forme Web, le CSS moderne et les modèles d'interaction, mais il ne connaît pas le produit.

Il y a aussi ce que MetaMask n'a pas encore mesuré : après cinq semaines, l'équipe n'a pas suivi le coût par demande d'extraction, l'environnement d'exécution, les comparaisons de modèles ni le comportement du bot de révision en dehors d'un codebase React.

Avec trois lignes de configuration, MetaMask a obtenu un bot d'examen qui cite un guide spécifique pour la plupart des résultats (et un exemple existant dans le dépôt, le cas échéant). Les suggestions acceptées sont généralement corrigées dans l'heure.