Enhancement/accessibility: Keep priority nav dropdown <ul> inside of main <ul>

[adamjohnson]

The Current Markup:

<nav>
  <ul>
    <li><a href="#">menu item 1</a></li>
    <li><a href="#">menu item 2</a></li>
    <li><a href="#">menu item 3</a></li>
    <li><a href="#">menu item 4</a></li>
  </ul>

  <span class="nav__dropdown-wrapper priority-nav__wrapper" aria-haspopup="true">
    <button aria-controls="menu" class="nav__dropdown-toggle priority-nav__dropdown-toggle priority-nav-is-visible" prioritynav-count="2">
      more
    </button>
    <ul aria-hidden="true" class="nav__dropdown priority-nav__dropdown">
      <li><a href="#">menu item 5</a></li>
      <li><a href="#">menu item 6</a></li>
    </ul>
  </span>
</nav>

Proposed markup:

<nav>
  <ul>
    <li><a href="#">menu item 1</a></li>
    <li><a href="#">menu item 2</a></li>
    <li><a href="#">menu item 3</a></li>
    <li><a href="#">menu item 4</a></li>

    <li class="nav__dropdown-wrapper priority-nav__wrapper" aria-haspopup="true"> <!-- Keep new <ul> inside the current <ul> -->
      <button aria-controls="menu" class="nav__dropdown-toggle priority-nav__dropdown-toggle priority-nav-is-visible" prioritynav-count="2">
        more
      </button>
      <ul aria-hidden="true" class="nav__dropdown priority-nav__dropdown"> <!-- Needs id="menu" -->
        <li><a href="#">menu item 5</a></li>
        <li><a href="#">menu item 6</a></li>
      </ul>
    </li>
  </ul>
</nav>

Reasoning:

The Priority+ <ul> is directly related to the parent <ul>. The Priority+ <ul> is effectively a dropdown menu within the parent menu. Because of this, the markup should represent the parent/child relationship. I think this would help accessibility and be a benefit for assistive technology users.