Clickable items added in the before-options slot in q-select are not accessible via keyboard

[chrisnruud]

What happened?

I have a q-select with a multitude of options , and a clickable q-item in the before-options - slot that selects ot deselects all the options in the dropdown. When I do my wcag testing, this item is excluded from the navigation on up-down in the selection dropdown, and is not accessible using tab or other combinations (as in q-btn-dropdown)

What did you expect to happen?

when a clickable item is put in the before-options or after-options slot in the q-select component, this item should be accessible using the normal keyboard navigation in the component, or as a last resort, be accessible through tab or another key.

Reproduction URL

https://codepen.io/chrisnruud/pen/WNBqWrp

How to reproduce?

1. Open the codepen
2. expand the selection drop down using whichever method
3. try to reach the clickable item at the top using only the keyboard
4. :(

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Components (quasar), Accessibility [a11y] (quasar)

Platforms/Browsers

Firefox

Quasar info output

NOt using quasar cli

Relevant log output

No response

Additional context

No response

[RamonDonadeu]

After checking the code and "in code" examples, it seems like what you are trying to do is not the expected behavior of "after-options \ before-options"

From Q-Select page:
Template slot for the elements that should be rendered before the list of options.

Here it says, "before THE LIST", not before the other options in the list. Maybe it should be clarified in docs.

And looking at the code, the keydown event just iterates between items in the "option" value. Anyway, why would you need to add an option in "Before-options" slot to act as an option? I imagine it could be something like... "create new option".
In that case, I would just add it to options array and onClick check if the selection option is "create new option" and do the next actions.

It could be an interesting addition to the slots of q-select.

[chrisnruud]

We are using this slot as a "select all/ deselect all" button - option, and if this is not available for keyboard navigation, it brteaks wcag navigation compliance. If this is misuse of this slot I don't know, but this is useful