search

adobe-accessibility / Accessible-Mega-Menu

A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin.
Apache License 2.0
605 stars 199 forks source link

Can't use top level links? #64

Open chrisvwlc opened 4 years ago

chrisvwlc commented 4 years ago

Hi. It seems that top level links without dropdowns won't work. For example, the following will not work:

<ul class="nav-menu js-nav-menu" id="accessible-megamenu-1578670430615-1">
    <li class="nav-item has-dropdown">
        <a href="#" id="accessible-megamenu-1578670430627-2" role="button" aria-controls="accessible-megamenu-1578670430627-3" aria-expanded="false" tabindex="0" class="">About</a>
        <div class="sub-nav" id="accessible-megamenu-1578670430627-3" role="region" aria-expanded="false" aria-hidden="true" aria-labelledby="accessible-megamenu-1578670430627-2">
            <ul>
                <li><a href="about.php">About Us</a></li>
                <li><a href="services.php">Services</a></li>
            </ul>
        </div>
    </li>
    <li class="nav-item">
        <a href="contacts.php">Contact Lenses</a>
    </li>

Where if I change the second link to:

      <a href="#" id="" role="button" aria-controls="" aria-expanded="false" tabindex="0">Contacts</a>
      <div class="sub-nav" role="region" aria-expanded="false" aria-hidden="true">
        <a href="contacts.php">Contact Lenses</a>
      </div>

It will? How should I handle top level links without sub-navs? For example, social media icons?

maedi commented 4 years ago

The Accessibility Fork will likely fix your problem: https://github.com/morpht/Accessible-Mega-Menu/tree/accessibility

Which has also been made into a pull request: #66

maedi commented 3 years ago

Fork merged. Can be closed.