Merge pull request #3610 from alphagov/fix-pill-tab-problems

Fix pill tab problems

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/folder-path.html

@@ -6,7 +6,7 @@
   link_current_item=False,
   root_element='h1'
 ) %}
-  <{{ root_element }} class="heading-medium folder-heading">
+  <{{ root_element }} class="heading-medium folder-heading"{% if root_element == 'h1' %} id="page-header"{% endif %}>
     {% for folder in folders %}
       {% if loop.last and not link_current_item %}
         {% if folder.template_type or not folder.id %}

app/templates/components/page-header.html

@@ -2,13 +2,14 @@
 
 {% macro page_header(
   h1,
-  back_link=None
+  back_link=None,
+  size='large'
 ) %}
 
   {% if back_link %}
     {{ govukBackLink({ "href": back_link }) }}
   {% endif %}
 
-  <h1 class="heading-large">{{ h1 }}</h1>
+  <h1 class="heading-{{ size }}" id="page-header">{{ h1 }}</h1>
 
 {% endmacro %}

app/templates/components/pill.html

@@ -6,25 +6,22 @@
   big_number_args={'smaller': True},
   show_count=True
 ) %}
-  <ul role='tablist' class='pill'>
-    {% for label, option, link, count in items %}
-      {% if current_value == option %}
-        <li aria-selected='true' role='tab'>
-          <div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0'>
-      {% else %}
-        <li aria-selected='false' role='tab'>
-          <a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">
-      {% endif %}
-        {% if show_count %}
-            {{ big_number(count, **big_number_args) }}
+  <nav aria-labelledby='page-header'>
+    <ul class='pill'>
+      {% for label, option, link, count in items %}
+        <li class="pill-item__container">
+        {% if current_value == option %}
+          <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 %}
+          <a class="pill-item govuk-link govuk-link--no-visited-state" href="{{ link }}">
         {% endif %}
-            <div class="pill-label{% if not show_count %} pill-centered-item{% endif %}">{{ label }}</div>
-      {% if current_value == option %}
-          </div>
-      {% else %}
+          {% if show_count %}
+            {{ big_number(count, **big_number_args) }}
+          {% endif %}
+            <div class="pill-item__label{% if not show_count %} pill-item--centered{% endif %}">{{ label }}</div>
           </a>
-      {% endif %}
         </li>
-    {% endfor %}
-  </ul>
+      {% endfor %}
+    </ul>
+  </nav>
 {% endmacro %}

app/templates/views/dashboard/all-template-statistics.html

@@ -1,3 +1,4 @@
+{% from "components/page-header.html" import page_header %}
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/pill.html" import pill %}
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, spark_bar_field %}
@@ -10,7 +11,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Templates used</h1>
+  {{ page_header("Templates used") }}
 
   <div class="bottom-gutter-3-2">
     {{ pill(

app/templates/views/dashboard/monthly.html

@@ -1,3 +1,4 @@
+{% from "components/page-header.html" import page_header %}
 {% from "components/big-number.html" import big_number_with_status, big_number %}
 {% from "components/pill.html" import pill %}
 {% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading, row_heading %}
@@ -12,9 +13,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
-    Messages sent
-  </h1>
+  {{ page_header('Messages sent') }}
   <div class="bottom-gutter">
     {{ pill(
       items=years,

app/templates/views/notifications.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/ajax-block.html" import ajax_block %}
 {% from "components/message-count-label.html" import message_count_label, recipient_count_label %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/textbox.html" import textbox %}
 {% from "components/form.html" import form_wrapper %}
@@ -23,9 +24,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">
-    {{ page_title }}
-  </h1>
+  {{ page_header(page_title) }}
   {% if not message_type == "letter" %}
 
     {{ ajax_block(

app/templates/views/organisations/organisation/index.html

@@ -1,3 +1,4 @@
+{% from "components/page-header.html" import page_header %}
 {% from "components/big-number.html" import big_number %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/message-count-label.html" import message_count_label %}
@@ -10,9 +11,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-medium">
-    Usage
-  </h1>
+  {{ page_header('Usage', size='medium') }}
 
   <div class="bottom-gutter">
     {{ pill(years, selected_year, big_number_args={'smallest': True}) }}

app/templates/views/templates/choose.html

@@ -4,6 +4,7 @@
 {% from "components/textbox.html" import textbox %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/form.html" import form_wrapper %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 
 {% extends "withnav_template.html" %}
@@ -18,9 +19,7 @@
 
   {% if (not current_service.all_templates) and (not current_service.all_template_folders) %}
 
-    <h1 class="heading-medium">
-      {{ page_title }}
-    </h1>
+     {{ page_header(page_title, size='medium') }}
 
      <p class="govuk-body">
        {% if current_user.has_permissions('manage_templates') %}

app/templates/views/usage.html

@@ -1,6 +1,7 @@
 {% from "components/big-number.html" import big_number %}
 {% from "components/message-count-label.html" import message_count_label %}
 {% from "components/table.html" import list_table, field, hidden_field_heading, row_heading, text_field %}
+{% from "components/page-header.html" import page_header %}
 {% from "components/pill.html" import pill %}
 
 {% extends "withnav_template.html" %}
@@ -11,7 +12,7 @@
 
 {% block maincolumn_content %}
 
-    <h1 class='heading-medium'>Usage</h1>
+    {{ page_header('Usage', size='medium') }}
 
     <div class="bottom-gutter">
       {{ pill(years, selected_year, big_number_args={'smallest': True}) }}