Portallar, Odak Tuzağı, Escape ile Kapatma
Kalıcı bir erişilebilirlik temeli için kip pencerelerini portallar aracılığıyla işleyin, klavye kullanıcılarının odağını sınırlayın ve Escape/arka plan tıklamasıyla kapatın.
Portallar, Odak Tuzağı, Escape ile Kapatma, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 3 dersten oluşur.
Portallar ve odak tuzakları neden önemlidir
Amaç: Herkes için çalışan iletişim kutuları oluşturmak.
- Gövdeye bir portal
- Odak tuzağı sekme odağını içeride tutar
- Kapatmak için Esc/arka plan
Erişilebilirliğin temelleri
- role="dialog" + aria-modal="true" kullanın
- Açıldığında ilk etkileşimli öğeye odaklanın
- Kapatıldığında odağı tetikleyiciye geri yükleyin
Gösterim: portal iletişim kutusu (açma/kapatma)
İletişim kutusunu bir portal aracılığıyla oluşturarak diğer her şeyin üzerinde görünmesini sağlayın.
<div id="root"></div>Gösterim: odak tuzağının temelleri
İlk düğmeye otomatik olarak odaklanın ve Sekme tuşunun iletişim kutusu içinde kalmasını sağlayın.
<div id="root"></div>Gösterim: kapatma kalıpları ve odağı geri yükleme
Esc veya arka planla kapatın ve odağı tetikleyici düğmeye geri yükleyin.
<div id="root"></div>İpuçları ve kontrol listesi
- role="dialog" ve aria-modal="true" ekleyin
- Açıldığında ilk denetime odaklanın; kapatıldığında odağı tetikleyiciye geri yükleyin
- Esc tuşunu ve arka plan tıklamasını yönetin
İletişim kutusu erişilebilirliği kontrolü
Özet
Özet: İletişim kutularını bir portal aracılığıyla oluşturun, odağı içeride tutun ve odağı açıcıya geri yüklerken kullanıcıların Esc/arka plan yoluyla kapatmasına izin verin.
Sıkça Sorulan Sorular
“Portallar, Odak Tuzağı, Escape ile Kapatma” dersi ücretsiz mi?
Evet — “Portallar, Odak Tuzağı, Escape ile Kapatma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 3 dersten oluşur.
“Portallar, Odak Tuzağı, Escape ile Kapatma” dersinde ne öğreneceğim?
Kalıcı bir erişilebilirlik temeli için kip pencerelerini portallar aracılığıyla işleyin, klavye kullanıcılarının odağını sınırlayın ve Escape/arka plan tıklamasıyla kapatın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
React Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.
“Portallar, Odak Tuzağı, Escape ile Kapatma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu React Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Portallar, Odak Tuzağı, Escape ile Kapatma
- Genel Katman Yöneticisi (Context + Reducer)
- Erişilebilirlik için Duyurular (aria-live)