Jak bot sprawdzający Przewodnika po współczesnych technologiach internetowych pomaga MetaMask udostępniać dostępny, nowoczesny interfejs

Gilberto Cocchi

Rick Viscomi

Opublikowano: 10 listopada 2026 r.

MetaMask to samodzielna platforma finansowa, która została pobrana ponad 100 milionów razy w około 190 krajach. Rozszerzenie do przeglądarki jest rozwijane w otwarty sposób, więc stale napływają żądania pull od współtwórców z firmy i spoza niej.

Inżynier UX w MetaMask, Francis Nepomuceno, przejrzał wiele z tych żądań pull i chciał znaleźć spójny sposób, aby pomóc współtwórcom w stosowaniu sprawdzonych metod dotyczących ułatwień dostępu i korzystaniu z nowoczesnych funkcji internetowych. W edytorze używał już Przewodnika po współczesnych technologiach internetowych w Chrome, czyli zestawu umiejętności, który zapewnia agentom kodującym sprawdzone metody dotyczące platformy internetowej i dane o zgodności z przeglądarkami. Aby zapewnić te same wskazówki innym współtwórcom, skonfigurował bota, który sprawdza każde żądanie pull do repozytorium open source MetaMask, niezależnie od narzędzi używanych przez autora.

Wyzwanie: nadążanie za nowoczesnymi funkcjami internetowymi

Nowoczesne technologie HTML i CSS stale dodają funkcje, które poprawiają dostępność i wrażenia użytkowników, a śledzenie, które z nich działają w różnych przeglądarkach, jest trudne. Przy wielu współtwórcach ta wiedza musi dotrzeć do każdego, kto otwiera żądanie pull.

Bezpieczeństwo to kolejny powód, dla którego warto się tym zainteresować: MetaMask domyślnie izoluje każdą zależność od innych firm, co sprawia, że wdrożenie natywnej funkcji przeglądarki jest tańsze niż w przypadku alternatywnej biblioteki. Jak ujął to Nepomuceno, „dostęp do tych nowoczesnych interfejsów API, takich jak możliwość korzystania z okien dialogowych i menu bez JavaScriptu, był dużym sukcesem”.

Rozwiązanie: Przewodnik po współczesnych technologiach internetowych sprawdza każde żądanie pull

16 września 2026 r. pull request do MetaMask/metamask-extension dodał stronę „Jak to działa” z sekcją najczęstszych pytań utworzoną w sposób, w jaki tworzy się większość sekcji najczęstszych pytań w 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}

Około 5 minut później bot dodał komentarz. Powołując się na przewodnik search-hidden-content, przedstawiono 3 argumenty:

• Warunkowe renderowanie każdej odpowiedzi powoduje usunięcie jej z DOM, więc zwiniętego tekstu nie można znaleźć za pomocą funkcji wyszukiwania na stronie w przeglądarce i jest on trudniejszy do wykrycia przez technologie wspomagające osoby z niepełnosprawnością.
• <details>/<summary> – natywny element ujawniający (podstawowy od 2020 r.) utrzymuje treść w DOM z odpowiednią semantyką. W przypadku paneli, które wykluczają się wzajemnie, udostępniony atrybut name (Baseline Newly available since 2024) automatycznie zamyka pozostałe. W przypadku sekcji Najczęstsze pytania, w której można otworzyć kilka paneli, pomiń ten atrybut.
• Jeśli zespół wolałby zachować dotychczasowy komponent Disclosure, powinien przynajmniej zachować odpowiedzi w DOM z atrybutem hidden="until-found" i detektorem beforematch, który synchronizuje atrybut aria-expanded i stan ikony.

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

Trzynaście minut później autor opublikował poprawkę. Komponent stał się natywnym elementem <details>/<summary>, zwinięte odpowiedzi pozostały w DOM na potrzeby wyszukiwania na stronie, a 2 przyciski nawigacyjne stały się linkami.

Ten bot to Cursor Automation, który korzysta z Przewodnika po współczesnych technologiach internetowych. Nepomuceno skonfigurował go za pomocą 3-wierszowego prompta. Do 21 października 2026 r. (5 tygodni):

• Bot został uruchomiony w przypadku około 480 żądań pull i skomentował 64 z nich (57 żądań pull dotyczących funkcji i poprawek oraz 7 automatycznych żądań pull dotyczących wersji i synchronizacji) od 26 autorów.
• W ramach żądań pull dotyczących funkcji i poprawek inżynierowie naprawili 43 problemy i częściowo naprawili 3 kolejne w 22 żądaniach pull.
• Inżynierowie zareagowali szybko: spośród 38 poprawek z możliwym do zidentyfikowania zatwierdzeniem 19 zostało wprowadzonych w ciągu 15 minut, a 26 – w ciągu godziny.Mediana czasu od komentarza do poprawki wyniosła 15, 2 minuty.

