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/templates/components/pill.html

@@ -1,26 +1,27 @@
 {% from 'components/big-number.html' import big_number %}
 
 {% macro pill(
-  title,
   items=[],
   current_value=None,
   big_number_args={'smaller': True}
 ) %}
-  <nav role='navigation' class='pill' aria-labelledby="pill_{{title}}">
-    <h2 id="pill_{{title}}" class="visuallyhidden">{{title}}</h2>
+  <ul role='tablist' class='pill'>
     {% for label, option, link, count in items %}
       {% if current_value == option %}
-        <span aria-hidden="true">
+        <li aria-selected='true' role='tab'>
+          <span tabindex='0'>
       {% else %}
-        <a href="{{ link }}">
+        <li aria-selected='false' role='tab'>
+          <a href="{{ link }}">
       {% endif %}
-        {{ big_number(count, **big_number_args) }}
-        <div class="pill-label">{{ label }}</div>
+          {{ big_number(count, **big_number_args) }}
+          <div class="pill-label">{{ label }}</div>
       {% if current_value == option %}
-        </span>
+          </span>
       {% else %}
-        </a>
+          </a>
       {% endif %}
+        </li>
     {% endfor %}
-  </nav>
+  </ul>
 {% endmacro %}