Fixing comparison table accessibility issues (#435). Fix #318

wagtail · Feb 25, 2024 · 4fab0e2 · 4fab0e2
1 parent b95cfd5
commit 4fab0e2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 15 deletions.
diff --git a/...lates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html b/...lates/patterns/components/streamfields/comparison_table_block/comparison_table_block.html
@@ -8,17 +8,27 @@
                     <thead>
                         <tr>
                             {% for col in value.comparison_table.columns %}
-                                <th>{{ col.heading }}</th>
+                                {% if col.heading %}
+                                    <th scope="col">{{ col.heading }}</th>
+                                {% else %}
+                                    <td></td>
+                                {% endif %}
                             {% endfor %}
                         </tr>
                     </thead>
                     <tbody>
                 {% endif %}
                 <tr>
                     {% for block in row %}
-                        <td>
-                            {% include_block block %}
-                        </td>
+                        {% if forloop.first %}
+                            <th scope="row">
+                                {{ block }}
+                            </th>
+                        {% else %}
+                            <td>
+                                {% include_block block %}
+                            </td>
+                        {% endif %}
                     {% endfor %}
                 </tr>
             {% endfor %}

diff --git a/wagtailio/static/sass/components/_comparison-table.scss b/wagtailio/static/sass/components/_comparison-table.scss
@@ -13,15 +13,6 @@
         grid-column: 2 / span 5;
     }
 
-    td:first-child {
-        font-weight: $weight--bold;
-        width: 150px;
-
-        @include media-query(large) {
-            width: 250px
-        }
-    }
-
     tbody {
         grid-column: 2 / span 2;
         grid-gap: 20px;
@@ -34,14 +25,24 @@
             grid-column: 2 / span 5;
         }
 
+        th {
+            // stylelint-disable-next-line declaration-property-value-allowed-list
+            text-align: left;
+            font-weight: $weight--bold;
+            width: 150px;
+
+            @include media-query(large) {
+                width: 250px
+            }
+        }
+
         > tr:last-child {
-            td {
+            td, th {
                 border: unset;
             }
         }
     }
 
-
     td,
     th {
         padding: 20px 20px 20px 0;