Accessibility issues with navigation menu

[roelvangils]

Erik and Roel reported back these issues.

1.1.1 Non-text Content

• Issue: the arrows that are used to indicate a closed or opened sub-menu do not have a state or accessible name and fall for many of the fontawesome issues.

1.3.1 Info and Relationships

• Issue: the menu looks like a list of links but isn't presented as such
  Fix: make the menu an <ul> with <li>'s and <a>'s. For example:

• use the reduce-motion query in CSS to prevent it for certain users.

  The mobile menu acts like a modal but does not follow the modal pattern

  The menu can technically be used with a screen reader but the user hears no difference between a normal menu item, or an item that will fold out a sub-menu.

  The <nav> does not need to be inside the <main> as it is navigation for more than just the <main>.

  When navigating, the focus stays on the menu(item). This is unlike normal navigation between webpages and an unusual pattern.

  The menu does not make clear what the current page is. Suggest adding this both visually and with the attribute aria-current.

  You're not using role="menu". This is consistent with other places on the web. Please continue to not use this role.

  "More..."-menu sometimes opens when making window smaller.

[MichaelCastiau]

@TriangleJuice Almost all issues presented here cannot be fixed by simple touchups but would entice a complete rewrite of the component, introducing breaking changes.