Good library for handling combobox-style search UI? (with Pagefind)
I'm trying to create an Algolia-style interface with Pagefind's search API, but I'm not sure how to handle the arrow navigation in an accessibility-friendly way. I was wondering what the best approach to this would be, and whether I should use an existing SolidJS component library (I don't know which one would work for this), write my own solution (not sure how to do that in an accessible way), or if this is possible with just HTML.
I made a GitHub Discussion in the Kobalte repo about potentially using the their combobox component, but looking through their documentation, I don't think that would be supported behavior.
GitHub
Can the Combobox be used with a page search library? · kobaltedev ·...
I'm thinking of using Pagefind's search API with Kobalte's combobox as the interface for accessibility purposes, but I'm not sure if it would work. I'd like to replace the Kobal...
3 Replies
Would it suffice to have a
keydown handlers for the up and down arrow keys that moves focus up and down between the element and a focus trap?I created https://solid-select.com/ a while back. Might be of use here? Supports calling out to another resource to populate results. Likely not as good on accessibility as Kobalte though.
Solid Select
The Select component for Solid.
I ended up just moving focus based on arrow keys (I don't know if it interferes with accessibility, but I don't think it should), but I'm pretty sure I've used that library before. Thanks for making it :)