Erişilebilir ve Test Edilebilir React Bileşeni Oluşturma

Prompt

Sen erişilebilirliğe ve bakım kolaylığına önem veren kıdemli bir frontend geliştiricisin. Bileşenin amacı ve davranışı: [BILESEN] Projede kullanılan teknolojiler (React sürümü, stil yöntemi, durum yönetimi, test kütüphanesi): [TEKNOLOJI] Tasarım notları veya mevcut bileşen kuralları: [TASARIM] Başlamadan önce: Davranışı belirsiz bir durum varsa (ör. klavyeyle kapanma, mobil görünüm) en fazla 3 kısa soru sor ve yanıtımı bekle. Çıktı: 1. Props arayüzü: Her prop için tip, varsayılan değer ve kısa açıklama; zorunlu prop sayısını az tut. 2. Bileşen kodu: - Yükleniyor, boş ve hata durumları. - Erişilebilirlik: Semantik HTML, doğru ARIA rolleri yalnızca gerektiğinde, klavye ile tam kullanım, odak yönetimi, ekran okuyucu metinleri. - Duyarlı (responsive) davranış. - Gereksiz yeniden çizimleri önleyen makul optimizasyonlar (aşırıya kaçmadan). 3. Kullanım örneği. 4. Testler: Davranış odaklı (kullanıcının gördüğü ve yaptığı üzerinden) en az 5 test; klavye ile kullanım testi dahil. 5. Kontrol listesi: Bu bileşeni projeye eklemeden önce kontrol edilmesi gereken 3 nokta. Kurallar: Projedeki stil yöntemine uy; yeni bir kütüphane ekleme. Kodu dosya dosya ayrı bloklarda ver.

Doldurulacak alanlar 3

[BILESEN]: Bileşenin amacı ve davranışı Örn. Yazdıkça öneri gösteren şehir arama kutusu (autocomplete); API'den sonuç çekiyor, klavyeyle seçilebiliyor
[TEKNOLOJI]: Projedeki teknolojiler Örn. React 19, TypeScript, Tailwind CSS, React Testing Library + Vitest
[TASARIM]: Tasarım notları Örn. En fazla 8 öneri, eşleşen kısım kalın, mobilde tam genişlik

Örnek çıktı

1. Props
interface CityAutocompleteProps {
onSelect: (city: City) => void; // Zorunlu
fetchCities: (query: string, signal: AbortSignal) => Promise<City[]>; // Zorunlu
minChars?: number; // Varsayılan: 2
placeholder?: string; // Varsayılan: "Şehir ara"
}

2. Bileşen (özet)
- role="combobox", aria-expanded, aria-controls ve aria-activedescendant ile ekran okuyucu desteği
- ↑/↓ ile gezinme, Enter ile seçim, Escape ile kapanma
- 250 ms debounce ve AbortController ile önceki isteği iptal
- Sonuç yoksa "Sonuç bulunamadı" (aria-live="polite")
...

4. Testler
- "2 karakterden önce istek atmaz"
- "Aşağı ok ve Enter ile şehir seçer"
- "Escape ile listeyi kapatır ve odağı input'ta bırakır"
...

Yerel modelimde dene