Accessibility: Tab to items (observations)

[niemyjski]

1. Shouldn't command items be tabbed by default for accessibility? You can only use keyboard shortcuts when on them, but how would someone know that?
2. If you are in a command input tab seems broken to get navigate anywhere (see https://www.shadcn-svelte.com/examples/tasks any of the facets, but it is working on this page so might be an issue downstream)
3. Navigation issues for each item if you don't use a focusable element (see tasks shadcn example with checkboxes)
4. If you hit space to select an item it types in the command bar, which I get it might be an os specific thing but I've always used enter or spacebar to select items.

[huntabyte]

To answer your points:

1. Command items should not be tabbed, you navigate Combobox menus with arrow keys. ref: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
2. The reason you can't navigate anywhere when the combobox is open is that we apply a focus trap that keeps focus within the popover until it is closed either by clicking outside or pressing the escape key.
3. I'm not sure what you're referring to on this one. I can navigate through the list with arrow keys just fine.
4. Pressing Space to select items is not acceptable behavior for a Combobox. Space is a valid character that could be typed to further filter. Only Enter selects the items.

[niemyjski]

3. I'm doing what you were doing in your status tasks facet dropdown for checkboxes but nothing is selectable. I'll try to see if updating it to be closer to your updated sample fixes it.

                            <Command.Item id={option.value} value={option.value} onSelect={() => onValueSelected(option.value)}>
                                <div
                                    class={cn(
                                        'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
                                        $updatedValues.includes(option.value) ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible'
                                    )}
                                >
                                    <IconCheck className={cn('h-4 w-4')} />
                                </div>
                                <span>
                                    {option.label}
                                </span>
                            </Command.Item>

[huntabyte]

If you can link a minimal repro I'm happy to take a look as well to see what's causing the issue. It may be an ordering issue of the components or something!

[niemyjski]

Yes, I'll work on a sample. We've just had massive power outages the past 2 days.

[niemyjski]

@huntabyte thanks for your patience, I've created a sample here. Just run npm install and npm run dev

https://github.com/exceptionless/exceptionless-svelte-shadcn-cmdk-sv-repo

On a side note what is the best way to be more productive for team/community to reproduce issues and hopefully bring these into the test suite? Should we fork the project and create a pr with maybe story book or tests or would a template repo where everything is configured and we just fork be easier for you in the future?

[pczern]

3. also doesn't work for me, sometimes it navigates 1 item with up/down keys and then it stops, it also doesn't hover anymore then. I am using Svelte 5 Preview.