Toolbar

Rol ve anlam

Toolbar, Base UI Toolbar ile çizilir: kap role="toolbar" ve aria-orientation taşır; adı tip düzeyinde zorunlu olan label’dan gelir. ToolbarGroup role="group", ToolbarSeparator role="separator"’dır. pressed alan düğmeler aria-pressed ile açma-kapama düğmesi olarak duyurulur. Yalnızca ikonlu düğmelerin adı label’dan gelir; ikonlar aria-hidden taşır.

Klavye

Tuş	Davranış
Tab	Araç çubuğuna girer; ikinci Tab çıkar.
Sol ve sağ ok	Yatay araç çubuğunda önceki ve sonraki düğmeye gider; sonda başa döner.
Yukarı ve aşağı ok	Dikey araç çubuğunda aynı işi yapar.
Enter ya da Space	Düğmeyi çalıştırır ya da açıp kapar.

Devre dışı düğmeler ok tuşlarıyla odaklanır ama çalışmaz. Sağdan sola dilde yatay okların yönü Provider direction="rtl" ile döner.

Odak

Araç çubuğunun tek sekme durağı vardır ve son odaklanan düğmeyi hatırlar. Odaktaki düğmede 2 px color-focus-ring halkası yalnızca klavye odağında görünür.

Ekran okuyucu

Örnek	Okunan
Araç çubuğuna giriş	“Metin biçimi, araç çubuğu, Stil, grup, Kalın, açma-kapama düğmesi, basılı”
Ok tuşuyla geçiş	“İtalik, açma-kapama düğmesi, basılı değil”
Devre dışı düğme	“İndir, düğme, soluk”

Kontrast

Etiketler ve ikonlar zeminde en az 4,5:1, kap kenarlığı ve ayırıcı süs olarak kalır. Açık durum yalnız renkle gösterilmez; aria-pressed ekran okuyucuya, seçili zemin görsel olarak bildirir. Devre dışı durum eşikten muaftır (WCAG 1.4.3).

WCAG 2.2

Ölçüt	Toolbar nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	toolbar, group ve separator rolleri.	İlgili düğmeleri ToolbarGroup ile gruplayın.
2.1.1 Klavye	Ok tuşları, Enter ve Space.	Kendi tuş işleyicinizi eklemeyin.
2.4.3 Odak sırası	Tek sekme durağı, son konumu hatırlar.	Araç çubuğunu yöneldiği alanın yakınına koyun.
2.4.7 Görünür odak	focus-visible halkası.	Halkayı kaldırmayın.
2.5.8 Hedef boyutu (asgari)	En küçük düğme 32 × 32 px’tir.	Dokunmatik ekranlarda md kullanın.
4.1.2 Ad, rol, değer	Ad label’dan, açma-kapama durumu aria-pressed’dan gelir.	Yalnızca ikonlu düğmelere anlamlı label verin.