Popover API'sine Başlarken

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ıSekmetetikleyiciye girin, ancak araç ipucunu asla görmeyin. 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. PreslemeEsckapatmaz. 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 yeniye bakmaya iten şey buyduPopover API'si. 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. Dikkat etmekte fayda varCaniusbu arada.

“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. Eğer 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.


Yardımcı metin

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.

Tarayıcının yerel ayarını kullanarak araç ipucunu yeniden oluşturmaya karar verdiğimde durum böyleydi.Popover API'si.

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:







  Bu düğme yararlı bir ipucunu tetikler.

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 gerekiyordu,Esckablolamanın manuel olarak yapılması 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.

Prof.popoveröznitelik şu şekilde ayarlandı:otomatikveyamanueltarayıcı temel bilgileri devralır:Sekme ve Vardiya+Sekmenormal davranın,Escher seferinde araç ipucunu kapatır ve fazladan dinleyiciye gerek kalmaz.


  Yararlı açıklama

Kod tabanımdan kaybolan şey küresel tuş indirme işleyicileriydi.Esc-özel temizleme mantığı ve klavyede gezinme sırasında durum kontrolleri. 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 en büyük gelişmeydi. 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:


  Yararlı açıklama

Ve işte bir kazanç daha: Değişimden sonra,Deniz feneriEtkileşim için yanlış ARIA durumu uyarılarını işaretlemeyi bıraktım, bunun büyük ölçüde nedeni artık kazara hata yapabileceğim özel ARIA durumlarının olmaması.

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.

Çözüm

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 hâlâ anlamlıdırlar; ancakvarsayılan değişti. İ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.

Kaynak kodunun tamamına göz atınGitHub depom.