Select

Rol ve anlam

Select, Base UI Select üzerine kuruludur ve APG “yalnızca seçim yapılan birleşik kutu” kalıbını izler. Tetikleyici combobox rolü taşır ve Field etiketiyle adlandırılır. Liste listbox, seçenekler option rolündedir; seçili seçenek aria-selected, devre dışı seçenek aria-disabled taşır.

Klavye

Tuş	Davranış
Enter, Space, aşağı ok	Listeyi açar.
Yukarı ve aşağı ok	Vurguyu seçenekler arasında taşır.
Harf tuşları	Etiketi o harfle başlayan seçeneğe gider.
Enter, Space (liste açık)	Vurgulanan seçeneği seçer ve listeyi kapatır.
Escape	Listeyi seçim yapmadan kapatır; odak tetikleyiciye döner.
Tab	Listeyi kapatır ve odağı sonraki öğeye taşır.

Odak

Tetikleyici focus-visible ile 2 px dışına çizilen 2 px color-focus-ring odak çizgisi gösterir. Liste açıkken odak listededir; vurgulanan seçenek color-surface-selected zemin alır. Liste kapanınca odak tetikleyiciye döner.

Ekran okuyucu

Örnek	Okunan
Boş tetikleyici	“Alan etiketi, birleşik kutu, Seçin, daraltılmış”
Liste açıkken	“Birinci seçenek, 1 / 3”
Devre dışı seçenek	“Üçüncü seçenek, soluk” ya da “kullanılamaz”

Kontrast

Tetikleyici kenarlığı 3:1, metin ve seçenek etiketleri 4.5:1 kontrast taşır. Seçili seçenek renk dışında onay işaretiyle de gösterilir.

WCAG 2.2

Ölçüt	Select nasıl karşılar	Ürün ekibi ne yapmalı
1.3.1 Bilgi ve ilişkiler	Field etiketi ve aria-describedby.	Her alana label verin.
1.4.1 Renk kullanımı	Seçili seçenek onay işareti taşır.	İkonları anlamın tek taşıyıcısı yapmayın.
2.1.1 Klavye	Oklar, harf tuşları, Enter, Escape.	Listeyi kısa tutun.
4.1.2 Ad, rol, değer	combobox, listbox, option, aria-selected.	Seçenek etiketlerini benzersiz tutun.