Proper Keyboard focus order for dynamic menus

Question

I have a small modal-like pane that appear when a user clicks on or keyboard navigates to special filter input. This pane is full of buttons that indicate how the filter should properly act. While the user can currently keyboard navigate around the pane, if they tab past the close button of the pane, they are sent back to the top of the html document because the pane is rendered at the very button of the page. (See pane below)

How should the pane act on keyboard navigation? I initial though that the focus should be put back to the first item of the pane, but this would cause keyboard users to get permanently stuck in the pane. I also thought about closing the pane, but feel this would be unexpected by the user because they didn't hit the enter or space key to click the button.

Answer 1

Tab is for switching between elements, not selecting different items within the same element.

I think this is why the problem arises.

Your element is similar to a drop-down list. Typically tab would allow you to select that list, but not iterate through the items in the list. Using the same key for both selecting and iterating through a control results in confusing behavior, no matter which option you choose.

I think something like the following makes the most sense:

• Tab lets you select the button.
• Up and down arrow keys let you iterate through the items once the button is selected.
• Pressing tab goes to the next element on the page (or the first element if this was the last one).

Answer 2

You might need ARIA attributes to make your panel behave like a drop-down field (which is essentially what you are simulating with your filter panel).

Alternatively just use a standard html drop-down field instead of a panel (i.e. select & option elements). Why make this more complicated for you or your user? Using a drop-down would mean you get all the accessible features for free.