Fix invalid nesting of HTML elements

In HTML you generally can’t nest an inline level element inside a block
level one, if you want your HTML to validate.

There were a couple of places where we were using a `<span>` as a
containing element:
- inside every table cell (think we inherited this from Digital
  Marketplace)
- in the ‘pill’ navigation component for the selected tab

This meant that when we put components like big number inside these,
the resulting HTML was invalid, because big number is built with a bunch
of `<div>`s, which are block level.

This commit removes the use of a `<span>` tag in these places, and
replaces it with a `<div>`. Nesting block level elements in fine in
HTML.

app/assets/stylesheets/components/pill.scss

@@ -9,7 +9,7 @@
   }
 
   a,
-  span {
+  &-selected-item {
     display: block;
     float: left;
     box-sizing: border-box;
@@ -45,7 +45,7 @@
     }
   }
 
-  span {
+  &-selected-item {
     border: 2px solid $black;
     outline: 1px solid rgba($white, 0.1);
     position: relative;

app/templates/components/pill.html

@@ -9,15 +9,15 @@
     {% for label, option, link, count in items %}
       {% if current_value == option %}
         <li aria-selected='true' role='tab'>
-          <span tabindex='0'>
+          <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>
+            {{ big_number(count, **big_number_args) }}
+            <div class="pill-label">{{ label }}</div>
       {% if current_value == option %}
-          </span>
+          </div>
       {% else %}
           </a>
       {% endif %}

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