Modern Web Rehberi inceleme botu, MetaMask'in erişilebilir ve modern bir kullanıcı arayüzü sunmasına nasıl yardımcı oluyor?

Gilberto Cocchi

Rick Viscomi

Yayınlanma tarihi: 10 Kasım 2026

MetaMask, yaklaşık 190 ülkede 100 milyondan fazla indirme sayısına sahip, kendi kendine saklama özellikli bir finans platformudur. Tarayıcı uzantısı açık kaynaklı olarak geliştirildiğinden, şirketin içinden ve dışından katkıda bulunanlar sürekli olarak pull istekleri gönderiyor.

MetaMask UX mühendisi Francis Nepomuceno, bu pull isteklerinin çoğunu inceledi ve katkıda bulunanların erişilebilirlikle ilgili en iyi uygulamaları kullanmasına ve modern web özelliklerini kullanmasına yardımcı olacak tutarlı bir yöntem istedi. Editöründe, kodlama temsilcilerine web platformu en iyi uygulamalarını ve tarayıcı uyumluluğu verilerini sunan bir dizi beceri olan Chrome'un Modern Web Rehberi'ni zaten kullanıyordu. Aynı rehberliği diğer katkıda bulunanlara da sunmak için, MetaMask'ın açık kaynaklı deposuna yapılan her pull isteğini, yazarın kullandığı araçlardan bağımsız olarak inceleyecek bir bot oluşturdu.

Zorluk: Modern web özelliklerine ayak uydurma

Modern HTML ve CSS, erişilebilirliği ve kullanıcı deneyimini iyileştiren özellikler eklemeye devam ediyor. Tarayıcılar arasında hangi özelliklerin çalıştığını takip etmek zor. Çok sayıda katkıda bulunan olduğunda bu bilginin pull isteği açan herkese ulaşması gerekir.

Güvenlik, dikkat edilmesi gereken bir diğer konudur: MetaMask, varsayılan olarak her üçüncü taraf bağımlılığını korumalı alana alır. Bu da yerel bir tarayıcı özelliğini benimsemeyi kitaplık alternatifine göre daha ucuz hale getirir. Nepomuceno'nun da belirttiği gibi, "JavaScript olmadan iletişim kutularını ve açılır listeleri kullanabilmek gibi modern API'lere erişebilmek büyük bir kazançtı."

Çözüm: Modern Web Rehberi her pull isteğini inceler

16 Eylül 2026'da, MetaMask/metamask-extension için bir pull isteği, çoğu React SSS'sinin oluşturulma şekliyle oluşturulmuş bir SSS içeren "Nasıl çalışır?" sayfasını ekledi:

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

Yaklaşık beş dakika sonra bot yorum yaptı. search-hidden-content kılavuzuna atıfta bulunarak üç noktaya değindi:

