The 'plugin' contained in the example includes a lot of focus management
logic that would have been so much better to externalize into its own
module. In fact, the focus management code and aria-activedescendant code really should be its own example module.
I favor creating reusable components that implement all the right behavior
but doesn't "gatekeep" if there are additional requirements that are
needed to be added. By putting the rendering of the
ComboxboxRows/ComboboxCells into the user's control, it can serve both the
aria requirements as well as any user requirements such as groupings,
horizontal lines, or different search behaviors.
I found it pretty difficult to follow the logic that binds the various
behaviors to the multiple elements.
I had always been taught to avoid line-height units (eg.
line-height: 24px;
so I converted the styles over to
unitless line-height.
The active-descendent code has been the hardest to write so far.
This example doesn't tackle the issue of changing modality: what should
the behavior be if the user switches from keyboard input to mouse?
I had initially used slot props
to surface the activeDescendant to the consumer. This could have worked but
I learned about
svelte context
to pass a
writable store to
share the parent component state in a reactive wayt to the children (ComboboxRow)
components.