Oto jak MetaMask skonfigurował bota, co udało się wykryć i gdzie było zbyt dużo fałszywych alarmów.

Konfiguracja to 3-wierszowy prompt

Zapytany o to, jak skonfigurowana jest automatyzacja, Nepomuceno odpowiedział: „W naszej konfiguracji nie ma niczego szczególnego. Staramy się, aby były zwięzłe i skoncentrowane na konkretnym temacie”. Cała instrukcja:

- 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

Jak to działa w praktyce:

• Ma charakter doradczy: w ciągu pierwszych 2 dni bot opublikował opinie z prośbą o wprowadzenie zmian (i jedną zatwierdzającą), które autorzy odrzucili po ich uwzględnieniu. Od 18 września każda opinia jest komentarzem. Nie blokuje scalania, więc autorzy mają ostateczny głos w sprawie każdej sugestii.
• Bot cytuje konkretne przewodniki i pliki w repozytorium: w 64 żądaniach pull, które skomentował, bot zgłosił 122 ustalenia. Spośród 102 żądań pull dotyczących funkcji i poprawek 63 zawiera nazwę konkretnego przewodnika po współczesnych technologiach internetowych, który jest stosowany, np. search-hidden-content, state-aware-sticky-headers lub sms-otp-form, i wskazuje istniejący plik w repozytorium, który już używa zalecanego wzorca.
• Bot nie reaguje, chyba że żądanie pull dotyczy interfejsu: spośród około 480 żądań pull w ciągu tych 5 tygodni co najmniej 100 dotyczyło interfejsu lub kodu klienta, a bot wykrywał średnio 2 problemy na żądanie pull, które skomentował. Zespoły, które mają głównie repozytoria frontendowe, mogą spodziewać się komentarzy w większej liczbie przypadków.

Sam prompt działa z dowolnym środowiskiem wykonawczym agenta. Przewodnik po współczesnych technologiach internetowych instaluje się jako umiejętność lub wtyczka do Cursor, Claude Code, Codex, GitHub Copilot, Antigravity i innych agentów kodowania. Gdy agent uruchamia umiejętność, wyszukuje pasujące przewodniki w lokalnym indeksie bez konieczności podawania kluczy interfejsu API i sprawdza różnice, korzystając z modelu, który jest już dostępny w module uruchamiającym agenta zespołu.

Co wykrywa Przewodnik po współczesnych technologiach internetowych, czego nie wykrywają lintery

Statyczny linter może oznaczyć brakujący atrybut w pojedynczym elemencie, ale poniższe wyniki dotyczą zachowania interakcji, semantyki HTML i tego, jak komponenty pasują do siebie w plikach.

pole opłaty transakcyjnej, które wyglądało na edytowalne, ale ignorowało wprowadzane dane;

W zaawansowanych ustawieniach opłat transakcyjnych MetaMask pole limitu gazu (które ogranicza opłatę sieciową, jaką może pochłonąć transakcja) wyglądało na edytowalne, ale ignorowało dane wprowadzane przez użytkowników. Działo się tak, gdy szacunkowa opłata była nadal wczytywana lub wystąpił błąd. Przycisk Zapisz był wyłączony, ale nie było żadnego wyjaśnienia, które mogłaby odczytać technologia wspomagająca osoby z niepełnosprawnością.

Powołując się na przewodnik po formularzach, bot wskazał 3 poprawki:

• Wyłącz pole limitu gazu, gdy nie jest dostępna żadna wartość szacunkowa, i połącz jego widoczny tekst stanu z polem, aby technologia wspomagająca osoby z niepełnosprawnością odczytywała wyjaśnienie.
• Połącz wyłączony przycisk Zapisz z tym samym tekstem stanu, aby czytniki ekranu wiedziały, dlaczego jest wyłączony.
• Przełącz pole na tryb wprowadzania liczb, aby użytkownicy urządzeń mobilnych widzieli klawiaturę numeryczną.

Autor zastosował wszystkie 3 poprawki w obu oknach ustawień i połączył je w jeden komponent.

przyciski banera, które ukrywały swoje adresy URL;

