Skip to content

Drilldown Sub-Menus won't let you Tab/Shift Tab out of Sub-Menu #11641

@ntdonley

Description

@ntdonley

What should happen?

While in the submenu of a drilldown menu you should be able to shift-tab or tab to items below or above the menu items.

You should also be able to tab/shift-tab to an already open submenu.

What happens instead?

Right now you get stuck inside the submenu when you navigate to it via the keyboard keys.

If you try to tab to an already open submenu it won't let you get to it as well.

Possible Solution

In the drilldown.js file you are setting what the keyboard keys should do:

Keyboard.register('Drilldown', {
  'ENTER': 'open',
  'SPACE': 'open',
  'ARROW_RIGHT': 'next',
  'ARROW_UP': 'up',
  'ARROW_DOWN': 'down',
  'ARROW_LEFT': 'previous',
  'ESCAPE': 'close',
  'TAB': 'down',
  'SHIFT_TAB': 'up'
});

I would strongly recommend removing the tab/shift tab lines. This will let the default action for those keys still do what you want it today without manually setting them.

For being able to tab into the submenu I would recommend setting the whole ul to visibility:hidden and having a visibility: visible on the is-active drilldown allowing for the correct tabing/shifting keyboard commands to work correctly.

Test Case and/or Steps to Reproduce (for bugs)

Test Case:
https://codepen.io/ndonley/pen/YdEOzb

How to reproduce:

  1. Open the sub menu for the drilldown with the keyboard
  2. Try to tab above or below the drilldown submenu
  3. Try using the keyboard to tab into the open drilldown submenu

Can also be tested on any of the drilldowns on Foundation 6 page.
https://foundation.zurb.com/sites/docs/drilldown-menu.html

Context

So it looks like this was brought up before in:
#9597
Looks like you tried to fix it but seems to still be an issue. The main reason this is an issue is for accessibility. The user needs to be able to navigate all menus with only their keyboard. As of right now they get stuck with the keyboard alone. I would recommend not changing the native command keys since this seems to cause an issue.

I am currently using 6.5.1

Checklist

  • I have read and follow the CONTRIBUTING.md document.
  • There are no other issues similar to this one.
  • The issue title and template are correctly filled.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions