Erişilebilirlik

Tüm seçici bileşenleri, yerleşik erişilebilirlik desteğiyle birlikte gelir. Klavye navigasyonu, ARIA nitelikleri ve odak yönetimi, her varyantta — Styled, Tailwind v3/v4 ve Headless — kutudan çıktığı gibi çalışır.

Standart kullanım için ek bir yapılandırma gerekmez. Bu sayfa, özel kullanıcı arayüzlerinde kalıpları denetleyebilmeniz, genişletebilmeniz veya çoğaltabilmeniz için nelerin dahil edildiğini belgeler.

Klavye Navigasyonu

Takvim Seçiciler

Devre dışı bırakılmış tarih atlama: Ok tuşlarıyla gezinirken, devre dışı bırakılmış tarihler otomatik olarak atlanır. Seçici, bir sonraki etkin tarihi bulmak için hareket yönünde 365 güne kadar arama yapar.

Otomatik ay kaydırma: Klavye odağı farklı bir aydaki bir güne geçtiğinde, takvim görünümü o ayı gösterecek şekilde güncellenir.

Zaman Seçici

Zaman seçimi, tıklama/dokunma etkileşimli bir kaydırma tekerleği arayüzü kullanır. Kaydırma sütunları, hassas değer seçimi için scroll-snap kullanır.

ARIA Nitelikleri

Her etkileşimli öğe uygun ARIA rollerine ve niteliklerine sahiptir:

Açılır Pencere & Kapsayıcı

Tetikleyici Düğme

Takvim Izgarası

Navigasyon & Açılır Menüler

Zaman Sütunları

Tüm etiket dizeleri yerel ayar sistemi aracılığıyla özelleştirilebilir.

Odak Yönetimi

Gezici Tabindex

Takvim ızgarası gezici tabindex modelini kullanır:

• Yalnızca o an odaklanmış gün hücresi tabIndex={0}’a sahiptir (sekmeyle gezilebilir).
• Diğer tüm gün hücreleri tabIndex={-1}’e sahiptir (sekmeyle gezilemez, ancak ok tuşlarıyla odaklanılabilir).
• Bu, Tab tuşunun odağı takvim ızgarasının dışına (sonraki kontrole) taşıdığı ve ok tuşlarının odağı ızgara içinde hareket ettirdiği anlamına gelir.

Açılır Pencere Odak Yakalama

Açılır pencere modu, @floating-ui/react’ten FloatingFocusManager’ı şu amaçlarla kullanır:

• Açıkken odağı açılır pencere içinde yakalar.
• Açılır pencere kapandığında odağı tetikleyici düğmeye döndürür.
• Sekme ile açılır pencereden arka plan içeriğine geçilmesini engeller.

Yerel Öğeler

Ay ve yıl seçimi, doğası gereği klavyeyle erişilebilir olan yerel <select> öğelerini kullanır. Gün hücreleri, uygun devre dışı bırakma durumlarıyla yerel <button> öğelerini kullanır.

WCAG 2.1 Uyumluluğu

Aşağıdaki WCAG 2.1 başarı ölçütleri ele alınmıştır:

Headless: Erişilebilir Özel Arayüzler Oluşturma

Headless paketini doğrudan kullanıyorsanız, özel kullanıcı arayüzünüzün şunları içerdiğinden emin olun:

1. Klavye işleyicisini uygula

Ok tuşuyla gezinmenin çalışması için handleKeyDown’u açılır pencere kapsayıcınıza geçirin:

const { handleKeyDown, ... } = useDatePicker({ value, onChange });

<div onKeyDown={handleKeyDown}>
  {/* calendar grid */}
</div>

2. Gün hücrelerinde doğru tabIndex’i ayarla

getDayProps()’tan gelen isFocused bayrağını kullanın:

const dayProps = getDayProps(date);

<button
  role="gridcell"
  tabIndex={dayProps.isFocused ? 0 : -1}
  aria-selected={dayProps.isSelected}
  aria-current={dayProps.isToday ? "date" : undefined}
  aria-label={locale.formatDate(date)}
>
  {dayProps.day}
</button>;

3. Izgaranıza ARIA rolleri ekleyin

<div role="grid" aria-label={locale.placeholder}>
  <div role="row">
    {locale.weekdays.map((wd) => (
      <div key={wd} role="columnheader">
        {wd}
      </div>
    ))}
  </div>
  {calendar.weeks.map((week, i) => (
    <div key={i} role="row">
      {/* day cells with role="gridcell" */}
    </div>
  ))}
</div>

Tam bir kılavuz için Özel Kullanıcı Arayüzü Oluşturma bölümüne bakın.