Combobox

Rol ve anlam

Combobox, Base UI Combobox ile çizilir. Giriş role="combobox" taşır, aria-expanded ve aria-controls ile listeye bağlıdır; adı Field üzerinden görünür etiketten gelir, açıklama ve hata aria-describedby ile bağlanır. Liste role="listbox", seçenekler role="option" ve aria-selected taşır. Vurgulanan seçenek aria-activedescendant ile duyurulur; odak girişte kalır. Yükleniyor ve sonuç yok satırları role="status" bölgesindedir. Çip kaldırma düğmeleri “Ankara kaldır” gibi adlar taşır.

Klavye

Tuş	Davranış
Yazma	Listeyi açar ve süzer.
Aşağı ve yukarı ok	Listeyi açar; seçenekler arasında gezer.
Enter	Vurgulanan seçeneği seçer.
Escape	Listeyi kapatır; kapalıyken metni temizler.
Backspace	multiple ile boş girişte son çipi kaldırır.
Sol ve sağ ok	multiple ile boş girişten çipler arasında gezer.
Tab	Seçmeden alandan çıkar.

Ok düğmesi sekme sırasına girmez; klavye yolu giriştir.

Odak

Odak girişte kalır; liste içindeki vurgu görsel ve aria-activedescendant iledir. Alanda odak varken kenarlık ve kutunun 2 px dışında 2 px color-focus-ring odak çizgisi görünür. Temizle ve çip kaldırma düğmeleri işini yaptıktan sonra odak girişe döner.

Ekran okuyucu

Örnek	Okunan
Girişe odak	“Şehir, birleşik giriş kutusu, daraltılmış, Yazdıkça liste daralır.”
Liste açık	“Ankara, 2 / 7”
Yükleniyor	“Yükleniyor”
Sonuç yok	“Sonuç bulunamadı”
Çip kaldırma	“Ankara kaldır, düğme”

Kontrast

Metin ve etiketler zeminde en az 4,5:1; giriş kenarlığı ve ok ikonu en az 3:1 kontrast taşır. Seçili seçenek yalnız renkle değil onay işaretiyle de gösterilir.

WCAG 2.2

Ölçüt	Combobox nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Etiket, açıklama ve hata Field ile bağlanır.	Her zaman label verin.
1.4.1 Renk kullanımı	Seçim onay işaretiyle de gösterilir.	İşareti gizlemeyin.
2.1.1 Klavye	Ok tuşları, Enter, Escape, Backspace.	Kendi tuş işleyicinizi eklemeyin.
3.3.1 Hata tanımlama	error girişle birlikte okunur.	Hatanın nasıl düzeleceğini yazın.
4.1.2 Ad, rol, değer	combobox, listbox, option rolleri ve durumları.	Seçenek etiketlerini benzersiz tutun.
4.1.3 Durum mesajları	Yükleniyor ve sonuç yok role="status" ile duyurulur.	Yükleme bitince loading değerini kapatın.