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.

1 Like
10

Hi @Marius, apologies I did not see your reply here.

To answer your question, the correct way of doing this is having a separate actual button that triggers the dropdown popover. So when navigating through the menu, it would first highlight the link of the top-level menu item, and if you continue then it would highlight the button that triggers the dropdown popover. This is why I mentioned I should add a button. A blind person would hear:

  1. Link, Name of the menu item;
  2. tab →
  3. Button, open submenu

The problem I found with the popover was my error. @Louis was right. What I missed was a focusable element inside the popover. Once I added a link, I was able to navigate inside it. So it is working right now, and you can use it as a menu builder (although it seems we won’t need it anymore with the new Nav block almost ready :slightly_smiling_face:).

The only problem I see with the popover right now is (in this specific situation):

Assuming the popover has focusable content, you can’t choose if you want to enter the popover or not. Once you tab it will enter the popover, until there is nothing inside it to navigate through, then it will continue to the next focusable element outside the popover.

From an accessibility standpoint this is not good, since the user is forced to navigate inside the popover if there is focusable content inside it.

But then again, the popover main goal was never to be used as a dropdown submenu. I understand now that although it’s accessible ready, it’s not really meant to be used as a toggle dropdown with options to enter (usually with space or enter), or exit (usually with esc).

So all is good. It was my mistake. :wink: