Move #top anchor to before the skip link

The ‘back to top’ link takes users to the #top anchor point, which is currently before the navigation but after the ‘skip to main content’ link.

This means you can no longer skip past the navs etc (as per WCAG 2.1 2.4.1 Bypass Blocks [1]) unless you know to press shift + tab to go backwards in the tab order.

Insetead, we want the 'back to top' link to take the user to the very top of the page, so that the next tab will take them to ‘Skip to main content’ (or the cookie banner, if it’s not been dismissed).

We also considered taking the user to the start of `#main` [2], bypassing all of the navigation, but opted instead to move the `#top` anchor to be the very first thing because:

1. The back to top link was introduced in #687, when we moved from the side navigation and the main content being fixed, independently scrollable panes. This change meant that the side navigation no longer remained within the viewport.

It seems that the intent at the time was that the back to top link would bring the side navigation back into view, rather than providing a convenient way for the user to get back to the top of the main content.

2. Linking to #main makes it harder for users who have to get back to the navigation:

> If you're using a screen reader you could jump between landmarks using hot keys, but if you're just using a keyboard you're kinda just left with the tab key. Maybe I'm missing something, but the only options I could see to get back to the nav would be:
>
> - use TAB to go all the way through the content and footer content until you eventually get back to the top of the page
> - use back to top to get to the top of the main, and then use SHIFT+TAB to reverse through the nav menu
> - refresh the page and use TAB

3. We think users would expect to see the header when using the ‘Back to top’ link, especially if they were aiming for the navigation.

[1]: https://www.w3.org/TR/WCAG21/#bypass-blocks
[2]: #1561 (comment)

Closes #1561

__tests__/accessiblity_audit.test.js

@@ -14,6 +14,7 @@ async function audit (page) {
  .include('body')
  .exclude('#app-site-search__input') // axe reports there is "no label associated with the text field", when there is one.
  .exclude('.app-phase-banner') // axe reports that the phase banner is not inside a landmark, which is intentional.
+ .exclude('.app-back-to-top__link') // axe gets confused by our use of #top without top being defined in the doc
 
  const results = await axe.analyze()
 

views/layouts/_generic.njk

@@ -24,6 +24,7 @@
 {% endblock %}
 
 {% block bodyStart %}
+ <a id="top"></a>
  <!--[if gte IE 9]><!-->
  {% include "_cookie-banner.njk" %}
  <!--<![endif]-->
@@ -33,7 +34,7 @@
 {% block header %}{% endblock %}
 
 {% block main %}
-<div class="app-pane {% block appPaneClasses %}{% endblock %}" id="top">
+<div class="app-pane {% block appPaneClasses %}{% endblock %}">
  {% include "_header.njk" %}
  {% include "_navigation.njk" %}
  {% include "_banner.njk" %}