There has been several issues where users have requested multi-level dropdown menu. I know there already is a branch for it but I wanted to see if I could pull something together. So here we go.
Here is my branch for more accessible multi-level dropdown navigation. The main point is trying to make the menu more accessible.
I forked the master branch because I wanted to start with clean table. You can compare two branches to get the idea.
You can see the live demo in my Github page.
There are some new options and the most important one is enableDropdown. If we doesn't set this to true basically nothing happens.
Let's highlight some other differences.
Keyboard user use Tab or Shift + Tab to navigate in sites. We can add focus class on navigation elements when menu item link is focused or blurred. toggleFocus function is from _s starter theme.
After that we just add the same styles on .focus as in :hover.
Voilà, we can now tab trough the navigation using keyboard and we get the same effect as people using mouse (hover effect).
In my opinion buttons should be used when toggling menu and sub menus, not link <a href="">Button</a> That'll ensure native keyboard accessibility and interaction with a screen readers.
I also removed the hamburger menu and just left the text in the button: Open menu or Close menu. That's always up to developer but there seems to be lot's of studies that hamburger menu doesn't always work.
For sub menu buttons I added screen-reader-text class and the label is changing when toggling.
There are some other details, for example using more aria states for better accessibility. But that's not an issue 😄 .
Any feedback is more than welcome! I totally understand if this is not your cup of tea. But if you want to merge this idea in your repo let me know.
If someone wants to test out my branch of accessible multi level dropdown menu, here is my fork for it. I'll consider it as alpha/beta release.
I've just ran a basic test of your branch in latest versions of Firefox/Dev (Mac/PC), Chrome (Mac/PC), Opera (Mac/PC), Safari (Mac OS/iOS - iPhone 5) Edge, IE11/10/9 and have not found any issues.
Lovely to see that all links/URLs are still accessible sans-JS too. :)
Thanks for testing!