Bileşenler

ResultState

Bir görevin ya da akışın sonunda sonucu, bundan sonra ne olacağını ve sonraki adımları gösteren ekran.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

ResultState bir başlık (headingLevel, varsayılan h1), açıklama, ayrıntılar ve eylemlerden oluşur. Ton görünmez bir önekle başlığın parçası olarak okunur (“Başarılı: Başvurunuz alındı”); ikon okunmaz.

Klavye

Tuş	Davranış
Tab	Eylemlere gider.

Odak

focusOnMount açıkken başlık tabindex="-1" alır ve yüklenince odaklanır; böylece akışın son adımındaki buton kaybolduğunda odak sayfa gövdesine düşmez ve sonuç hemen okunur. Başlıkta odak halkası gösterilmez.

Ekran okuyucu

Örnek	Okunan
Başarı	“Başarılı: Başvurunuz alındı, başlık düzeyi 1”
Hata	“Hata: İşlem tamamlanamadı, başlık düzeyi 1”

Kontrast

Başlık en az 4.5:1; ikon kendi zemininde en az 3:1 kontrast taşır.

WCAG 2.2

Ölçüt	ResultState nasıl karşılar	Ürün ekibi ne yapmalı
1.4.1 Rengin kullanımı	Ton önek ve ikon şekliyle de belirtilir.	Yok.
2.4.3 Odak sırası	`focusOnMount` odağı sonuca taşır.	Akış sonunda `focusOnMount` açın.
2.4.6 Başlıklar ve etiketler	Sonuç bir başlıktır.	Sayfada tek `h1` kalmasını sağlayın.
3.3.4 Hata önleme	Yok.	Başarısız görevde girdiyi koruyun ve yeniden deneme sunun.