Bileşenler
CountdownTimer
Bir ana kadar kalan süreyi saat olarak, isteğe bağlı boşalan halkayla, uyarı rengiyle ve sesli ara bildirimlerle gösterir.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Saat role="timer" taşır ve label ile adlandırılır; bu rol canlı değildir, bu yüzden her saniye okunmaz. Ara bildirimler ayrı ve kibar bir durum bölgesindedir. Halka aria-hidden taşır.
Klavye
Bölüm başlığı “Klavye”CountdownTimer odak almaz.
Süre dolunca odak taşınmaz; uygulama gerekiyorsa sonraki işleme odak verebilir.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| An | Okunan |
|---|---|
| 1 dakika kala | “1 dakika kaldı” |
| 10 saniye kala | “10 saniye kaldı” |
| Sıfır | “Süre doldu” |
Bağlanırken zaten geçilmiş anlar okunmaz.
Kontrast
Bölüm başlığı “Kontrast”Tüm durum renkleri 4,5:1 metin kontrastını sağlar; halka izi süstür.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | CountdownTimer nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 2.2.1 Ayarlanabilir zaman | Süre görünür ve duyurulur. | Süreyi uzatma ya da yeniden başlatma yolu verin. |
| 4.1.3 Durum mesajları | Ara anlar odak taşımadan okunur. | — |
| 2.3.3 Etkileşimden doğan animasyon | Halka hareketi azaltmada adım adım değişir. | — |