Merge branch 'master' into strong-2fa-security

app/assets/stylesheets/app.scss

@@ -249,3 +249,7 @@ details .arrow {
 .block-label input[disabled] {
   opacity: 0.5;
 }
+
+#content.override-elements-content {
+  padding-bottom: 0;
+}

app/assets/stylesheets/components/pill.scss

@@ -2,24 +2,19 @@
 
   display: flex;
 
-  a,
-  span {
-    display: block;
+  li {
     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/assets/stylesheets/views/dashboard.scss

@@ -32,6 +32,7 @@
   margin-bottom: $gutter-half;
   height: $gutter-half;
   color: $text-colour;
+  text-align: left;
 
   span {
     box-sizing: border-box;

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}}">
-    <h2 id="pill_{{title}}" class="visuallyhidden">{{title}}</h2>
+  <ul role='tablist' class='pill'>
     {% 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 %}
-        <a href="{{ link }}">
+        <li aria-selected='false' role='tab'>
+          <a href="{{ link }}">
       {% endif %}
-        {{ big_number(count, **big_number_args) }}
-        <div class="pill-label">{{ label }}</div>
+            {{ big_number(count, **big_number_args) }}
+            <div class="pill-label">{{ label }}</div>
       {% if current_value == option %}
-        </span>
+          </div>
       {% else %}
-        </a>
+          </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/dashboard/template-statistics.html

@@ -24,8 +24,8 @@
         </span>
       </span>
     {% endcall %}
-    {% call field() %}
-      {% if template_statistics|length > 1 %}
+    {% if template_statistics|length > 1 %}
+      {% call field(align='right') %}
         <span id='{{item.template_id}}' class="spark-bar">
           <span style="width: {{ item.count / most_used_template_count * 100 }}%">
             {{ big_number(
@@ -34,14 +34,16 @@
             ) }}
           </span>
         </span>
-      {% else %}
+      {% endcall %}
+    {% else %}
+      {% call field() %}
         <span id='{{item.template_id}}' class="heading-small">
           {{ big_number(
             item.count,
             smallest=True
           ) }}
         </span>
-      {% endif %}
-    {% endcall %}
+      {% endcall %}
+    {% endif %}
   {% endcall %}
 </div>

app/templates/views/signedout.html

@@ -10,8 +10,8 @@
 
 {% block maincolumn_content %}
 
-  <div class="product-page-intro" id="main">
-    <div class="product-page-intro-wrapper">
+  <div class="product-page-intro">
+    <div class="product-page-intro-wrapper override-elements-content" id="content">
       <nav class="breadcrumbs breadcrumbs--inverse" aria-label="Breadcrumbs">
        <ol itemscope itemtype="http://schema.org/BreadcrumbList">
          <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

app/templates/views/usage.html

@@ -13,91 +13,92 @@
     <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 class='grid-row'>
-      <div class='column-half'>
-        <h2 class='heading-small'>Emails</h2>
-        <div class="keyline-block">
-          {{ big_number(emails_sent, 'sent', smaller=True) }}
-          {{ big_number("Unlimited", 'free allowance', smaller=True) }}
+    <div id='pill-selected-item'>
+      <div class='grid-row'>
+        <div class='column-half'>
+          <h2 class='heading-small'>Emails</h2>
+          <div class="keyline-block">
+            {{ big_number(emails_sent, 'sent', smaller=True) }}
+            {{ big_number("Unlimited", 'free allowance', smaller=True) }}
+          </div>
+        </div>
+        <div class='column-half'>
+          <h2 class='heading-small'>Text messages</h2>
+          <div class="keyline-block">
+            {{ big_number(sms_sent, 'sent', smaller=True) }}
+            {{ big_number(sms_free_allowance, 'free allowance', smaller=True) }}
+            {{ big_number(sms_allowance_remaining, 'free allowance remaining', smaller=True) }}
+            {% if sms_chargeable %}
+              {{ big_number(
+                sms_chargeable,
+                'at {:.2f} pence per message'.format(sms_rate * 100),
+                smaller=True
+              ) }}
+            {% endif %}
+          </div>
         </div>
       </div>
-      <div class='column-half'>
-        <h2 class='heading-small'>Text messages</h2>
-        <div class="keyline-block">
-          {{ big_number(sms_sent, 'sent', smaller=True) }}
-          {{ big_number(sms_free_allowance, 'free allowance', smaller=True) }}
-          {{ big_number(sms_allowance_remaining, 'free allowance remaining', smaller=True) }}
-          {% if sms_chargeable %}
+
+      <div class='grid-row'>
+        <div class='column-half'>
+          <div class="keyline-block">
+            &nbsp;
+          </div>
+        </div>
+        <div class='column-half'>
+          <div class="keyline-block">
             {{ big_number(
-              sms_chargeable,
-              'at {:.2f} pence per message'.format(sms_rate * 100),
+              (sms_chargeable * sms_rate),
+              'spent',
+              currency="£",
               smaller=True
             ) }}
-          {% endif %}
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class='grid-row'>
-      <div class='column-half'>
-        <div class="keyline-block">
-          &nbsp;
+      {% if months %}
+        <div class="dashboard-table body-copy-table">
+          {% call(month, row_index) list_table(
+            months,
+            caption="Total spend",
+            caption_visible=False,
+            empty_message='',
+            field_headings=[
+              'By month',
+              hidden_field_heading('Cost'),
+            ],
+            field_headings_visible=True
+          ) %}
+            {% call row_heading() %}
+              {{ month.name }}
+            {% endcall %}
+            {% call field(align='left') %}
+              {{ big_number(
+                sms_rate * month.paid,
+                currency="£",
+                smallest=True
+              ) }}
+              <ul>
+              {% if month.free %}
+                <li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
+              {% endif %}
+              {% if month.paid %}
+                <li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
+                {{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
+              {% endif %}
+              {% if not (month.free or month.paid) %}
+                <li aria-hidden="true">–</li>
+              {% endif %}
+              </ul>
+            {% endcall %}
+          {% endcall %}
         </div>
-      </div>
-      <div class='column-half'>
-        <div class="keyline-block">
-          {{ big_number(
-            (sms_chargeable * sms_rate),
-            'spent',
-            currency="£",
-            smaller=True
-          ) }}
-        </div>
-      </div>
+      {% endif %}
     </div>
 
-    {% if months %}
-      <div class="dashboard-table body-copy-table">
-        {% call(month, row_index) list_table(
-          months,
-          caption="Total spend",
-          caption_visible=False,
-          empty_message='',
-          field_headings=[
-            'By month',
-            hidden_field_heading('Cost'),
-          ],
-          field_headings_visible=True
-        ) %}
-          {% call row_heading() %}
-            {{ month.name }}
-          {% endcall %}
-          {% call field(align='left') %}
-            {{ big_number(
-              sms_rate * month.paid,
-              currency="£",
-              smallest=True
-            ) }}
-            <ul>
-            {% if month.free %}
-              <li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
-            {% endif %}
-            {% if month.paid %}
-              <li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
-              {{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
-            {% endif %}
-            {% if not (month.free or month.paid) %}
-              <li aria-hidden="true">–</li>
-            {% endif %}
-            </ul>
-          {% endcall %}
-        {% endcall %}
-      </div>
-    {% endif %}
-
     <div class="grid-row">
       <div class="column-half">
         <p class="align-with-heading-copy">

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