Improve accessibility of Umami's responsive main menu

Problem/Motivation

The responsive menu in Umami has some accessibility problems:

1. The button only does something when JS is enabled. When JS is off, the button is there in markup, but does nothing.
2. Menu links are always in the tabbing order, changing the wrapper's height just hides them visually. A keyboard user will have to tab through these even when the menu is closed. For screen reader users, it defeats the object of the toggle button. For sighted keyboard users, the links are invisible-but-still-operable. This is a failure of WCAG 2.0 SC 2.4.7 Focus Visible.
3. The open closed state of the menu is not conveyed to assistive tech. Screen reader users just know there's a button, not whether the menu is open or closed.
4. Th menu open/close is animated, but some users prefer no motion. We're forming a Drupal core policy around this, see #2928103: [policy, no patch] Use "prefers-reduced-motion" media query to disable animations.
5. The button is outside the navigation landmark. When closed, a screen reader user might search for the navigation landmark region, but find it empty. They should find the button inside the nav landmark region.
6. There are some unnecessary <title> and <desc> elements inside the SVG icon. The accessible name comes from button's own aria-label.

Proposed resolution

1. DEFERRED, NEEDS FOLLOW-UP ISSUE: Remove the button from the Twig template, create it using JS instead
2. DONE: Use display: none or visibility: hidden on the <ul> to remove the links from the tabbing order when the menu is closed.
   • If this is a problem for the animation, do it in two steps. When the menu opens, first remove the display:none, then change the height. Reverse order of these steps when closing.
3. NEEDS WORK: As well as toggling the CSS class for styling, toggle aria-expanded=true|false. This attribute goes on the <button>.
   • The <button> also wants an aria-controls=<IDREF>, pointing to the ID of the <ul> that gets toggled.
4. DONE, NEEDS MANUAL TESTING. Use the new prefers-reduced-motion media query to allow users to turn off animation if their platform allows it (currently just works in Safari).
5. DEFERRED, NEEDS FOLLOW-UP ISSUE: Move the toggle button to just inside the start of <nav>. Note, in the previous github issue this was highlighted as something that could be tricky, because the CSS currently assumes the button is outside the nav.
6. DEFERRED, NEEDS FOLLOW-UP ISSUE: Remove the <title> and <desc> elements from the SVG icon.

Remaining tasks

Update the Umami JS.

User interface changes

No visual changes. Accessibility wins:

1. Conveys the menu open/closed state to assistive tech in a machine readable way.
2. Fixes a failure of WCAG "Focus Visible" for sighted keyboard users
3. Makes the menu button easier to find using landmark navigation in assistive tech.

API changes

None.

Data model changes

None.

Original report

Previously discussed in detail at issue #130 - Improve menu accessibility in the lauriii/umami Github repo.