Bileşenler
SearchInput
Temizleme düğmeli, gecikmeli aramalı ve yükleniyor durumlu arama alanı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Alan <input type="search"> olarak çizilir ve searchbox rolünü taşır; etiket <label> ile bağlanır, gizliyken de. landmark alanı role="search" bölgesine sarar. Temizleme düğmesi Provider dilinde adlandırılır; arama ikonu ve yükleniyor halkası gizlidir.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Tab | Alana, değer varsa temizleme düğmesine gider. |
| Enter | onSubmit çağırır. |
| Escape | Değeri temizler; alan boşsa olay çevreye geçer. |
Odak kutunun tamamını çevreler (focus-within). Temizleme sonrası odak alana döner; düğme kaybolurken odak boşa düşmez.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Alan | “Ara, arama kutusu” |
| Temizleme düğmesi | “Aramayı temizle, düğme” |
| Temizleyince | “Arama temizlendi”, kibar duyuru |
| Yüklenirken | “Aranıyor”, bir kez |
Kontrast
Bölüm başlığı “Kontrast”Kenarlık en az 3:1, arama ikonu ve yer tutucu color-text-subtle ve color-text-placeholder ile 4,5:1 kontrast taşır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | SearchInput nasıl karşılar | Ürün ekibi ne yapmalı |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | Etiket her zaman vardır, gizliyken de. | label boş bırakmayın. |
| 2.4.3 Odak sırası | Temizlemede odak alana döner. | — |
| 2.5.8 Hedef boyutu (asgari) | Temizleme düğmesi 32 px. | — |
| 4.1.3 Durum mesajları | Yükleniyor ve temizlendi role="status". |
Sonuç sayısını da bir durum bölgesiyle duyurun. |