From 663df4a4f9d000eb72e08a55aae0943ab07108b8 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 23 Dec 2020 15:29:57 +0000
Subject: [PATCH] Remove <div>s from big_number text

An accessiblity audit done as part of Notify's
service assessment raised the following problem
with our big_number component.

When you turn CSS off, the sentence in the
component is split onto separate lines.

This was because the number part is wrapped in a
<div> which browsers were interpreting as being a
separate sentence to the label.

So "1 letter", where "letter" is the label, was
seen as:

"1"
"letter"

The accessibility expert consulted on this pointed
out that this would sound confusing for users of
screen readers when moving through the document
sentence by sentence.

These changes:
- make the <div>s into <span>s which are 'phrasing
  content' and so are interpreted as part of the
  same sentence
- change the CSS so the number will still sit
  on top of its label text

The HTML5 spec has a section on how browsers
should arrange text into paragraphs that explains
what was happening in more detail:

https://www.w3.org/TR/html52/dom.html#paragraphs
---
 .../stylesheets/components/big-number.scss    |  7 ++-
 app/templates/components/big-number.html      | 46 +++++++++----------
 tests/app/main/views/test_dashboard.py        |  2 +-
 tests/app/main/views/test_platform_admin.py   |  2 +-
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss
index b8dabea7b..aeb78df42 100644
--- a/app/assets/stylesheets/components/big-number.scss
+++ b/app/assets/stylesheets/components/big-number.scss
@@ -3,14 +3,17 @@
 
   display: block;
 
+  &-number,
+  &-label {
+    display: block;
+  }
+
   &-number {
     @include bold-48($tabular-numbers: true);
-    display: block;
   }
 
   &-label {
     @include core-19;
-    display: inline-block;
     padding-bottom: 10px;
   }
 
diff --git a/app/templates/components/big-number.html b/app/templates/components/big-number.html
index 8b5176a04..50790b474 100644
--- a/app/templates/components/big-number.html
+++ b/app/templates/components/big-number.html
@@ -2,22 +2,22 @@
   {% if link %}
     <a class="govuk-link govuk-link--no-visited-state big-number-link" href="{{ link }}">
   {% endif %}
-  <div class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
-    <div class="big-number-number">
-      {% if number is number %}
-        {% if currency %}
-          {{ "{}{:,.2f}".format(currency, number) }}
-        {% else %}
-          {{ "{:,}".format(number) }}
+      <span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
+        <span class="big-number-number">
+          {% if number is number %}
+            {% if currency %}
+              {{ "{}{:,.2f}".format(currency, number) }}
+            {% else %}
+              {{ "{:,}".format(number) }}
+            {% endif %}
+          {% else %}
+            {{ number }}
+          {% endif %}
+        </span>
+        {% if label %}
+          <span class="big-number-label">{{ label }}</span>
         {% endif %}
-      {% else %}
-        {{ number }}
-      {% endif %}
-    </div>
-    {% if label %}
-      <span class="big-number-label">{{ label }}</span>
-    {% endif %}
-  </div>
+      </span>
   {% if link %}
     </a>
   {% endif %}
@@ -36,10 +36,10 @@
   smaller=False,
   smallest=False
 ) %}
-  <div class="big-number-with-status">
+  <span class="big-number-with-status">
     {{ big_number(number, label, link=link, smaller=smaller, smallest=smallest) }}
     {% if show_failures %}
-      <div class="big-number-status{% if danger_zone %}-failing{% endif %}">
+      <span class="big-number-status{% if danger_zone %}-failing{% endif %}">
         {% if failures %}
           {% if failure_link %}
             <a class="govuk-link govuk-link--no-visited-state" href="{{ failure_link }}">
@@ -53,23 +53,23 @@
         {% else %}
           No failures
         {% endif %}
-      </div>
+      </span>
     {% endif %}
-  </div>
+  </span>
 {% endmacro %}
 
 
 {% macro big_number_simple(number, label) %}
-  <div class="big-number-dark bottom-gutter-2-3">
-    <div class="big-number-number">
+  <span class="big-number-dark bottom-gutter-2-3">
+    <span class="big-number-number">
       {% if number is number %}
         {{ "{:,}".format(number) }}
       {% else %}
         {{ number }}
       {% endif %}
-    </div>
+    </span>
     {% if label %}
       <span class="big-number-label">{{ label }}</span>
     {% endif %}
-  </div>
+  </span>
 {% endmacro %}
diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py
index 90eb91c76..23dc8ceab 100644
--- a/tests/app/main/views/test_dashboard.py
+++ b/tests/app/main/views/test_dashboard.py
@@ -1426,7 +1426,7 @@ def test_service_dashboard_updates_gets_dashboard_totals(
         service_id=SERVICE_ONE_ID,
     )
 
-    numbers = [number.text.strip() for number in page.find_all('div', class_='big-number-number')]
+    numbers = [number.text.strip() for number in page.find_all('span', class_='big-number-number')]
     assert '123' in numbers
     assert '456' in numbers
 
diff --git a/tests/app/main/views/test_platform_admin.py b/tests/app/main/views/test_platform_admin.py
index e4b99cb45..bff8eb62c 100644
--- a/tests/app/main/views/test_platform_admin.py
+++ b/tests/app/main/views/test_platform_admin.py
@@ -627,7 +627,7 @@ def test_platform_admin_displays_stats_in_right_boxes_and_with_correct_styling(
     # Email complaints status box - link exists and number is correct
     assert page.find('a', string='15 complaints')
     # SMS total box - number is correct
-    assert page.find_all('div', class_='big-number-number')[1].text.strip() == '168'
+    assert page.find_all('span', class_='big-number-number')[1].text.strip() == '168'
     # Test SMS box - number is correct
     assert '5' in page.find_all('div', class_='govuk-grid-column-one-third')[4].text
     # SMS technical failure status box - number is correct and failure class is used