Bileşenler
Autocomplete
Yazarken öneri gösteren, ama her metni kabul eden metin alanı.
- Storybook
- Storybook
- Kaynak kod
- Kaynak kod
Rol ve anlam
Bölüm başlığı “Rol ve anlam”Autocomplete, Base UI Autocomplete üzerine kuruludur ve APG liste otomatik tamamlamalı açılır kutu kalıbını izler. Giriş combobox rolündedir, aria-autocomplete taşır ve Field etiketiyle adlandırılır. Liste listbox, öneriler option rolündedir.
Klavye
Bölüm başlığı “Klavye”| Tuş | Davranış |
|---|---|
| Harf tuşları | Yazar ve listeyi süzer. |
| Yukarı, Aşağı | Önerileri vurgular. |
| Enter | Vurgulanan öneriyi alana yazar. |
| Escape | Listeyi kapatır; açık değilse metni korur. |
| Tab | Listeyi kapatır, sonraki öğeye geçer. |
Odak girişte kalır; vurgulanan öneri aria-activedescendant ile bildirilir. Alan focus-visible ile kutunun 2 px dışında 2 px color-focus-ring odak çizgisi gösterir.
Ekran okuyucu
Bölüm başlığı “Ekran okuyucu”| Örnek | Okunan |
|---|---|
| Giriş | “Şehir, açılır kutu, otomatik tamamlama listesi” |
| Vurgulu öneri | “İzmir, 1 / 3” |
| Yükleniyor | “Yükleniyor” (durum bölgesi) |
Kontrast
Bölüm başlığı “Kontrast”Kenarlık 3:1, metin ve öneriler 4.5:1 kontrastlıdır.
WCAG 2.2
Bölüm başlığı “WCAG 2.2”| Ölçüt | Autocomplete nasıl karşılar | Ürün ekibi ne yapar |
|---|---|---|
| 1.3.1 Bilgi ve ilişkiler | Field etiketi ve aria-describedby. |
Her alana bir label verin. |
| 2.1.1 Klavye | Oklar, Enter, Escape. | - |
| 4.1.2 Ad, rol, değer | combobox, listbox, option. |
Önerileri benzersiz tutun. |
| 4.1.3 Durum iletileri | Yükleniyor durumu bölgeden okunur. | Sunucu yanıtı bitince loading’i kaldırın. |