Na banerze stanu jednej z funkcji handlowych MetaMask działania „Najczęstsze pytania” i „Skontaktuj się z zespołem pomocy MetaMask” zostały utworzone jako przyciski, które otwierały nową kartę za pomocą JavaScriptu, a nie jako linki. W ciągu 3 minut bot, powołując się na przewodniki dotyczące HTML i ułatwień dostępu, poinformował, że czytniki ekranu odczytują je jako przyciski i że użytkownicy tracą możliwości związane z linkami, takie jak kopiowanie adresu URL czy otwieranie go w nowej karcie z menu kontekstowego. Wskazał też istniejący komponent banera w bazie kodu MetaMask, który już renderuje te działania jako rzeczywiste linki.

Dwanaście minut później autor zmienił oba działania na linki. „Bardzo przydatne jest to, że po przyjęciu wytycznych przyszłe opinie wspominają o nich jako o przykładzie referencyjnym” – mówi Nepomuceno.

Dane wejściowe weryfikacji, których etykiety znajdowały się w innym miejscu.

Możliwość odczytywania przez bota wielu plików sprawdziła się też w przypadku wieloetapowego formularza. Statyczny linter widzi tylko pole tekstowe z tekstem zastępczym w każdym kroku i nie może stwierdzić, że widoczny nagłówek i instrukcje znajdują się w komponencie układu nadrzędnego. Bot, powołując się na przewodniki dotyczące formularzy i ułatwień dostępu, zauważył, że obiekt zastępczy był jedyną etykietą pola, tytuł kroku i instrukcje w układzie nadrzędnym nie były powiązane z danymi wejściowymi, a komunikaty o błędach i ponownym wysłaniu kodu nie były odczytywane przez czytniki ekranu. 15 minut później wszystkie 3 problemy zostały rozwiązane, a kod ułatwień dostępu pozostał nienaruszony, gdy kolejne żądanie pull zmieniło styl kodu na 6 wizualnych pól cyfrowych.

Kilka innych rzeczy, które wykrył bot

Oto 5 dodatkowych wniosków z tego samego 5-tygodniowego okresu:

• Szczegół CSS, który umknął inżynierowi tworzącemu bota: Nepomuceno w swoim pull requeście dotyczącym przyklejonych kart głównych zagnieździł zapytania CSS scroll-state bez nazwania ich kontenerów i przełączył obramowanie w sposób, który przesuwał układ w trakcie przewijania. Bot zacytował przewodnik po przyklejonych nagłówkach uwzględniających stan, a programista naprawił oba błędy. Uznał, że opinie są przydatne w przypadku zapytań dotyczących pozycjonowania kotwic i stanu przewijania.
• Poślizg cenowy ograniczony w trakcie wpisywania: niestandardowe wartości poślizgu cenowego (zmiany ceny, którą użytkownik zaakceptuje w ramach transakcji) były ograniczane do 100% przy każdym naciśnięciu klawisza, co powodowało, że wartość 101 zmieniała się w 100, gdy użytkownik jeszcze pisał. Zgodnie z przewodnikiem po formularzach poprawka przeniosła weryfikację do momentu, gdy pole traci zaznaczenie, i dodała widoczny baner z ostrzeżeniem.
• Wskaźnik wczytywania, którego nie mogły używać czytniki ekranu: szkielet wczytywania listy tokenów umieścił etykietę „wczytywanie” na elemencie ogólnym bez roli, co jest zabronione przez ARIA. Bot wskazał 2 komponenty w bazie kodu, które już korzystały ze wzorca MetaMask przeznaczonego tylko dla czytników ekranu (oba zostały zaktualizowane po sprawdzeniu przez Przewodnik po współczesnych technologiach internetowych 6 dni wcześniej). 8 minut później autor dostosował szkielet do tego wzorca.
• Niezabezpieczone działanie asynchroniczne: asynchroniczny przycisk „Wyświetl u dostawcy” nie miał zabezpieczenia przed wielokrotnym kliknięciem, więc kliknięcie dwukrotnie mogło otworzyć zduplikowane karty i procesy obserwujące w tle. Autor dodał strażnika mniej niż 4 minuty po komentarzu.
• Weryfikacja naciśnięć klawiszy bez formularza: strona importowania NFT była weryfikowana przy każdym naciśnięciu klawisza i nie zawierała elementu <form> do przesyłania semantyki. Oba problemy zostały rozwiązane 19 minut po sprawdzeniu.

Każda opinia jest publiczna. Pełne komentarze bota znajdują się w każdym połączonym żądaniu pull. Możesz je wszystkie przeglądać na GitHubie.

co nie zostało naprawione i jak głośno działa urządzenie.

