Bileşenler
AlertDialog
Görevi kesen ve tek bir soruya onay ya da vazgeçme isteyen kalıcı pencere.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”AlertDialog, Base UI AlertDialog ile role="alertdialog" ve aria-modal="true" taşır. Başlık ad, açıklama tanım olarak bağlanır. Meşgulken panelde aria-busy="true" vardır ve onay butonundaki durum bölgesi “Yükleniyor” metnini bir kez okur.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab / Shift+Tab | Vazgeç ve onay arasında gezer. |
| Enter / Space | Odaktaki eylemi çalıştırır. |
| Escape | Vazgeçer; işlem sürerken yok sayılır. |
- Açılınca odak Vazgeç’e gelir (en az yıkıcı eylem).
- Kapanınca odak tetikleyiciye döner.
- İşlem sürerken odak onay butonunda kalır; buton odaklanabilir kalır.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Açılış | “Öğe silinsin mi?, uyarı iletişim kutusu, Bu işlem geri alınamaz.” |
| Odak | “Vazgeç, düğme” |
| Meşgul | “Yükleniyor” |
Kontrast
Bölüm başlığı “Kontrast”Tehlike dolgusundaki metin color-action-on-danger-default en az 4.5:1 kontrast taşır. Yıkıcılık yalnızca renkle değil, onay etiketindeki fiille de anlatılır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | AlertDialog nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.4.1 Rengin kullanımı | Tehlike, etiketteki fiille de belirtilir. | Onay etiketini fiil olarak yazın. |
| 3.3.4 Hata önleme | Geri alınamaz işlem açık onay ister. | Yıkıcı işlemleri bu pencereyle onaylatın. |
| 2.4.3 Odak sırası | Odak en az yıkıcı eylemde başlar. | initialFocus vermeyin. |
| 4.1.3 Durum mesajları | Meşgul durumu bir kez duyurulur. | Hatayı role="alert" ile gövdede gösterin. |