Keyboard Accessible Popovers

General
#1

Hi, perhaps I’m missing something here.

Does anyone know which settings I need to enable in the popover to make it keyboard accessible?

And which keyboard shortcuts to use to navigate through it?

I’m building a Mega-menu with the popover, but I haven’t been able to focus on the popover when the menu item is hovered over.

I checked the documentation, and tried the various trigger settings, but it seems none of them helps change the focus to inside the popover.

I also disabled and enabled the focus options, but it didn’t change the outcome.

What am I missing here? :thinking:

#2

Wondering the same.

You can simply tab through all applicable elements, once the focus is inside the Popover.

#3

Hi Marius, thanks!

The only problem is that I haven’t been able to navigate inside the popovers with the keyboard. I’m sure I’m missing something very obvious here.

#4

So it doesn’t work, even when you focus (click inside the Popover) with a mouse?

The Popover is actually only a simple HTML container.

  • Did you set your Popover as interactive?
  • What blocks, more specifically, which HTML tags does the Popover contain?
#5

Ok, here’s what I did:

Created a Nav similar to what WordPress outputs as navs. Meaning:

<nav>
    <ul>
        <li>
            <a></a>
            <div id="popover"></div>
        </li>
        ...
    </ul>
</nav>

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]

#6

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 :wink:

#7

Hi @zeinnicholas,

Thanks for bringing this up.

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.

1 Like
#8

Thanks @Louis!

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!

#9

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.