search

rgossiaux / svelte-headlessui

Unofficial Svelte port of the Headless UI component library
https://svelte-headlessui.goss.io
MIT License
1.79k stars 97 forks source link

ListBox A11Y not working #137

Closed dmvvilela closed 1 year ago

dmvvilela commented 1 year ago

I made a ListBox Inside a Dialog and A11Y features does not work.

Tab key and keyboard up and down does not change ListboxOption inside ListboxOptions.

NoelOConnell commented 1 year ago

Can you provide a repl example of the issue?

It works as expected for me : https://svelte.dev/repl/34783d7a5b204f8b8e78a6c5945bdee7?version=3.55.1

Up/Down key will highlight a new ListboxOption. The value of the Listbox will only change via the keyboard if the enter or space key is pressed.

image

dmvvilela commented 1 year ago

Hmm.. mine is not working. Check it out here:

https://svelte.dev/repl/9c5e243eba7d42ad9ccab74f1d1f9f1e?version=3.55.1

NoelOConnell commented 1 year ago

I see your trying to use the Listbox without a ListboxButton. That is required for the focus management and keyboard interaction. image

From your example it looks like you want a list of items that is filterable. This would be the job of a Combobox. That component is not part of the library yet. There is an open PR #126 but it is not merged yet.

I have a package on npm of which includes that PR. https://www.npmjs.com/package/svelte-headlessui-combobox-temporary

You can find the docs for that component here https://svelte-headlessui-git-fork-noeloconnell-combob-d68663-rgossiaux.vercel.app/docs/combobox

dmvvilela commented 1 year ago

Oh man, thank you so much! @NoelOConnell 🙏🏼 Will try it now!