From 2ecfc2bb80856146294c33ee69ade776eff0c53f Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 14 Feb 2017 15:09:54 +0000
Subject: [PATCH] Fix invalid nesting of HTML elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 4 ++--
 app/templates/components/pill.html          | 8 ++++----
 app/templates/components/table.html         | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
index 056f38a4b..be3619984 100644
--- a/app/assets/stylesheets/components/pill.scss
+++ b/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;
diff --git a/app/templates/components/pill.html b/app/templates/components/pill.html
index 498c32bd5..efd895069 100644
--- a/app/templates/components/pill.html
+++ b/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 %}
diff --git a/app/templates/components/table.html b/app/templates/components/table.html
index fef690fd0..b21fc3dc9 100644
--- a/app/templates/components/table.html
+++ b/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 %}