I'm working on a project where there is a requirement for accessibility. I'm trying to test out multi level and responsive horizontal menus like below:
https://foundation.zurb.com/building-blocks/blocks/foundation-5-top-bar.html
Functionality seems to be fine for accessibility except for one issue. The only way to open a submenu by keyboard is to hit the Enter key on the link, which prevents the default function of opening a page. Instead I need to use a toggle button next to the link to open the submenus (similar to the function of a hamburger menu button).
Can Foundation be customized to include a toggle for each submenu? Like if I could remove the toggle function from the link and applied it to a button?
That is true, you can use the arrow keys to go through all of the submenus. But the problem is the function that opens the submenus disables the link, so the page cannot be accessed by clicking Enter on the link. (Try filling the menu with links and clicking through them)
This is my solution for now: the accordion menu: https://foundation.zurb.com/sites/docs/accordion-menu.html#submenu-toggle
The accordion menu adds a toggle button, but it doesn't close the menu on blur/focusout. It also doesn't have hover support but I can add that in CSS: li.is-accordion-submenu-parent:hover > ul { display: block !important }
I'll also have to make it look like a horizontal menu again, I'll use this as a workaround for now. It allows keyboard, click, and touch access.