A11y - Update header semantics

[bacitracin]

Describe the task

The nav could use some semantic updates that will help screenreader users + keyboard navigation. Individual details under acceptance criteria.

Change from

<nav>
  <header>
    <ul>
      <div><a><img/><a></div>
    </ul>
    <ul>
      <li><a><button /></a>
    </ul>
  </header>
</nav>

to

<header>
  <div><a><img /></a></div>
  <nav aria-label="primary">
    <ul>
      <li><a /></li>
    </ul>
  </nav>
</header>

Screenshot A11y annotation


Acceptance Criteria

• [ ] Swap header and nav order. Nav inside of header
• [ ] Remove the list that wraps the logo. Lists can't have children that aren't list items and it reads oddly to screenreaders.
• [ ] Add an aria-label of "primary" to the nav tag.
• [ ] fixed by #388 ~Remove the button nesting within the <a> tag. It's not valid HTML and also it messes with keyboard navigation. For example, you can TAB to the link element because of the tabIndex that was added to the <a>, but because buttons are considered interactive elements, you can TAB to the button within the link as well. BUT the button can't be activated at all by pressing ENTER or SPACE (expected behavior). If this change to remove the button is a problem for some reason, you could get rid of the <a> and only do the button if you add role="link" to it but the first way is best if you can swing it.~

[bacitracin]

@markgoetz Heads up https://github.com/CodeForPhilly/vacant-lots-proj/issues/344 is in review, may or may not overlap with this ticket, haven't reviewed it yet. Tagged you as a reviewer on the PR https://github.com/CodeForPhilly/vacant-lots-proj/pull/388

[marvieqa]

Touch-based with @markgoetz, and this ticket is good to go back into circulation.

[Amberroseweeks]

Hello, @Moylena i'd like to be assigned this issue. I think we can resolve the semantic order by using the NEXT UI as property and rename the HTML tag and then achieve the correct heading structure.

[Moylena]

@Amberroseweeks assigned!

[nlebovits]

closed by #531, #539