ListBox A11Y not working

[dmvvilela]

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]

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.

[dmvvilela]

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

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

[NoelOConnell]

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

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]

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