Menus

[brettsmason]

The current Alpine menu JS and walker needs to be revised. I suggest we audit exactly what we would like to acomplish here and revisit it. Possibly with input from the designers too.

[brettsmason]

An excellent example of a fully accessible mega menu by Adobe: https://adobe-accessibility.github.io/Accessible-Mega-Menu/

This should probably be the benchmark we try and follow.

[brettsmason]

Suggested spec

Markup

<nav id="menu-primary" class="menu-primary" aria-label="Primary Menu">
    <button id="menu-primary-toggle" class="menu-primary__toggle" aria-controls="menu-primary-items" aria-expanded="false">
        Menu
    </button>

    <ul class="menu-primary__items">
        <li class="menu-primary__item menu-primary__item--depth-0 menu-primary__item--current menu-primary__item--parent menu-primary__item--ancestor menu-primary__item--has-children">
            <button class="menu-primary__link menu-primary__link--depth-0 menu-primary__link--current" >Menu item</button>

            <ul class="menu-primary__sub-menu menu-primary__sub-menu--depth-0">
                <li class="menu-primary__item menu-primary__item--depth-1">
                    <a href="#" class="menu-primary__link menu-primary__link--depth-1 menu-primary__link--current">Submenu item</a>
                </li>
                <li class="menu-primary__item menu-primary__item--depth-1">
                    <a href="#" class="menu-primary__link menu-primary__link--depth-1 menu-primary__link--current">Submenu item</a>
                </li>
            </ul>
        </li>
        <li class="menu-primary__item menu-primary__item--depth-0">
            <a href="#" class="menu-primary__link menu-primary__link--depth-0">Menu item</a>
        </li>
        <li class="menu-primary__item menu-primary__item--depth-0">
            <a href="#" class="menu-primary__link menu-primary__link--depth-0">Menu item</a>
        </li>
    </ul>
</nav>

Keyboard Navigation

When on a top-level menu item

tab: Select the next focusable element outside of the menu. shift + tab: Select the previous focusable element outside of the menu. right: Select the next top-level menu item. left: Select the previous top-level menu item. Enter/space/down: Open the submenu, select first submenu item. up: Open the submenu, select last submenu item. esc: Leave the menu.

When on a submenu-level item

tab: Close the submenu, select the next focusable element outside of the menu. shift + tab: Close the submenu, select the previous focusable element outside of the menu. right: Close the submenu, select the first item of the next top-level menu item. left: Close the submenu, select the first item of the previous top-level menu item. down: Select next submenu item. up: Select previous submenu item. esc: Close the submenu, select the current top-level menu item.

[brettsmason]

Now using the navigation block.