Tag

Rol ve anlam

• Durağan Tag düz bir <span> öğesidir; rolü yoktur ve metni akışta okunur.
• Seçilebilir Tag, Base UI Toggle ile üretilen gerçek bir <button> öğesidir. Durumu aria-pressed taşır; onay işareti süs amaçlıdır (aria-hidden).
• Kaldırılabilir Tag’de kaldır düğmesi gerçek bir <button> öğesidir. Adı kitaplık metninden gelir: “Tasarım kaldır” ya da “Remove Design”. removeLabel adı değiştirir.
• Tag.Group adlandırılmış bir listedir (role="list", zorunlu aria-label); her etiket bir listitem içindedir. Bu, Safari’nin liste biçimi kaldırılınca listeyi atlamasını önler.
• Simgeler (icon, × işareti, onay işareti) süstür ve ekran okuyucuya gösterilmez.

Klavye

Tuş	Davranış
Tab	Her kaldır düğmesi ve her seçilebilir etiket ayrı bir sekme durağıdır. Durağan etiket odak almaz.
Enter, Boşluk	Seçilebilir etiketin durumunu değiştirir; kaldır düğmesi odaktayken etiketi kaldırır.
Backspace, Delete	Kaldır düğmesi odaktayken etiketi kaldırır.

Ok tuşlarıyla gezinme yoktur. Bir etiket Tag.Group içinde kaldırılınca odak sonraki etiketin kaldır düğmesine, yoksa öncekine, yoksa onEmpty hedefine (ya da hedef verilmediyse gruba) geçer; odak sayfanın başına düşmez.

Odak

Odak halkası etkileşimli öğenin kendisinde, yani seçilebilir etiketin çevresinde ya da kaldır düğmesinin çevresinde görünür; 2 px kalınlıkta ve 2 px uzaklıktadır. Halka yalnızca klavye odağında görünür.

Ekran okuyucu

Örnek	Okunan
Durağan etiket	“Etiket”
Kaldırılabilir etiket	“Tasarım”; ardından “Tasarım kaldır, düğme”
Seçilebilir etiket, seçili	“Tasarım, düğme, basılı”
Seçilebilir etiket, seçili değil	“Tasarım, düğme, basılı değil”
Etiket grubu	“Etiketler, liste, 3 öğe”

Kontrast

Metin her markada ve modda en az 4.5:1’dir; değerler bigbang token çıktısından hesaplandı.

Çift	Açık mod	Koyu mod
color-text-default / color-surface-default (nötr)	16.16:1	17.18:1
color-status-brand-foreground / color-status-brand-background (seçili)	7.53:1	9.24:1
color-status-info-foreground / color-surface-default	8.63:1	8.91:1
color-status-success-foreground / color-surface-default	6.87:1	10.09:1
color-status-warning-foreground / color-surface-default	6.72:1	10.60:1
color-status-danger-foreground / color-surface-default	7.23:1	8.83:1
color-focus-ring / color-surface-default (en düşük)	5.97:1	8.09:1

Nötr kenarlık (color-border-default, 1.38:1) süstür: etiketi metin tanıtır. Devre dışı metin (color-text-disabled, 2.52:1) WCAG 1.4.3’ün devre dışı bileşen istisnasındadır.

WCAG 2.2

Ölçüt	Tag nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Grup list, etiketler listitem; seçili durum aria-pressed.	Etiket gruplarına anlamlı bir aria-label verin.
1.4.1 Renk kullanımı	Anlamı metin taşır; ton yalnızca vurgular. Seçili durumda onay işareti de vardır.	Etiketi yalnızca renge dayandırmayın.
1.4.3 Metin kontrastı	Tüm tonlar en az 6.72:1.	Özel renk eklemeyin; tone kullanın.
2.1.1 Klavye	Tab, Enter, Boşluk, Backspace ve Delete ile çalışır.	Etiket kaldırmayı yalnızca fareye bağlamayın.
2.4.3 Odak sırası	Kaldırma sonrası odak komşu etiketin düğmesine geçer.	Son etiket kaldırılabiliyorsa onEmpty hedefini verin.
2.4.7 Odak görünür	Halka en az 5.97:1.	className ile outline kaldırmayın.
2.5.8 Hedef boyutu	Kaldır düğmesi 24 x 24 px; seçilebilir etiket en az 24 px yüksekliktedir.	size="sm" etiketleri yan yana sıkıştırmayın; boşluk 8 px kalsın.
4.1.2 Ad, rol, değer	Düğmelerin adı ve aria-pressed değeri vardır.	removeLabel verirken etiket adını koruyun.