Mark up ‘pill’ component as being tabs

Currently it’s not possible for a screen reader user to know which
financial year they’re looking at. From the accessibility report:

> The financial year links are contained in a navigation region -
> tabbing or arrowing through only reads out the links, not the main
> information of "2016 to 2017 financial year" - that information is
> vital for understanding the page content.

This problem also applies to other pages which use the `pill` component,
which is effectively tabbed navigation (that reloads the page rather
than showing or hiding content on the page).

There are specific ARIA attributes that can be used to mark up a
navigation as being tabbed. This commit:

- adds those attributes
- makes the selected ‘tab’ visible to screenreaders and keyboard
  focusable
- adds a visual focus indicator to the selected tab
- adds `id`s to the parts of the page that are controlled by the tabs so
  that they are labelled as such

This also means changing the pill component from being a `<nav>` to a
`<ul>` because `tablist` is not a valid `role` for a `nav`.

Mostly follows the example here:
http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml

app/assets/stylesheets/components/pill.scss

@@ -2,24 +2,19 @@
 
   display: flex;
 
+  li {
+    width: 25%;
+    flex-grow: 1;
+    text-align: left;
+  }
+
   a,
   span {
     display: block;
-    width: 25%;
-    box-sizing: border-box;
     float: left;
+    box-sizing: border-box;
+    width: 100%;
     padding: 10px;
-    flex-grow: 1;
-    text-align: left;
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-
   }
 
   a {
@@ -56,6 +51,12 @@
     position: relative;
     z-index: 1000;
     color: $text-colour;
+
+    &:focus {
+      z-index: 10;
+      outline: 3px solid $yellow;
+    }
+
   }
 }