Accessibility related sidebar refinements

[mansona]

This is a follow on issue to #23 that aims to list of of the things necessary to get the sidebar ready for release 👍

• Make sure everything is accessible on mobile (on desktop this component does nothing, it is just a nav)
• Implement proper design for the header of the overlay moved to Design related sidebar refinements #47
• decide on a closing animation moved to Design related sidebar refinements #47

[nickschot]

As I can't edit the above here's a list of accessibility points:

• move focus to the <nav> container when it is opened (preferably without tab index)
• add aria-expanded to the nav
• remove title from toggle sidebar/close button
• add aria-hidden=true to the SVGs
• remove role=complementary from nav element
• remove the second header - only use one header per site
• add aria-label to the nav elements
  • e.g. header → "Primary site navigation"
  • e.g. sidebar → "Sidebar content navigation"

[nickschot]

Focus already seems to automatically be on the sidebar when opened (first tab selects top most focusable item in the sidebar). Is this good enough? Do we want actual focus trapping? Implementing that is slightly more involved as it has to be disabled for non-mobile.

[nickschot]

We'll have to add the "Primary site navigation" aria-label in styleguide itself.