DropdownMenu

Rol ve anlam

DropdownMenu, Base UI Menu ile APG Menü Butonu desenini uygular. Tetikleyici aria-haspopup="menu" ve aria-expanded taşır; menü role="menu", öğeler menuitem, menuitemcheckbox ya da menuitemradio rolündedir ve aria-checked taşır. Gruplar etiketleriyle adlandırılır. Kısayollar aria-keyshortcuts ile bildirilir; görünen Kbd okunmaz. İkinci satır ve devre dışı nedeni, görünen metinle aynı kalması için öğenin adına etiketten sonra eklenir (WCAG 2.5.3).

Klavye

Tuş	Davranış
Enter / Space / Aşağı ok	Tetikleyicide menüyü açar, ilk öğeyi vurgular.
Yukarı / Aşağı ok	Öğeler arasında gezer, uçlarda döner.
Home / End	İlk ya da son öğe.
Harf	O harfle başlayan öğeye atlar.
Enter / Space	Öğeyi seçer.
Sağ ok (sağdan sola: Sol ok)	Alt menüyü açar.
Sol ok (sağdan sola: Sağ ok)	Alt menüyü kapatır.
Escape	Menüyü kapatır; odak tetikleyiciye döner.
Tab	Menüyü kapatır ve sonraki öğeye geçer.

Odak

Menü açıkken odak vurgulanan öğededir. Kapanınca odak tetikleyiciye döner. Devre dışı öğeler vurgulanabilir, böylece nedenleri okunur.

Ekran okuyucu

Örnek	Okunan
Tetikleyici	“İşlemler, menü düğmesi, daraltılmış”
Kısayollu öğe	“Düzenle, menü öğesi” ve kısayol bilgisi (ekran okuyucuya göre)
Devre dışı öğe	“Dışa aktar, soluk, menü öğesi, Dışa aktarma bu öğe için kapalı.”
Onay öğesi	“Birinci öğe, menü onay kutusu, işaretli”

Kontrast

Öğe metni ve vurgulu zemin en az 4.5:1, tehlike metni color-text-danger en az 4.5:1 kontrast taşır. Tehlike yalnızca renkle değil, etiketteki fiille de anlatılır.

WCAG 2.2

Ölçüt	DropdownMenu nasıl karşılar	Ürün ekibi ne yapmalı
2.1.1 Klavye	Tüm öğeler ve alt menüler klavyeyle çalışır.	Yok.
2.4.3 Odak sırası	Odak kapanınca tetikleyiciye döner.	Yok.
1.4.1 Rengin kullanımı	Tehlike etiketle de belirtilir.	Etiketi fiille yazın.
2.5.8 Hedef boyutu	Öğeler en az 32 px.	Yok.
4.1.2 Ad, rol, değer	Roller, aria-checked, aria-keyshortcuts.	Kısayolu gerçekten bağlayın.