YearPicker

Rol ve anlam

Tetikleyici bir düğmedir; adı etiket ve seçili değerden oluşur (aria-labelledby). Yardım metni ve hata aria-describedby ile bağlıdır. Açılan panel bir iletişim kutusudur; içindeki tablo grid rolündedir ve başlıkla adlandırılır. Seçili hücre aria-selected, seçilemez hücre aria-disabled taşır.

Klavye

Tuş	Davranış
Enter, Space	Tetikleyicide tabloyu açar; hücrede seçer ve kapatır.
Sol, Sağ	Bir hücre geri ya da ileri.
Yukarı, Aşağı	Bir satır yukarı ya da aşağı (üç hücre).
Home, End	Satırın başı ya da sonu.
Page Up, Page Down	Önceki ya da sonraki sayfa.
Escape	Tabloyu seçmeden kapatır; odak tetikleyiciye döner.

Odak

Tablo açılınca odak seçili ya da bugünkü hücreye gider; hücreler arasında gezici tabindex kullanılır. Odak çizgisi hücrenin 2 px dışına çizilen 2 px color-focus-ring’dir.

Ekran okuyucu

Örnek	Okunan
Tetikleyici	“Mali yıl, 2026, düğme”
Hücre	“2026, bu yıl, seçili”
Sayfa değişimi	Başlık kibar canlı bölgeden okunur.

Kontrast

Hücre metni 4.5:1; seçili hücrede birincil dolgu üzerindeki metin 4.5:1 kontrastlıdır. Bugünkü hücre çerçeve ve kalın yazıyla da ayrılır.

WCAG 2.2

Ölçüt	YearPicker nasıl karşılar	Ürün ekibi ne yapar
1.3.1 Bilgi ve ilişkiler	Etiket, grid, aria-selected.	Her alana bir label verin.
2.1.1 Klavye	Ok tuşları, Home, End, Page Up, Page Down.	Tabloyu başka bir kapta tuzaklamayın.
2.5.8 Hedef boyutu	Hücreler 36 px yüksekliğindedir.	-
4.1.2 Ad, rol, değer	Tetikleyici adı değeri içerir.	Değeri yardım metninde tekrar etmeyin.