Focus CSS state not being applied

[what-is-a-crow]

Our components generally have two visual states- hover and focus (:focus-visible) to differentiate between pointer / mouse and keyboard interactions. According to #132, I should be able to leverage these states via CSS to style list items (currently grappling with Listbox) but I'm not seeing :focus nor :focus-visible states on those items. I can leverage the active prop but, as the other person complained about a couple of years ago, it is true for both hover and focus.

I suspected that our setup, which uses detached DOM via floating-ui, was the culprit but I pulled up simpler sandbox examples and also observed a lack of aforementioned pseudo-classes. Am I doing something wrong?

[RobinMalfait]

Hey! Thank you for your question!
Much appreciated! 🙏

You are not doing anything wrong. Currently the Menu.Item, Listbox.Option and Combobox.Option component do not receive any focus at all, the focus stays on the Menu.Items, Listbox.Options and Combobox.Input components respectively.

This is because we are using the "activedescendant" strategy right now instead of the "roving tab index" strategy.

I don't think we will change this behaviour any time soon, which means that you won't be able to differentiate between mouse/keyboard (it's also why we combined both into the same active exposed state).

While I can see the use case (e.g.: showing a focus ring), how would you handle a Combobox where the Combobox.Input is always the focused element? In that case you don't have :focus or :focus-visible styles.

Do you have an example or can you share your use case on what you want to do differently if you are using a mouse vs a keyboard?

[what-is-a-crow]

Thank you for your response!

The Combobox scenario is interesting. Focus is effectively bifurcated between the input and the items, isn't it? A user types a character into the input, presses the down key to navigate through the items, then types again to enter additional characters... that's a complexity that I had not considered previously.

Our use case is that keyboard navigation (:focus-visible) has a very specific style universally (a dashed, yellow outline) that should never be triggered by a mouse event. Hovering and focusing via mouse events will yield a different style (typically a soft background color). It's worth calling out that we are able to get almost all the way there with the Listbox by adding the yellow outline when active is true for an item, with a strong override of that outline on hover; however, when the Listbox.Options is made visible with a selected state, it will render the selected item with the active state, so the mouse will not be there to override.

(It's worth calling out that having an option to disable automatically marking selected items as active on open would fix this for us, but I would guess that doing so would break some rules of accessibility.)

[mkallies]

@RobinMalfait Is this the same for the Tab component? I'm experiencing something similar with wanting to differentiate between mouse and keyboard interactions. It seems mouse clicks also trigger :focus-visible.

[snax4a]

Unfortunately mouse interactions on the popover button trigger :focus-visible, also when we click outside the popover panel the button gets focused while it should have :focus-visible state only on keyboard interactions

[joggienl]

I noticed with the Tab and Popover component that using :focus-visible on the button that triggers the component, it also "triggers" the focus state thus ignoring the fact that I would like to have a keyboard only focus.

Is this related to the same thing?

I get that for elements that can accept input, it is not a bad idea (like the Combobox for example).

Is there a way around this? I use keyboard-only focus for practically all button and a elements. Have a couple of elements with Tab and Popover components using focus, it feels kinda off.

[snax4a]

I replaced all focus states on my website with focus-visible
but same as @joggienl currently focus-visible does not work on Popover component because this is internally calling focus on the Popover.Button on close.

As I see this button focus can be overwritten by passing ref to the close render prop but I am not using close handler i am closing it by clicking outside so I'm not able to achieve that.