Improve mobile menu

[yatil]

Follow on from #68.

[Malvoz]

At line 10 in mainnav.css you have:

@media (min-width: 35em) {
  .mainnav {
      display: block;
  }
}

And because the .mainnav is visible at 35em, you would probably want to hide the menu button since it then has no functionality:

@media (min-width: 35em) {
  #openmenu { 
      display: none; 
  }
}

---

Also aria-expanded is always false for <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"> which isn't ideal.

[yatil]

@Malvoz Thanks for the report.

• I agree that we can hide the button on the home page, but not on the sub-pages (because the button also toggles the sub-pages) – Maybe we need two buttons.
• the ARIA-expanded issue is embarrassing, good catch! :-)

[Malvoz]

@yatil

I agree that we can hide the button on the home page

@media (min-width: 35em) {
  .page-home #openmenu { 
      display: none; 
  }
}

Edit: But as you stated you might need 2 buttons, to conform to Success Criterion 3.2.3: https://www.w3.org/TR/WCAG21/#consistent-navigation

Not sure what conformance levels you are looking for at the WAI website, if it is in your docs I haven't read them yet, oops..

[yatil]

@Malvoz We go for AAA wherever we can, but AA is our baseline. In this case, I think a button that does nothing is worse than the slight inconsistency caused by removing it. I’m removing it until I have a better menu solution.