Erişilebilir ve Test Edilebilir React Bileşeni Oluşturma
İhtiyacınız olan arayüz bileşenini tarif edin; TypeScript tipli, erişilebilirlik kurallarına uygun, durumları (yükleniyor, boş, hata) düşünülmüş ve testleri yazılmış bir React bileşeni alın.
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.
Detayı gör
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.
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"
...