Nie wszystkie wyniki zostały zapisane. Tabela poniżej pokazuje, jak MetaMask podsumował 102 wyniki dotyczące żądań pull dotyczących funkcji i poprawek (20 kolejnych dotyczyło 7 żądań pull dotyczących wersji i synchronizacji, w przypadku których nie oczekiwano, że sprawdzenie zmieni kod):

Podział według motywu we wszystkich 122 wynikach (w tym 20 dotyczących żądań pull związanych z wydaniem i synchronizacją):

Kilka wzorców w tych liczbach:

• Poprawki, które dotyczą tylko jednego komponentu, są wprowadzane znacznie częściej niż zmiany dotyczące ułatwień dostępu, które wpływają na wiele komponentów. Poprawki formularzy i HTML pozostają w sprawdzanym komponencie, więc autorzy zwykle stosują je od razu (naprawiono 19 z 31 błędów). Najwięcej wyników (38) dotyczyło ułatwień dostępu, ale tylko 12 z nich zostało naprawionych, zwykle dlatego, że poprawka wykraczała poza zakres żądania pull lub wymagała udostępnionego komponentu systemu projektowania, który jeszcze nie istniał.
• „Inne” to kategoria, która nie jest zgodna ze wskazówkami dotyczącymi platformy internetowej. Szesnaście wyników dotyczyło spójności systemu projektowania, błędów logicznych, tekstu, jakości testów, trybu ciemnego i higieny kodu. Podjęto działania w przypadku 3 z nich, z czego 1 był prawdziwą regresją (zmiana listy sieci, która uniemożliwiała wstępne wypełnianie formularza). Większość z tych 16 testów można było łatwo pominąć, ale wykrycie tej regresji sprawiło, że warto było je szybko przejrzeć.
• Fałszywie pozytywne wyniki wynikały z tego, jak agent stosował przewodniki, a większość szumu można wyeliminować w konfiguracji. Ponieważ bot sprawdzający jest agentem, który odczytuje różnice, a nie statycznym linterem, fałszywe alarmy wynikały z błędnego odczytania otaczającego kodu lub zbyt rygorystycznego stosowania reguły w porównaniu z połączonym przewodnikiem. Kolejnymi oczywistymi zmianami są pominięcie gałęzi release i sync oraz doprecyzowanie prompta, aby agent trzymał się zasad wyraźnie określonych w przewodniku.

Nepomuceno opisuje wpływ na zespół i czas sprawdzania:

David Murdoch, inżynier MetaMask, również przyczynił się do ulepszenia samego przewodnika: gdy w jednym z przykładów w przewodniku po układzie CSS pojawił się błąd, zgłosił problem, a zespół Przewodnika po współczesnych technologiach internetowych wprowadził poprawkę 2 dni później.

Co MetaMask powiedziałby zespołowi, który rozważa korzystanie z tej usługi

• Zanim zaczniesz pisać, przeczytaj wskazówki. Uruchom npx modern-web-guidance@latest search "accordion find in page", aby zobaczyć, które przewodniki agent pobierze do zadania. Możesz też przejrzeć pełny zestaw przewodników po współczesnych technologiach internetowych.
• Zacznij od 3-wierszowego prompta i agenta, którego już używasz. Zainstaluj umiejętność (npx modern-web-guidance@latest install lub polecenie wtyczki agenta), skieruj na nią wszystko, co może działać na żądaniach pull, i powiedz jej, aby komentowała tylko wtedy, gdy jest coś do zrobienia, i przestrzegała zasad wyraźnie określonych w przewodniku. Dzięki temu, że bot nie odzywa się, gdy wszystko jest w porządku, inżynierowie MetaMask nadal czytają jego komentarze.
• Niektóre problemy mogą pozostać nierozwiązane. Spośród 102 wyników dotyczących funkcji i poprawek w żądaniach pull 43 zostały poprawione, a 36 zostało odrzuconych lub nie zostało uwzględnionych. Taki współczynnik sprawdza się w przypadku bota doradczego, ale byłby uciążliwy w przypadku blokowania.
• Nadal korzystaj z weryfikatorów. Bot dobrze zna semantykę platformy internetowej, nowoczesny CSS i wzorce interakcji, ale nie zna produktu.

Są też rzeczy, których MetaMask jeszcze nie zmierzył: po 5 tygodniach zespół nie śledził kosztów żądań pull, czasu działania, porównań modeli ani zachowania bota do sprawdzania kodu poza bazą kodu React.

Dzięki 3 liniom konfiguracji MetaMask ma bota do sprawdzania, który w przypadku większości wyników podaje konkretny przewodnik (oraz istniejący przykład w repozytorium, jeśli taki istnieje). Zaakceptowane sugestie są zwykle wprowadzane w ciągu godziny.