DateRangePicker

Rol ve anlam

İki parça grubu role="group" taşır ve etiketle birlikte “Başlangıç tarihi” ya da “Bitiş tarihi” ile adlandırılır. Her parça “Başlangıç tarihi, gün” gibi bir spinbutton’dır. Açılır pencere etiketle adlandırılmış bir iletişim kutusudur; hazır aralıklar “Hazır aralıklar” adlı bir radiogroup’tur. Takvim Calendar ızgarasıdır; aralığın uçları aria-selected taşır.

Klavye

Tuş	Davranış
Tab	Başlangıç parçaları, bitiş parçaları, takvim düğmesi. Pencerede: hazır aralıklar, ay düğmeleri, ızgara, alt çubuk.
Rakamlar	Parçayı doldurur; başlangıç yılı dolunca bitiş gününe geçer.
Yukarı ve aşağı ok	Parçayı değiştirir; hazır aralıklarda bir sonrakini seçer.
Izgara tuşları	Odaktaki gün aralığı önizler; Enter ya da Space ucu seçer.
Escape	Pencereyi kapatır; odak takvim düğmesine döner.

Odak

Pencere açılınca odak aralığın başlangıcına (yoksa bugüne) gider. Hazır aralık seçmek pencereyi kapatmaz, böylece oklarla gezinmek odağı kaybettirmez.

Ekran okuyucu

Örnek	Okunan
Başlangıç günü	“Başlangıç tarihi, gün, 1, döndürme düğmesi”
Hazır aralık	“Son 7 gün, radyo düğmesi, 2 / 7”
Ters aralık	“Bitiş tarihi başlangıçtan önce olamaz”

Kontrast

Uç günler birincil dolguda 4,5:1; aralık içi color-surface-selected üzerinde metin 4,5:1 kontrast taşır. Aralık içi yalnızca renkle değil, köşesiz şekille de ayrılır.

WCAG 2.2

Ölçüt	DateRangePicker nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Adlandırılmış iki grup ve radyo grubu.	—
2.1.1 Klavye	Yazarak giriş, klavyeyle önizleme ve seçim.	—
3.2.2 Girdi	Hazır aralık pencereyi kapatmaz; confirm kipi açık bir onay sunar.	Ağır sorgular için confirm kullanın.
3.3.1 Hata tanımlama	Ters, uzun ve aralık dışı tarihler yerleşik mesaj alır.	—