Merge pull request #1129 from alphagov/aria-tabs-pill-navigation

Mark up ‘pill’ component as being tabs

app/assets/stylesheets/components/pill.scss

@@ -2,24 +2,19 @@
 
   display: flex;
 
-  a,
+  li {
-  span {
-    display: block;
     width: 25%;
-    box-sizing: border-box;
-    float: left;
-    padding: 10px;
     flex-grow: 1;
     text-align: left;
-
-    &:first-child {
-      margin-left: 0;
-    }
-
-    &:last-child {
-      margin-right: 0;
   }
 
+  a,
+  &-selected-item {
+    display: block;
+    float: left;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 10px;
   }
 
   a {
@@ -50,12 +45,18 @@
     }
   }
 
-  span {
+  &-selected-item {
     border: 2px solid $black;
     outline: 1px solid rgba($white, 0.1);
     position: relative;
     z-index: 1000;
     color: $text-colour;
+
+    &:focus {
+      z-index: 10;
+      outline: 3px solid $yellow;
+    }
+
   }
 }
 

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}}">
+  <ul role='tablist' class='pill'>
-    <h2 id="pill_{{title}}" class="visuallyhidden">{{title}}</h2>
     {% for label, option, link, count in items %}
       {% if current_value == option %}
-        <span aria-hidden="true">
+        <li aria-selected='true' role='tab'>
+          <div class='pill-selected-item' tabindex='0'>
       {% else %}
+        <li aria-selected='false' role='tab'>
           <a href="{{ link }}">
       {% endif %}
             {{ big_number(count, **big_number_args) }}
             <div class="pill-label">{{ label }}</div>
       {% if current_value == option %}
-        </span>
+          </div>
       {% else %}
           </a>
       {% endif %}
+        </li>
     {% endfor %}
-  </nav>
+  </ul>
 {% endmacro %}

app/templates/components/table.html

@@ -61,19 +61,19 @@
     {% set border = '' if border else 'table-field-noborder' %}
 
     <td class="{{ [field_alignment, border]|join(' ') }}">
-      <span class="{{ 'table-field-status-' + status if status }}">{{ caller() }}</span>
+      <div class="{{ 'table-field-status-' + status if status }}">{{ caller() }}</div>
     </td>
 {%- endmacro %}
 
 {% macro row_heading() -%}
   <th class="table-field">
-    <span>{{ caller() }}</span>
+    {{ caller() }}
   </th>
 {%- endmacro %}
 
 {% macro index_field(text) -%}
   <td class="table-field-index">
-    <span><span class="visually-hidden">Row </span>{{ text }}</span>
+    <span class="visually-hidden">Row </span>{{ text }}
   </td>
 {%- endmacro %}
 

app/templates/partials/jobs/count.html

@@ -1,5 +1,5 @@
 {% from "components/pill.html" import pill %}
 
 <div class="bottom-gutter ajax-block-container">
-  {{ pill('Status', counts, request.args.get('status', '')) }}
+  {{ pill(counts, request.args.get('status', '')) }}
 </div>

app/templates/partials/jobs/notifications.html

@@ -1,7 +1,7 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
 {% from "components/page-footer.html" import page_footer %}
 
-<div class="ajax-block-container">
+<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
   {% if job.job_status == 'scheduled' %}
 
     <p>

app/templates/views/activity/counts.html

@@ -2,7 +2,6 @@
 
 <div class='bottom-gutter ajax-block-container'>
   {{ pill(
-    'Status',
     status_filters,
     status
   ) }}

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'>

app/templates/views/dashboard/monthly.html

@@ -18,14 +18,13 @@
   </h1>
   <div class="bottom-gutter">
     {{ pill(
-      'financial year',
       items=years,
       current_value=selected_year,
       big_number_args={'smallest': True},
     ) }}
   </div>
   {% if months %}
-    <div class="body-copy-table">
+    <div class="body-copy-table" id='pill-selected-item'>
       {% call(month, row_index) list_table(
         months,
         caption="Total spend",

app/templates/views/usage.html

@@ -13,9 +13,9 @@
     <h2 class='heading-large'>Usage</h2>
 
     <div class="bottom-gutter">
-      {{ pill('Year', years, selected_year, big_number_args={'smallest': True}) }}
+      {{ pill(years, selected_year, big_number_args={'smallest': True}) }}
     </div>
-
+    <div id='pill-selected-item'>
       <div class='grid-row'>
         <div class='column-half'>
           <h2 class='heading-small'>Emails</h2>
@@ -97,6 +97,7 @@
           {% endcall %}
         </div>
       {% endif %}
+    </div>
 
     <div class="grid-row">
       <div class="column-half">

tests/app/main/views/test_dashboard.py

@@ -250,11 +250,11 @@ def test_usage_page(
     page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
 
     cols = page.find_all('div', {'class': 'column-half'})
-    nav = page.find('nav', {'class': 'pill'})
+    nav = page.find('ul', {'class': 'pill', 'role': 'tablist'})
     nav_links = nav.find_all('a')
 
     assert normalize_spaces(nav_links[0].text) == '2010 to 2011 financial year'
-    assert normalize_spaces(nav.find('span').text) == '2011 to 2012 financial year'
+    assert normalize_spaces(nav.find('li', {'aria-selected': 'true'}).text) == '2011 to 2012 financial year'
     assert normalize_spaces(nav_links[1].text) == '2012 to 2013 financial year'
 
     assert '123' in cols[0].text