IconButton

Rol ve anlam

IconButton, Base UI Button ile çizilen yerel bir <button type="button"> öğesidir. label, aria-label olarak adı verir; ikon aria-hidden="true" taşır. label tip düzeyinde zorunludur: verilmezse TypeScript hata verir.

Klavye

Tuş	Davranış
Tab	Butona odaklanır; devre dışıysa atlar (focusableWhenDisabled yoksa).
Enter, Space	İşlemi çalıştırır. loading ya da disabled iken bir şey olmaz.

Odak

Klavyeyle odaklanınca 2 px color-focus-ring halkası kutunun 2 px dışında görünür; fareyle tıklamada görünmez (focus-visible). Yükleniyorken odak butonda kalır.

Ekran okuyucu

Örnek	Okunan
<IconButton icon="x" label="Kapat" />	“Kapat, düğme”
loading başlarken	“Kapat, düğme”, ardından bir kez “Yükleniyor”
disabled focusableWhenDisabled	“Kapat, düğme, devre dışı”

Kontrast

İkon, varyantın metin token’ını kullanır ve zemininde en az 3:1 kontrast taşır (metin dışı öğe). Token paketindeki test bu çiftleri her markada ve modda denetler.

WCAG 2.2

Ölçüt	IconButton nasıl karşılar	Ürün ekibi ne yapmalı
1.1.1 Metin dışı içerik	İkon gizlidir; ad label ile verilir.	label metnini işlemi anlatan bir fiille yazın.
2.4.7 Görünür odak	focus-visible halkası.	Halkayı className ile kaldırmayın.
2.5.3 Addaki etiket	Görünür metin yoktur; ad yalnızca label’dır.	İpucu metniyle adı aynı tutun.
2.5.8 Hedef boyutu (asgari)	En küçük boyut 32 × 32 px, 24 px eşiğinin üstünde.	Butonlar arasında boşluk bırakın.
4.1.2 Ad, rol, değer	Yerel <button>, aria-label, aria-disabled.	Rolü render ile değiştirmeyin.