Bileşenler

ButtonGroup

İlişkili butonları aralıklı ya da birleşik olarak tek satırda ya da sütunda toplar.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

ButtonGroup role="group" taşıyan bir <div> çizer. label verilirse aria-label olarak gruba ad verir; verilmezse grup adsızdır ve ekran okuyucu yalnızca butonları okur.

Klavye

Tuş	Davranış
Tab	Gruptaki her butona sırayla odaklanır.
Enter, Space	Odaktaki butonu çalıştırır.
Ok tuşları	Kullanılmaz. Ok tuşlarıyla gezinme için ToggleGroup kullanın.

Odak

Odak halkası butonlardan gelir. Birleşik grupta odaklanan buton z-index: 1 alır; halka komşu butonun altında kalmaz.

Ekran okuyucu

Örnek	Okunan
`<ButtonGroup label="Sayfalar">` içindeki ilk buton	“Sayfalar, grup”, ardından “Önceki, düğme”
`label` olmadan	Yalnızca “Önceki, düğme”

Kontrast

ButtonGroup renk eklemez. Birleşik grupta butonları ayıran ortak kenarlık secondary butonun color-border-default kenarlığıdır.

WCAG 2.2

Ölçüt	ButtonGroup nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	`role="group"` ve isteğe bağlı `aria-label`.	Birlikte anlam taşıyan butonlara `label` verin.
2.4.3 Odak sırası	Butonlar DOM sırasıyla odak alır.	Görsel sırayı CSS ile değiştirmeyin.
2.4.7 Görünür odak	Odaklanan buton öne gelir.	`className` ile `z-index` vermeyin.
2.5.8 Hedef boyutu (asgari)	Butonlar en az 32 px yüksekliktedir.	Aynı boyutta butonlar kullanın.