studio(a11y): main menu not accessible with keyboard navigation only

[donroyco]

Affected part of DeckDeckGo

• [x] Studio
• [ ] Remote control
• [ ] Documentation
• [ ] Demo
• [ ] Starter kit
• [ ] Poll
• [ ] Web Components
• [ ] Templates

Reproduction

Steps to reproduce:

1. Go to https://deckdeckgo.com/
2. Navigate with tab once (main menu is focused)
3. Press Enter
4. Tab once again

Expected Behavior

Menu items like Home should be focusable.

Actual Behavior

The overlay for Main menu is not focusable. Tabbing through the content continues behind overlay.

The current behaviour in action. (I needed to click once to get focus inside the browser, the rest is done with tab key only)

Environment

• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[peterpeterparker]

It looks like I don't use that much often "tab" ;)

Thx for the issue @donroyco 👍

I link this one with https://github.com/deckgo/deckdeckgo/issues/534, kind of the same idea

[peterpeterparker]

@donroyco just had a quick test. actually, at least in the next version, the items in the menu are accessible through tabs (see gif) but the things is that the menu/popover receive the focus/tabs after the homepage has been tabbed.

any idea how could the focus/tabs could be shifted to give the priority to the opened menu?

[donroyco]

Not sure how this would work in Ionic, I don't see some a11y documentation on ionic-menu . Is there a way to manually focus the sidebar when you know it has been triggered to open?

[peterpeterparker]

@donroyco thx for the feedback! I honestly don't know neither and didn't found anything about it.

Therefore I opened a feature request in the Ionic Core as I could reproduce the exact same behavior with a blank starter kit app https://github.com/ionic-team/ionic/issues/20590

[donroyco]

@peterpeterparker Cool, thanks for pushing it further. I subscribed to the issue. Strange this is not available already in Ionic.

In Angular Material you can check it pretty easily.