NumberField

Rol ve anlam

NumberField, Base UI NumberField ile bir metin kutusu çizer; inputmode sayısal klavyeyi açar. aria-roledescription yerelleştirilmiştir (“Sayı alanı”); Base UI’ın İngilizce varsayılanı kullanılmaz. Etiket <label> ile bağlanır; açıklama ve hata aria-describedby ile okunur. Adım düğmeleri aria-controls ile alana bağlıdır ve Provider dilinde adlandırılır.

Klavye

Tuş	Davranış
Tab	Alana odaklanır; adım düğmeleri atlanır.
Yukarı ve Aşağı ok	Değeri step kadar değiştirir.
Shift + ok, Page Up, Page Down	Değeri largeStep kadar değiştirir.
Alt + ok	Küçük adım (step / 10).
Home, End	min ya da max tanımlıysa ona atlar.
Enter	Değeri işler (onValueCommitted).

Odak

Odak kutunun tamamını çevreler: 2 px color-focus-ring halkası ve odak kenarlığı (focus-within). Adım düğmelerine fareyle basmak odağı alana bırakır.

Ekran okuyucu

Örnek	Okunan
Varsayılan	“Adet, Sayı alanı, 1”
Birimli	“Gün sayısı (gün), Sayı alanı, 7”
Sınıra çekilince	“Değer 30 olarak düzeltildi”, kibar duyuru

Kontrast

Kutu kenarlığı color-border-input zeminde en az 3:1, adım ikonları color-text-subtle en az 4,5:1 kontrast taşır.

WCAG 2.2

Ölçüt	NumberField nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Etiket, açıklama ve hata alana bağlı; birim adın içinde.	Birimi yalnızca yer tutucuya yazmayın.
2.5.8 Hedef boyutu (asgari)	Adım düğmeleri 32 px.	Düğmeleri className ile küçültmeyin.
3.3.1 Hata tanımlama	Hata metni alana bağlı, kenarlık tek ipucu değil.	Hatayı aralığı söyleyerek yazın.
3.3.2 Etiketler veya yönergeler	Aralık açıklamada gösterilebilir.	Aralık önemliyse açıklamaya yazın.
4.1.3 Durum mesajları	Sınıra çekme role="status" ile duyurulur.	—