Make the selected pill item a link

All other navigations have their selected item as
a link so we should match this.

Includes changes to the pill CSS so:
1. it doesn't use elements in the selectors
2. all the selectors use BEM

I did 2. because I had to change the
classes/selectors anyway, they might as well match
the style GOVUK Design System uses.

app/assets/stylesheets/components/pill.scss

@@ -2,7 +2,7 @@
 
   display: flex;
 
-  li {
+  &-item__container {
     width: 25%;
     flex-grow: 1;
     text-align: left;
@@ -23,8 +23,8 @@
     display: flex;
   }
 
-  a,
-  &-selected-item {
+  &-item,
+  &-item--selected {
     display: flex; // float causes display: block in browsers without flexbox
     flex-direction: column;
     justify-content: center;
@@ -34,7 +34,7 @@
     padding: 10px 0;
   }
 
-  a {
+  &-item {
     $background: $link-colour;
     background: $background;
     color: $white;
@@ -43,10 +43,6 @@
     text-decoration: none;
     cursor: pointer;
 
-    .pill-label {
-      text-decoration: underline;
-    }
-
     &:link,
     &:visited {
       color: $white;
@@ -62,13 +58,23 @@
     }
   }
 
-  &-selected-item {
+  &-item--selected {
+    background: inherit;
     border: 2px solid $black;
     outline: 1px solid rgba($white, 0.1);
     position: relative;
     z-index: 10;
-    color: $text-colour;
 
+    &:link,
+    &:visited {
+      color: $govuk-text-colour;
+    }
+
+    &:hover {
+      color: govuk-tint($govuk-text-colour, 25%);
+    }
+
+    &:active,
     &:focus {
       z-index: 1000;
       outline: 3px solid $yellow;
@@ -76,8 +82,9 @@
 
   }
 
-  &-label {
+  &-item__label {
 
+    text-decoration: underline;
     // reduce padding until screen is above 420px / zoomed below 300%
     padding-left: govuk-spacing(1);
 
@@ -87,7 +94,7 @@
 
   }
 
-  &-centered-item {
+  &-item--centered {
     text-align: center;
     padding-left: 0;
   }

app/templates/components/pill.html

@@ -9,23 +9,18 @@
   <nav aria-labelledby='page-header'>
     <ul class='pill'>
       {% for label, option, link, count in items %}
+        <li class="pill-item__container">
         {% if current_value == option %}
-          <li>
-            <div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0' aria-current='page'>
+          <a class="pill-item pill-item--selected govuk-link govuk-link--no-visited-state{% if not show_count %} pill-item--centered{% endif %}" href="{{ link }}" aria-current="page">
         {% else %}
-          <li>
-            <a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">
+          <a class="pill-item govuk-link govuk-link--no-visited-state" href="{{ link }}">
         {% endif %}
           {% if show_count %}
-              {{ big_number(count, **big_number_args) }}
+            {{ big_number(count, **big_number_args) }}
           {% endif %}
-              <div class="pill-label{% if not show_count %} pill-centered-item{% endif %}">{{ label }}</div>
-        {% if current_value == option %}
-            </div>
-        {% else %}
-            </a>
-        {% endif %}
-          </li>
+            <div class="pill-item__label{% if current_value == option %} pill-item__label--selected{% endif %}{% if not show_count %} pill-item--centered{% endif %}">{{ label }}</div>
+          </a>
+        </li>
       {% endfor %}
     </ul>
   </nav>