Separator

Rol ve anlam

Separator, Base UI’ın role="separator" taşıyan öğesidir ve aria-orientation ile yönünü bildirir (horizontal ya da vertical). decorative verilirse role="none" olur ve aria-orientation kalkar; çizgi erişilebilirlik ağacından çıkar.

Etiketli ve süs amaçlı olmayan Separator’da etiket metni, aria-labelledby ile Separator’a ad verir. decorative ile birlikte etiket yine görünür, ama ad bağlanmaz.

Klavye

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

Odak

Yok. Separator odak sırasında değildir ve odak halkası göstermez.

Ekran okuyucu

Çıktı ekran okuyucuya ve tarayıcıya göre biraz değişir; aşağıdaki sütun genel davranışı gösterir.

Örnek	Okunan
<Separator />	“Ayırıcı”
<Separator label="veya" />	“veya, ayırıcı”
<Separator decorative />	Hiçbir şey okunmaz
<Separator orientation="vertical" />	“Ayırıcı” (dikey olduğu bildirilebilir)

Başlık ya da liste gruplamayı zaten bildiriyorsa decorative kullanın; ekran okuyucu gereksiz bir “ayırıcı” duymaz.

Kontrast

Çizgi, anlam taşımayan bir süstür; gruplama yapıdan da anlaşılır. color-border-subtle çizgi rengi, token kontrast testinde ayrı bir çift olarak yer almaz.

Etiket metni color-text-subtle renginde ve sayfa zemininde (color-surface-default) en az 4.5:1 kontrast taşır; token paketindeki test bu çifti her derlemede, her markada ve modda denetler.

WCAG 2.2

Ölçüt	Separator nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Çizgi role="separator" ile bildirilir; süs amaçlıysa role="none" ile gizlenir.	Gruplama başlıkla zaten bildiriliyorsa decorative kullanın.
1.4.3 Kontrast (asgari)	Etiket metni 4.5:1 çifti ile test edilir.	className ile renk vermeyin.
1.4.11 Metin dışı kontrast	Çizgi yalnızca süstür; anlamı çizgiye bağlamayın.	Bir sınırı yalnızca çizgiyle anlatmayın; yapı ve başlık da gruplamayı bildirsin.
4.1.2 Ad, rol, değer	label varsa aria-labelledby ad verir.	Etiketi kısa ve anlamlı tutun.