FlowFuse
Improve UX of ff-dropdown to help finding items in a long list
Description
As discussed in slack. https://flowforgeworkspace.slack.com/archives/C032Q63FGG1/p1725912937395249
"our dropdown list component is non-accessible (does not permit me to type characters to get to item of interest) or use keyboard to navigate it - I am forced to use mouse."
This is related to recent frustrations around selecting Snapshots from the dropdown list.
TBH, we use headlessui menu component in FF (frontend/src/components/DropdownMenu.vue) and this works as expected (can type to search, can navigate using keyboard, has all of the aria stuff etc etc). Perhaps we could simply replace the internals of ff-dropdown (frontend/src/ui-components/components/form/Dropdown.vue) to use the headlessui component too, as a first (second) iteration (and gain all of its capabilities for free?). Also, the headless menu supports icons and fly out sub menus - something we could benefit from in some of our tables kebab menus!
Where we use headless menu - note keyboard nav and esc key support
Where we rolled our own - note no keyboard nav, esc not possible
Epic/Story
No response
Have you provided an initial effort estimate for this issue?
I have provided an initial effort estimate
### Tasks
- [ ] https://github.com/FlowFuse/flowfuse/issues/4559
- [ ] https://github.com/FlowFuse/flowfuse/issues/4561
- [ ] https://github.com/FlowFuse/flowfuse/issues/4562
- [ ] https://github.com/FlowFuse/flowfuse/issues/4563
Altering the existing Dropdown.vue component wouldn't have the effect we'd want or expect. Wherever we're using this component, we're overriding it's default slot with custom content (ff-dropdown-option, etc).
In order to keep it simple, atomic and testable, I'll create a new ListBox.vue (ff-list-box) component that's based on Listbox UI and I'll create follow-up tasks to slowly replace the Dropdown.vue component.
