From 9598d3a97bea1bb6f8786443000e5e0b4d0de340 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 3 Sep 2020 16:05:08 +0100
Subject: [PATCH] Change pills from tabs to navigation

Changes the HTML to do the following:
- remove all tabs semantics
- give the list a role of navigation
- label the navigation with the h1
- mark the selected item with aria-current
---
 app/templates/components/pill.html | 42 ++++++++++++++++--------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/app/templates/components/pill.html b/app/templates/components/pill.html
index d6a416522..6a631dadd 100644
--- a/app/templates/components/pill.html
+++ b/app/templates/components/pill.html
@@ -6,25 +6,27 @@
   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 %}
+        {% if current_value == option %}
+          <li>
+            <div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0' aria-current='page'>
+        {% else %}
+          <li>
+            <a class="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 %}
-          </a>
-      {% endif %}
-        </li>
-    {% endfor %}
-  </ul>
+          {% if show_count %}
+              {{ 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>
+      {% endfor %}
+    </ul>
+  </nav>
 {% endmacro %}