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

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;
   }
 

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 %}">
+      <span class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
-    <div class="big-number-number">
+        <span class="big-number-number">
-      {% if number is number %}
+          {% if number is number %}
-        {% if currency %}
+            {% if currency %}
-          {{ "{}{:,.2f}".format(currency, number) }}
+              {{ "{}{:,.2f}".format(currency, number) }}
-        {% else %}
+            {% else %}
-          {{ "{:,}".format(number) }}
+              {{ "{:,}".format(number) }}
+            {% endif %}
+          {% else %}
+            {{ number }}
+          {% endif %}
+        </span>
+        {% if label %}
+          <span class="big-number-label">{{ label }}</span>
         {% endif %}
-      {% else %}
+      </span>
-        {{ number }}
-      {% endif %}
-    </div>
-    {% if label %}
-      <span class="big-number-label">{{ label }}</span>
-    {% endif %}
-  </div>
   {% 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">
+  <span class="big-number-dark bottom-gutter-2-3">
-    <div class="big-number-number">
+    <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 %}

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
 

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