Bileşenler

NativeSelect

Tarayıcının kendi seçim listesi; Select ile aynı görünen kapalı alan.

Storybook: Storybook
Kaynak kod: Kaynak kod

Rol ve anlam

NativeSelect HTML <select> öğesidir; rolü, değeri ve seçenekleri tarayıcıdan gelir. Etiket <label> ile, yardım metni ve hata aria-describedby ile bağlıdır; hata aria-invalid ekler.

Klavye

Tuş	Davranış
Tab	Kontrole odaklanır.
Space, Alt + Aşağı	Tarayıcının listesini açar.
Yukarı, Aşağı, harf tuşları	Seçeneği değiştirir.

Odak

Kontrol focus-visible ile odak kenarlığı ve kutunun 2 px dışında 2 px color-focus-ring odak çizgisi gösterir.

Ekran okuyucu

Örnek	Okunan
Boş kontrol	“Alan etiketi, açılır kutu, Seçin”
Hata	“Alan etiketi, açılır kutu, geçersiz veri, Bir seçenek seçin.”

Kontrast

Kenarlık 3:1, metin 4.5:1 kontrastlıdır. Devre dışı metin color-text-disabled ile okunur kalır.

WCAG 2.2

Ölçüt	NativeSelect nasıl karşılar	Ürün ekibi ne yapar
1.3.1 Bilgi ve ilişkiler	`<label>` ve `aria-describedby`.	Her alana bir `label` verin.
2.5.8 Hedef boyutu	Kontrol en küçük boyda 32 px, varsayılan 36 px yüksekliğindedir; dokunmatik ekranda varsayılan 40 px olur.	Dar kaplarda genişliği kısmayın.
4.1.2 Ad, rol, değer	Yerel `<select>`.	Seçenek metinlerini benzersiz tutun.