ToggleGroup

Rol ve anlam

ToggleGroup, Base UI ToggleGroup ile role="group" taşıyan bir öğe çizer; label tip düzeyinde zorunludur ve aria-label olarak verilir. Her öğe aria-pressed taşıyan bir <button>’dır.

Klavye

Tuş	Davranış
Tab	Gruba girer; son odaklanan ya da ilk öğeye odaklanır. Bir sonraki Tab gruptan çıkar.
Sol ve sağ ok (yatay)	Odağı önceki ya da sonraki öğeye taşır. Sağdan sola metinde yönler aynalanır.
Yukarı ve aşağı ok (dikey)	Odağı önceki ya da sonraki öğeye taşır.
Enter, Space	Odaktaki öğenin basılı durumunu değiştirir.

Odak

Grupta tek bir öğe sekme sırasındadır (gezici sekme durağı). Odaklanan öğe focus-visible halkası gösterir ve komşusunun önüne gelir.

Ekran okuyucu

Örnek	Okunan
Gruba girerken	“Metin hizası, grup”, ardından “Sola hizala, aç/kapat düğmesi, basılı”
Ok tuşuyla sonraki öğe	“Ortala, aç/kapat düğmesi, basılı değil”

Kontrast

Basılı öğe dolgu ve kenarlıkla ayırt edilir; color-border-selected zeminde en az 3:1 kontrast taşır.

WCAG 2.2

Ölçüt	ToggleGroup nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	role="group" ve zorunlu aria-label.	Etiketi ayarın adıyla yazın.
2.1.1 Klavye	Ok tuşları, Enter ve Space.	Öğeleri başka öğelerle sarmalamayın.
4.1.2 Ad, rol, değer	Her öğe aria-pressed taşır.	İkonlu öğelere label verin.
1.4.1 Renk kullanımı	Basılı durum dolgu ve kenarlıkla.	Kenarlığı kaldırmayın.