Needless UI

Bileşenler

Select

Kısa ya da devasa bir listeden bir veya birden çok seçenek seçin.

Klavye etkileşimi

Tuşİşlev
Aşağı ve yukarı okListeyi açar, ardından seçenekler arasında gezinir.
Home ve Endİlk veya son seçeneğe gider.
Page Down ve Page UpOn seçenek atlar.
Enter veya BoşlukListeyi açar ya da etkin seçeneği seçer.
HarflerYazılan harflerle başlayan bir sonraki seçeneğe atlar.
Sağ ve sol okAğaçta bir seçeneği genişletir veya ilk alt öğesine gider; daraltır veya üst öğesine gider. Sağdan sola metinde tersine çalışır.
Alt + yukarı okEtkin seçeneği seçer ve listeyi kapatır.
TabTekli seçimde etkin seçeneği seçer ve sonraki öğeye geçer.
EscSeçim yapmadan listeyi kapatır.

Erişilebilirlik notları

  • Düğme, aria-expanded ve aria-controls taşıyan, yalnızca seçim yapılan bir combobox öğesidir. Odak düğmede kalır; aria-activedescendant etkin seçeneği gösterir.
  • Liste bir listbox ya da aria-level ve aria-expanded taşıyan bir tree öğesidir. Yalnızca bazı satırlar render edildiğinde de aria-setsize ve aria-posinset doğru kalır.
  • Etkin seçenek dolgun bir zemin, forced colors modunda ise bir dış çizgi alır.
  • triggerId değerini gösteren bir <label for> ya da label ile adlandırın.