Bileşenler

Switch

Hemen etki eden açık ya da kapalı bir ayar ve yanındaki etiket.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

Switch, Base UI Switch ile role="switch" taşıyan bir öğe ve form için gizli bir <input> çizer. Anahtar, onu saran <label> ile adlandırılır; durum aria-checked ile bildirilir.

Klavye

Tuş	Davranış
Tab	Anahtara odaklanır; devre dışıysa atlar. Kaydedilirken odak kalır.
Space	Durumu değiştirir; `loading` sürerken etkisizdir.

Odak

Odakta 2 px color-focus-ring halkası rayın 2 px dışında görünür (focus-visible).

Ekran okuyucu

Örnek	Okunan
Kapalı	“Seçenek etiketi, anahtar, kapalı”
Kaydedilirken	“Kaydediliyor” bir kez, kibar duyuru olarak

Kontrast

Kapalı rayın color-border-strong dolgusu zeminde en az 3:1 kontrast taşır. Başparmak shadow-raised ile raydan ayrılır.

WCAG 2.2

Ölçüt	Switch nasıl karşılar	Ürün ekibi ne yapmalı
1.4.11 Metin dışı kontrast	Ray ve başparmak 3:1.	Ray rengini `className` ile açmayın.
2.5.8 Hedef boyutu (asgari)	Ray ile etiket tek tıklama alanıdır.	Etiketi boş bırakmayın.
4.1.2 Ad, rol, değer	`role="switch"` ve `aria-checked`.	Etikete “aç” ya da “kapat” yazmayın.
4.1.3 Durum mesajları	Kayıt `role="status"` ile bir kez duyurulur.	Hata olursa durumu geri alıp bildirin.