Badge

Rol ve anlam

Badge düz bir <span> öğesidir ve ayrı bir rolü yoktur; metni, çevresindeki içerikle birlikte okunur. Durum yalnızca renkle anlatılmaz, metin tek başına anlamı taşır.

Klavye

Tuş	Davranış
Tab	Badge odak almaz; Tab onun üzerinden geçer. Badge’in kendine ait tuşu yoktur.

Odak

Yok. Badge odak sırasında değildir ve odak halkası göstermez. Bir eylem gerekiyorsa Badge yerine Button kullanın.

Ekran okuyucu

Badge’in metni, çevresindeki içerikle akış içinde okunur. startIcon ile verilen ikon aria-hidden olduğu için okunmaz.

Örnek	Okunan
<Badge tone="success">Onaylandı</Badge>	“Onaylandı”
<Badge tone="warning" startIcon={...}>Beklemede</Badge>	“Beklemede” (ikon okunmaz)

Ekran okuyucu yalnızca durumu söyler. Satırın neye ait olduğu satırın kendisinden anlaşılmıyorsa, tablo başlığı ya da aria-describedby ile bağlam verin. Durum sayfa açıkken değişiyorsa ve kullanıcının bunu duyması gerekiyorsa, Badge’i değil, ayrı bir aria-live bölgesini güncelleyin.

Kontrast

Metin ile arka plan arasındaki kontrast her tonda, her varyantta, her markada ve her modda en az 4.5:1’dir. Değerler bigbang ve fixture markalarının token çıktısından WCAG göreli parlaklık formülüyle hesaplandı; subtle için foreground / background, bold için on-emphasis / emphasis çifti alındı. Token paketindeki test bunu her derlemede denetler.

Açık mod

Ton	subtle (markalar arası en düşük)	bold (markalar arası en düşük)
neutral	7.81:1	6.63:1
brand	7.53:1	6.17:1
info	8.09:1	6.50:1
success	6.51:1	5.03:1
warning	6.46:1	4.72:1
danger	6.79:1	5.63:1

Koyu mod

Ton	subtle (markalar arası en düşük)	bold (markalar arası en düşük)
neutral	10.22:1	7.14:1
brand	9.13:1	8.09:1
info	7.60:1	5.88:1
success	8.03:1	7.45:1
warning	8.58:1	8.00:1
danger	7.19:1	6.15:1

WCAG 2.2

Ölçüt	Badge nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Metin gerçek metin olarak durur; ikon süstür ve aria-hidden’dır.	Durumun neye ait olduğu satırdan anlaşılmıyorsa tablo başlığı ya da aria-describedby ile bağlam verin.
1.4.1 Renk kullanımı	Renk yalnızca destektir; durumu metin taşır.	Metni anlamsız bırakmayın (“Durum” gibi); durumu adıyla yazın.
1.4.3 Kontrast (asgari)	Tüm ton, varyant, marka ve modda en az 4.5:1; token testi doğrular.	className ile renk vermeyin; verilen renkler token testinin dışında kalır.
1.4.11 Metin dışı kontrast	subtle kenarlığı süstür; durum bilgisi kenarlıkta değil metindedir.	Kenarlığa anlam yüklemeyin.
1.4.12 Metin aralığı	Yükseklik sabittir (16 ya da 20 px); metin aralığı büyütülürse taşma olabilir.	Metin aralığı büyütülmüş hâlde, özellikle sm boyda, ekranı kontrol edin.
4.1.2 Ad, rol, değer	Etkileşimli olmadığı için rol gerekmez; metin yeterlidir.	Badge’e role ya da tabIndex eklemeyin.