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/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 %}