Dialog

Rol ve anlam

Dialog, Base UI Dialog ile role="dialog" ve aria-modal="true" taşıyan bir panel çizer. Başlık aria-labelledby, açıklama aria-describedby ile bağlanır. Başlık zorunludur. Açıkken sayfanın geri kalanı inert olur.

Klavye

Tuş	Davranış
Enter / Space	Tetikleyicide pencereyi açar.
Tab / Shift+Tab	Odağı pencere içinde ileri ve geri taşır; sonda başa döner.
Escape	Pencereyi kapatır; dismissible={false} iken bir şey yapmaz.

Odak

• Açılınca odak gövdedeki ilk odaklanabilir öğeye, yoksa eylemlere gider. Kapat butonu DOM’da en sondadır, bu yüzden odağı ilk o almaz.
• Kapanınca odak tetikleyiciye döner.
• Gövde taşarsa tabIndex=0 ve pencere başlığıyla adlanmış bir grup olur; klavyeyle kaydırılabilir.

Ekran okuyucu

Örnek	Okunan
Açılış	“Pencere başlığı, iletişim kutusu”, ardından açıklama
Kapat butonu	“Kapat, düğme”
Zorunlu karar	Başlık ve açıklama; kapat butonu yoktur

Kontrast

Metin color-text-default ve color-text-subtle, color-surface-raised zeminde en az 4.5:1 kontrast taşır. Panel arka plandan ince çerçevesi, bulanıklaştırma ve karartma ile ayrışır.

WCAG 2.2

Ölçüt	Dialog nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Başlık ve açıklama pencereye bağlıdır.	Başlığı boş bırakmayın.
2.1.2 Klavye tuzağı yok	Escape ve eylemler pencereden çıkarır.	Zorunlu kararda kapatan bir eylem koyun.
2.4.3 Odak sırası	Odak içeride kalır, kapanınca geri döner.	Tetikleyiciyi pencere açıkken kaldırmayın.
2.4.11 Odak gizlenmez	Odaklanan öğe kaydırılarak görünür kalır.	Gövdeye sabit öğe koymayın.
4.1.2 Ad, rol, değer	role="dialog", aria-modal, ad ve açıklama.	Kapat etiketini ezmeniz gerekirse anlamlı tutun.