Bileşenler

InlineAlert

İçeriğin içinde bir bölüm, form ya da sayfa hakkında bilgi, başarı, uyarı ya da hata mesajı.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

Varsayılan olarak InlineAlert rol taşımaz, çünkü sayfanın parçasıdır ve sırayla okunur. Sonradan beliren uyarıda announce açılınca danger role="alert", diğer tonlar role="status" alır. İkon okunmaz; ton, görünmez bir önekle (“Bilgi:”, “Başarılı:”, “Uyarı:”, “Hata:”) başlığın ya da mesajın önünde okunur.

Klavye

Tuş	Davranış
Tab	Eylemlere ve kapat butonuna gider.
Enter / Space	Eylemi ya da kapat butonunu çalıştırır.

Odak

Uyarı odak almaz. Kapat butonuyla kapatılınca odak bir sonraki kontrole, yoksa bir öncekine geçer; sayfa gövdesine düşmez.

Ekran okuyucu

Örnek	Okunan
Başlıklı uyarı	“Uyarı: Bağlantı yavaş. Değişiklikler gecikmeli kaydedilebilir.”
`announce` ile hata	“Hata: Form gönderilemedi…” (hemen)
Kapat butonu	“Uyarıyı kapat, düğme”

Kontrast

Metin (text-default ve text-subtle) her tonun zemininde en az 4.5:1, ikon en az 3:1 kontrast taşır. Kenarlık süstür; tonu zemin, ikon ve okunan önek anlatır.

WCAG 2.2

Ölçüt	InlineAlert nasıl karşılar	Ürün ekibi ne yapmalı
1.4.1 Rengin kullanımı	Ton ikon şekli ve okunan önekle de belirtilir.	Yok.
4.1.3 Durum mesajları	`announce` ile `status` ya da `alert`.	Sonradan beliren uyarıda `announce` açın.
2.4.3 Odak sırası	Kapatınca odak bir sonraki kontrole geçer.	Yok.
3.3.1 Hata tanımlama	Hata tonu ve önek.	Hatayı metinle anlatın.