When you hover over the ‘li.menu-item a’, the popover is triggered.
I followed the popover docs to do this.
My concern is not with the mouse, but with keyboard navigation for accessibility purposes. I couldn’t find a way to use the keyboard to navigate from the menu-item link to inside the popover. Pressing the usual keys (enter, space, arrow down, tab) did not made any difference.
Everything is working as intended with the popover, it gets triggered correctly, and you can use it for sub-menus or rich content with the mouse.
[Edit: Sorry, I have no electricity right now because it’s pouring rain here and a tree fell over the power line nearby. It’s very difficult to write code on mobile, especially when the 4G connection keeps falling off as well]
Thanks for elaborating @zeinnicholas.
Just wanted to make sure everything, except the focus issue, works as intended.
So, there is either a bug which prevents the user from accessing the Popover via keyboard when the hover trigger option is used.
Or - and this is my guess - it isn’t supported (yet).
I can’t see any error on your side, I haven’t been able to achieve that either.
It should be focusable in an expected way and also provide an option to disable focus, like there is with the click trigger option.
Edit:
No worries, conserve your battery for more important things
The Popover block is meant for a wide variety of uses, and this is definitely something that could have an option included, that is → making the trigger block focusable.
Our assumption here is that you are using an already focusable element as a trigger → <a> or <button>.
In the case you are not, and while we figure out a possible way to do this automatically, you can simply add a tabindex attribute with a 0 value to your trigger element.
I think I found what I’m doing wrong. There should be a separate button to trigger the popover instead of using the same menu link (an anchor with href of an internal page) to trigger it.
I’ll definitely try it out and let you know as soon as I can!
While this is a pure (and wise) UI decision, how is this connected to your initial issue you raised?
How does moving the hover popover trigger from a menu item to a dedicated focusable element make you access the popover(s’ focusable blocks) with your keyboard?
Can’t see the difference here, but I might miss your actual point.
Just compare how the click trigger works.
You also can observe, when manually setting focus on your popover with a mouse click, that cycling through the focusable elements won’t lock you inside the popover, like it is the (correct) behaviour when using the click trigger.
It will focus on the next available element outside the popover, instead of switching to the popovers’ first item.
In case I’m on the wrong track, I’d appreciate if someone will enlighten me.
Just looking for an answer here as well.