Araç ipuçları, karşılaşabileceğiniz en küçük kullanıcı arayüzü sorunu gibi geliyor. Küçükler ve genellikle gizlidirler. Birisi nasıl oluşturulacağını sorduğunda, geleneksel yanıt neredeyse her zaman bir JavaScript kitaplığı kullanılarak gelir. Ve uzun bir süre bu mantıklı bir tavsiyeydi. Ben de onu takip ettim. Görünüşte bir araç ipucu basittir. Bir öğenin üzerine gelin veya odaklanın, metin içeren küçük bir kutu gösterin, ardından kullanıcı uzaklaştığında onu gizleyin. Ancak bir tanesini gerçek kullanıcılara gönderdiğinizde avantajlar ortaya çıkmaya başlar. Klavye kullanıcıları Tetikleyiciye dokunur ancak araç ipucunu asla görmez. Ekran okuyucular bunu iki kez duyurur veya hiç duyurmaz. Fareyi çok hızlı hareket ettirdiğinizde araç ipucu titriyor. Daha küçük ekranlardaki içerikle örtüşür. Esc tuşuna basmak onu kapatmıyor. Odaklanma kaybolur. Zamanla araç ipucu kodum artık gerçekten sahip olmak istemediğim bir şeye dönüştü. Etkinlik dinleyicileri birikti. Fareyle üzerine gelme ve odaklanmanın ayrı ayrı ele alınması gerekiyordu. Dış tıklamalar özel durumlara ihtiyaç duyuyordu. ARIA niteliklerinin elle senkronize tutulması gerekiyordu. Her küçük düzeltme başka bir mantık katmanı ekledi. Kütüphaneler yardımcı oldu ama aynı zamanda perde arkasında neler olup bittiğini tam olarak anlamak yerine, üzerinde çalıştığım kara kutular gibiydiler. Beni daha yeni Popover API'sine bakmaya iten şey buydu. Bir kitaplığın yardımı olmadan tarayıcının yerel modelini kullanarak tek bir araç ipucunu yeniden oluşturursam ne olacağını görmek istedim. Başlarken, her yeni özellikte olduğu gibi bu özellikte de hala düzeltilmekte olan bazı şeylerin olduğunu belirtmekte fayda var. Bununla birlikte, genel API'nin değişen birkaç parçası olmasına rağmen şu anda harika bir tarayıcı desteğine sahiptir. Bu arada Caniuse'a göz kulak olmakta fayda var. “Eski” İpucu Popover API'sinden önce araç ipucu kitaplığı kullanmak bir kısayol değildi. Bu varsayılandı. Tarayıcıların fare, klavye ve yardımcı teknolojide çalışan yerel bir araç ipucu konsepti yoktu. Doğruluğu önemsiyorsanız tek seçeneğiniz kütüphane kullanmaktı ve ben de tam olarak öyle yaptım. Yüksek düzeyde model her zaman aynıydı: bir tetikleyici öğe, gizli bir araç ipucu öğesi ve ikisini koordine edecek JavaScript.
Kütüphane, öğenin fareyle üzerine gelindiğinde veya odaklanıldığında gösterilmesine, bulanıklaştırıldığında veya fare bırakıldığında gizlenmesine ve kaydırıldığında yeniden konumlandırılmasına/yeniden boyutlandırılmasına olanak tanıyan kablolamayı yönetiyordu.
Zamanla araç ipucu kırılgan hale gelebilir. Küçük değişiklikler risk taşıyordu. Küçük düzeltmeler gerilemelere neden oldu. Daha da kötüsü, yeni araç ipuçlarının eklenmesi aynı karmaşıklığı miras aldı. İşler teknik olarak işe yaradı, ancak hiçbir zaman çözülmüş veya tamamlanmış hissetmedim. Araç ipucunu tarayıcının yerel Popover API'sini kullanarak yeniden oluşturmaya karar verdiğimde durum böyleydi. Popover API'sini Denediğim An Yeni bir şey denemek istediğim için Popover API'sini kullanmaya geçmedim. Tarayıcının zaten anlamış olması gerektiğine inandığım araç ipucu davranışını sürdürmekten yorulduğum için geçiş yaptım. İlk başta şüpheciydim. Yeni web API'lerinin çoğu basitlik vaat eder, ancak yine de yapıştırıcı, uç durum yönetimi veya kaçmaya çalıştığınız karmaşıklığın aynısını sessizce yeniden yaratan geri dönüş mantığı gerektirir. Bu yüzden Popover API'sini mümkün olan en küçük şekilde denedim. İşte neye benziyordu:
1. Klavye “Sadece Çalışıyor” Klavye desteği birden fazla katmanın doğru şekilde sıralanmasına bağlıydı: Odaklanmanın araç ipucunu tetiklemesi, bulanıklaştırmanın onu gizlemesi, Esc'nin manuel olarak kablolanması gerekiyordu ve zamanlama önemliydi. Bir uç durumu kaçırırsanız, araç ipucu ya çok uzun süre açık kalır ya da okunamadan kaybolur. Açılır pencere özelliği otomatik veya manuel olarak ayarlandığında, tarayıcı temel işlemleri devralır: Sekme ve Shift+Sekme normal şekilde davranır, Esc her seferinde araç ipucunu kapatır ve fazladan dinleyiciye gerek kalmaz.
Kod tabanımdan kaybolanlar, genel tuş indirme işleyicileri, Esc'ye özgü temizleme mantığı ve klavyede gezinme sırasındaki durum kontrolleriydi. Klavye deneyimi artık sürdürmem gereken bir şey olmaktan çıktı ve bir tarayıcı garantisi haline geldi. 2. Ekran Okuyucunun Tahmin Edilebilirliği Bu şuyduen büyük gelişme. Dikkatli bir ARIA çalışmasına rağmen, daha önce de belirttiğim gibi davranışlar değişiklik gösteriyordu. Her küçük değişiklik riskli geliyordu. Popover'ı uygun bir rolle kullanmak, ne olacağı konusunda çok daha istikrarlı ve öngörülebilir görünüyor ve hissettiriyor:
Ve işte başka bir kazanç: Geçişten sonra Lighthouse, etkileşim için hatalı ARIA durumu uyarılarını işaretlemeyi bıraktı; bunun büyük ölçüde nedeni, kazara hata yapabileceğim özel ARIA durumlarının artık olmamasıydı.
3. Odak Yönetimi Odaklanma eskiden kırılgandı. Daha önce şu gibi kurallarım vardı: odak tetikleyicisinin araç ipucunu göstermesine izin ver, odağı araç ipucuna taşıyın ve kapatmayın, çok yakın olduğunda tetikleyiciyi bulanıklaştırın ve araç ipucunu kapatıp odağı manuel olarak geri yükleyin. Bu, işe yaramayana kadar işe yaradı. Popover API'si ile tarayıcı, odağın popover'a daha doğal bir şekilde taşınabileceği daha basit bir modeli uygular. Açılır pencerenin kapatılması, odağın tetiğe dönmesini sağlar ve görünmez odak tuzakları veya kaybolan odak anları olmaz. Odak restorasyon kodunu da eklemedim; Kaldırdım.
Sonuç Popover API, araç ipuçlarının artık simüle edebileceğiniz bir şey olmadığı anlamına gelir. Bunlar tarayıcının anladığı şeylerdir. Açma, kapatma, klavye davranışı, Kaçış yönetimi ve erişilebilirliğin büyük bir kısmı artık geçici JavaScript'ten değil, platformun kendisinden geliyor. Bu, araç ipucu kitaplıklarının geçerliliğini yitirdiği anlamına gelmez çünkü karmaşık tasarım sistemleri, ağır özelleştirme veya eski kısıtlamalar için hala anlamlıdırlar ancak varsayılan değer değişmiştir. İlk defa, en basit araç ipucu aynı zamanda en doğru ipucu da olabiliyor. Merak ediyorsanız şu deneyi deneyin: Ürününüzdeki yalnızca bir ipucunu Popover API ile değiştirin, her şeyi yeniden yazmayın, tüm sistemi taşımayın ve yalnızca birini seçin ve kodunuzdan neyin kaybolduğunu görün. Platform size daha iyi bir ilkel sunduğunda, kazanç yalnızca daha az JavaScript satırı değil, aynı zamanda endişelenmeniz gereken şeylerin daha az olması anlamına gelir. GitHub depomdaki kaynak kodunun tamamına göz atın. İleri Okuma Popover'lara ve ilgili API'lere daha ayrıntılı bir bakış için:
"İçeri Giriyorum", Geoff Graham “Popover'lar ve Diyaloglar Arasındaki İlişkiyi Açıklığa kavuşturmak”, Zell Liew “Popover=ipucu nedir?”, Una Kravets “Çağıran Komutları”, Daniel Schwarz "HTML Açılır Penceresi ile Otomatik Kapanış Bildirimi Oluşturma", Preethi Kullanıcı Arayüzü Açılır API Açıklayıcısını Aç “Balonları Patlat(Üzerinden)”, John Rhea “CSS Bağlantı Konumlandırması”, Juan Diego Rodríguez
MDN ayrıca Popover API'si için kapsamlı teknik belgeler sunar.
