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/views/activity/notifications.html

@@ -2,7 +2,7 @@
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
 {% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_field %}
 
-<div class="ajax-block-container">
+<div class="ajax-block-container" id='pill-selected-item'>
 
   {% if notifications %}
     <div class='dashboard-table'>