• Her yanıtı koşullu olarak oluşturmak, yanıtı DOM'dan kaldırır. Bu nedenle, daraltılmış metin tarayıcının sayfada bulma özelliğiyle bulunamaz ve yardımcı teknolojinin keşfetmesi daha zor olur.
• Yerel bir <details>/<summary> açıklaması (2020'den beri Baseline), içeriği doğru semantiklerle DOM'da tutar. Birbirini dışlayan panellerde, paylaşılan bir name özelliği (2024'ten beri yeni kullanılabilen Baseline) diğerlerini otomatik olarak kapatır. Çoklu açılan SSS'lerde bu özelliği kullanmayın.
• Ekip mevcut Disclosure bileşenini tercih ettiyse en azından yanıtları DOM'da hidden="until-found" ile tutmalı ve aria-expanded ile simge durumunu senkronize eden bir beforematch dinleyici kullanmalıdır.

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

On üç dakika sonra yazar bir düzeltme yayınladı. Bileşen, yerel bir <details>/<summary> açıklaması haline geldi, daraltılmış yanıtlar sayfada bulma için DOM'da kaldı ve iki gezinme düğmesi bağlantı haline geldi.

Nepomuceno'nun üç satırlık bir istemle ayarladığı bu bot, Modern Web Rehberi'ni çalıştıran bir Cursor Automation botu. 21 Ekim 2026'ya kadar (beş hafta içinde):

• Bot, yaklaşık 480 pull isteğinde çalıştırıldı ve 26 yazardan gelen 64 pull isteğine (57 özellik ve düzeltme pull isteği, 7 otomatik sürüm ve senkronizasyon pull isteği) yorum yaptı.
• Mühendisler, özellik ve düzeltme pull isteklerinde 22 pull isteği genelinde 43 bulguyu düzeltti ve 3 bulguyu kısmen düzeltti.
• Mühendisler hızlı bir şekilde harekete geçti: Tanımlanabilir bir commit'e sahip 38 düzeltmeden 19'u 15 dakika içinde, 26'sı ise bir saat içinde uygulandı.Yorumdan düzeltmeye kadar geçen ortalama süre 15, 2 dakika oldu.

MetaMask'ın botu nasıl yapılandırdığını, botun neleri yakaladığını ve nerede gürültülü olduğunu aşağıda bulabilirsiniz.

Kurulum üç satırlık bir istemdir.

Nepomuceno, otomasyonun nasıl yapılandırıldığı sorulduğunda şu yanıtı verdi: "Aslında kurulumumuzda özel bir şey yok. Sadece kısa ve kapsamlı tutuyoruz." Talimatın tamamı:

- 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

Pratikteki işleyişi:

• Tavsiye niteliğindedir: Bot, ilk iki gününde "değişiklik isteği " incelemeleri (ve bir onay) yayınladı. Yazarlar, bu incelemeleri ele aldıktan sonra reddetti. 18 Eylül'den beri her inceleme bir yorum oldu. Birleştirme işlemini engellemediği için yazarlar her öneriyle ilgili son kararı kendileri verir.
• Depodaki belirli kılavuzlara ve dosyalara atıfta bulunur: Bot, yorum yaptığı 64 pull isteğinde 122 bulgu ortaya koydu. Özellik ve düzeltme pull isteklerinden 102 tanesinden 63'ü, uyguladıkları belirli Modern Web Rehberi kılavuzunu adlandırıyor (ör. search-hidden-content, state-aware-sticky-headers veya sms-otp-form) ve önerilen kalıbı zaten kullanıyorsa depodaki mevcut bir dosyaya işaret ediyor.
• Bir pull isteği kullanıcı arayüzüne dokunmadığı sürece sessiz kalır: Bu beş hafta içindeki yaklaşık 480 pull isteğinden en az 100'ü kullanıcı arayüzüne veya istemci koduna dokundu ve bot, yorum yaptığı pull isteği başına ortalama iki bulgu elde etti. Çoğunlukla ön uç depoları olan ekipler, daha büyük bir pay hakkında yorum yapmasını bekleyebilir.

İstem, tüm temsilci çalıştırıcılarla uyumludur. Modern Web Rehberi; Cursor, Claude Code, Codex, GitHub Copilot, Antigravity ve diğer kodlama temsilcileri için bir beceri veya eklenti olarak yüklenir. Temsilci beceriyi çalıştırdığında, API anahtarı gerektirmeyen yerel bir dizinde eşleşen kılavuzları arar ve ekibin temsilci çalıştırıcısının sağladığı modeli kullanarak farkı kontrol eder.

Modern Web Rehberi'nin yakaladığı ancak linter'ların yakalayamadığı sorunlar

Statik bir linter, tek bir öğede eksik bir özelliği işaretleyebilir ancak aşağıdaki bulgular etkileşim davranışına, HTML semantiğine ve bileşenlerin dosyalar arasında nasıl bir araya geldiğine bağlıdır.

Düzenlenebilir gibi görünen ancak girişi sessizce yok sayan bir işlem ücreti alanı

MetaMask'ın gelişmiş işlem ücreti ayarlarında, gaz limiti alanı (bir işlemin tüketebileceği ağ ücretini sınırlar) düzenlenebilir gibi görünüyordu ancak kullanıcıların girişini sessizce yok sayıyordu. Bu durum, ücret tahmini yüklenirken veya yüklenemediğinde ortaya çıkıyordu. Bu sırada Kaydet düğmesi devre dışı bırakıldı ve yardımcı teknolojinin okuyabileceği bir açıklama sunulmadı.

Bot, form kılavuzuna atıfta bulunarak üç düzeltme önerdi:

• Tahmin yoksa gaz limiti alanını devre dışı bırakın ve görünür durum metnini alana bağlayarak yardımcı teknolojinin açıklamayı okumasını sağlayın.
• Devre dışı bırakılan Kaydet düğmesini aynı durum metnine bağlayarak ekran okuyucuların düğmenin neden devre dışı bırakıldığını bilmesini sağlayın.
• Alanı sayısal giriş moduna geçirerek mobil kullanıcıların sayısal tuş takımı görmesini sağlayın.

Yazar, her iki ayar modülüne de üç düzeltmeyi de uyguladı ve bunları tek bir bileşende birleştirdi.

URL'lerini gizleyen banner düğmeleri

MetaMask'ın alım satım özelliklerinden birinin durum banner'ında, satır içi "SSS" ve "MetaMask Destek Ekibi ile iletişime geçin" işlemleri, bağlantı yerine JavaScript ile yeni bir sekme açan düğmeler olarak oluşturulmuştu. Bot, üç dakika içinde HTML ve erişilebilirlik kılavuzlarına atıfta bulunarak ekran okuyucuların bunları düğme olarak duyurduğunu ve kullanıcıların URL'yi kopyalama veya bağlam menüsünden yeni bir sekmede açma gibi bağlantı olanaklarını kaybettiğini işaretledi. Ayrıca MetaMask'in kod tabanında bu işlemleri gerçek bağlantılar olarak gösteren mevcut bir banner bileşenine de işaret etti.

On iki dakika sonra yazar, her iki işlemi de bağlantıya dönüştürdü. Nepomuceno, "Bir kılavuz kabul edildikten sonra gelecekteki incelemelerde referans örnek olarak bu kılavuzdan bahsedilmesini çok faydalı buluyorum." dedi.

Etiketleri başka bir yerde bulunan doğrulama girişleri

Botun dosyalar arasında okuma yapabilmesi, çok adımlı bir formda da işe yaradı. Statik linter, her adımda yalnızca yer tutucu metin içeren bir metin alanı görür ve görünür başlık ile talimatların bir üst yerleşim bileşeninde bulunduğunu anlayamaz. Bot, formlar ve erişilebilirlik kılavuzlarından alıntı yaparak yer tutucunun alanın tek etiketi olduğunu, üst yerleşimdeki adım başlığının ve talimatların girişle ilişkili olmadığını, hata ve "kod yeniden gönderildi" mesajlarının ekran okuyuculara duyurulmadığını tespit etti. On beş dakika sonra üçü de düzeltildi ve sonraki bir pull isteği kod girişini altı görsel basamak kutusu olarak yeniden şekillendirdiğinde bu erişilebilirlik bağlantısı bozulmadan kaldı.

Botun yakaladığı birkaç şey daha var

Aynı beş haftalık dönemden beş bulgu daha:

• Botun arkasındaki mühendisin gözden kaçırdığı bir CSS ayrıntısı: Nepomuceno'nun sabit ana sayfa sekmeleri için kendi pull isteği, container'larını adlandırmadan CSS kaydırma durumu sorgularını iç içe yerleştirdi ve kaydırma sırasında düzeni değiştirecek şekilde bir kenarlığı açıp kapattı. Bot, durum bilgisine sahip yapışkan başlıklar kılavuzunu referans gösterdi ve her iki sorunu da düzeltti. Yorumların, sabitleme konumu ve kaydırma durumu sorguları için faydalı olduğunu belirtti.
• Fiyat farkı, tuş vuruşunun ortasında sınırlandırılıyordu: Özel fiyat farkı girişleri (kullanıcının bir işlemde tolere edeceği fiyat hareketi), her tuş vuruşunda %100'ün üzerindeki değerleri sınırlayarak kullanıcı yazmaya devam ederken 101'i 100'e dönüştürüyordu. Form kılavuzuna göre düzeltme, doğrulama işlemini alanın odağı kaybettiği ana taşıdı ve görünür bir uyarı banner'ı ekledi.
• Ekran okuyucuların kullanamadığı bir yükleme göstergesi: Jeton listesi yükleme iskeleti, "yükleniyor" etiketini rolü olmayan genel bir öğeye yerleştiriyordu. ARIA buna izin vermez. Bot, kod tabanında MetaMask'in yalnızca ekran okuyucuya yönelik kalıbını kullanan iki bileşene işaret etti (her ikisi de altı gün önce Modern Web Rehberi incelemesinden sonra güncellenmişti). Yazar, sekiz dakika sonra iskeleti bu kalıpla uyumlu hale getirdi.
• Korumasız eşzamansız işlem: Eşzamansız "Sağlayıcıda görüntüle" düğmesinde işlem sırasında koruma yoktu. Bu nedenle, çift tıklama yinelenen sekmeler ve arka plan izleyicileri açabiliyordu. Yazar, yorumdan sonraki dört dakika içinde bir koruma eklemiştir.
• Form olmadan tuş vuruşu doğrulaması: Bir NFT içe aktarma sayfası, her tuş vuruşunda doğrulama yapıyordu ve gönderme semantiği için <form> öğesi yoktu. İncelemeden 19 dakika sonra her ikisi de düzeltildi.

Tüm yorumlar herkese açıktır. Botun yorumlarının tamamı, bağlantılı her pull isteğinde yer alır. Yorumların tamamına GitHub'dan göz atabilirsiniz.

Neleri düzeltmediği ve ne kadar gürültülü olduğu

Her bulgu kabul görmedi. Aşağıdaki tabloda, MetaMask'in özellik ve düzeltme pull istekleriyle ilgili 102 bulguyu nasıl hesapladığı gösterilmektedir (20 bulgu daha, incelemenin kodu değiştirmesinin beklenmediği 7 sürüm ve senkronizasyon pull isteğinde yer almıştır):

122 bulgunun tamamı (sürüm ve senkronizasyon pull istekleriyle ilgili 20 bulgu dahil) temaya göre ayrılmıştır:

Bu sayılarda birkaç kalıp vardır:

• Tek bir bileşenle sınırlı kalan düzeltmeler, erişilebilirlikle ilgili kapsamlı değişikliklere kıyasla çok daha sık uygulanır. Formlar ve HTML düzeltmeleri, incelenen bileşenin içinde kalır. Bu nedenle yazarlar genellikle bunları hemen uygular (31 düzeltmeden 19'u). Erişilebilirlik en çok bulguya (38) sahip olan kategoriydi ancak yalnızca 12'si düzeltildi. Bunun nedeni genellikle düzeltmenin pull isteğinin kapsamı dışında olması veya henüz mevcut olmayan ortak bir tasarım sistemi bileşenine ihtiyaç duyulmasıydı.
• "Diğer" kategorisi, web platformu kılavuzunun dışına çıktığı yerdir. Tasarım sistemi tutarlılığı, mantık hataları, metin, test kalitesi, koyu mod ve kod hijyeniyle ilgili 16 bulgu elde edildi. Bunlardan üçüyle ilgili işlem yapıldı. Bu bulgulardan biri, gerçek bir gerilemeydi (form ön doldurma özelliğini bozan bir ağ listesi değişikliği). Bu 16 testin çoğu kolayca geçilebiliyordu ancak gerilemeyi yakalamak, onlara hızlıca göz atmaya değdi.
• Yanlış pozitifler, temsilcinin kılavuzları uygulama şeklinden kaynaklanıyordu ve gürültünün çoğu kurulumda düzeltilebiliyordu. İnceleme botu, statik bir linter yerine diff okuyan bir temsilci olduğundan, yanlış pozitifleri çevreleyen kodu yanlış okumaktan veya bir kuralı bağlantılı kılavuzdan daha katı bir şekilde uygulamaktan kaynaklanıyordu. Sürüm ve senkronizasyon dallarını atlamak ve istemi sıkılaştırarak temsilcinin bir kılavuzda açıkça belirtilen kurallara uymasını sağlamak, bir sonraki bariz ayarlamalardır.

Nepomuceno, ekibin ve inceleme sürecinin bu durumdan nasıl etkilendiğini şöyle açıklıyor:

MetaMask mühendisi David Murdoch da rehberin kendisine katkıda bulundu: CSS düzen kılavuzunun örneklerinden birinde hata olduğunda sorun bildirdi ve Modern Web Rehberi ekibi iki gün sonra düzeltmeyi birleştirdi.

MetaMask'ın, kendisini kullanmayı düşünen bir ekibe söyleyecekleri

• Yazmaya başlamadan önce kılavuzu okuyun. Bir temsilcinin bir görev için hangi kılavuzları alacağını görmek için npx modern-web-guidance@latest search "accordion find in page" komutunu çalıştırın. Modern Web Rehberi kılavuzlarının tamamına da göz atabilirsiniz.
• Üç satırlık istem ve daha önce çalıştırdığınız temsilciyle başlayın. Beceriyi (npx modern-web-guidance@latest install veya bir temsilcinin eklenti komutu) yükleyin, pull isteklerinde çalıştırılabilecek her şeyi bu beceriye yönlendirin ve yalnızca işlem yapılabilir bir şey olduğunda yorum yapmasını ve bir kılavuzda açıkça belirtilen kurallara uymasını söyleyin. Botun her şey yolundayken sessiz kalması, MetaMask mühendislerinin yorumlarını okumaya devam etmesinin nedenidir.
• Bazı bulguların ele alınmayabileceğini unutmayın. Özellik ve düzeltme pull istekleriyle ilgili 102 bulgudan 43'ü düzeltildi, 36'sı reddedildi veya ele alınmadı. Bu oran, tavsiye niteliğinde inceleme yapan bir bot için iyi bir sonuç verirken engelleme kontrolü olarak kullanıldığında kesintiye neden olur.
• Gerçek kişilerin inceleme yapmasını sağlayın. Bot; web platformu semantiği, modern CSS ve etkileşim kalıpları konusunda iyidir ancak ürünü bilmez.

MetaMask'ın henüz ölçmediği şeyler de var: Beş hafta geçmesine rağmen ekip, pull isteği başına maliyeti, çalışma süresini, model karşılaştırmalarını veya inceleme botunun React kod tabanı dışında nasıl davrandığını izlemedi.

MetaMask, üç satırlık yapılandırmayla çoğu bulgu için belirli bir kılavuzu (ve varsa mevcut bir depo içi örneği) referans gösteren bir inceleme botuna sahip oldu. Kabul edilen öneriler genellikle bir saat içinde düzeltilir.