Improve captions on details pages (#243)

* Expand table caption It's more helpful for a screen reader if table captions are specific. * Replace schema details with table details This link goes to the top of the table page, whereas the schema is displayed in a section below. * Fix heading structure on details pages These were missing an h1 heading. * replace schema with table schema * Render a message when tables are missing for any reason * Update selenium
ministryofjustice · Apr 9, 2024 · 1a72171 · 1a72171
1 parent 8fb8645
commit 1a72171
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 9 deletions.
diff --git a/templates/details_data_product.html b/templates/details_data_product.html
@@ -20,7 +20,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
       <span class="govuk-caption-m">Data product</span>
-      <h2 class="govuk-heading-l">{{result.name}}</h2>
+      <h1 class="govuk-heading-l">{{result.name}}</h1>
     </div>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
@@ -70,6 +70,7 @@ <h2 class="govuk-heading-s govuk-!-margin-top-3">
 
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
+        {% if tables %}
         <table class="govuk-table">
           <caption class="govuk-table__caption govuk-table__caption--m">Data product content</caption>
           <thead class="govuk-table__head">
@@ -91,12 +92,16 @@ <h2 class="govuk-heading-s govuk-!-margin-top-3">
                       {{ table.description|markdown:3 }}
                     {% endif %}
                   </td>
-                  <td class="govuk-table__cell">  <a href="{% url 'home:details' result_type=table_type id=table.urn %}" class="govuk-link">Schema details</a></td>
+                  <td class="govuk-table__cell">  <a href="{% url 'home:details' result_type=table_type id=table.urn %}" class="govuk-link">Table details</a></td>
                 </tr>
               {% endwith %}
             {% endfor %}
           </tbody>
         </table>
+        {% else %}
+        <h2 class="govuk-heading-m">Data product content</h2>
+        <p class="govuk-body">This data product is missing table information.</p>
+        {% endif %}
       </div>
     </div>
   </div>

diff --git a/templates/details_database.html b/templates/details_database.html
@@ -20,7 +20,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
       <span class="govuk-caption-m">Database</span>
-      <h2 class="govuk-heading-l">{{result.name}}</h2>
+      <h1 class="govuk-heading-l">{{result.name}}</h1>
     </div>
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds">
@@ -70,6 +70,7 @@ <h2 class="govuk-heading-s govuk-!-margin-top-3">
 
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full">
+        {% if tables %}
         <table class="govuk-table">
           <caption class="govuk-table__caption govuk-table__caption--m">Database content</caption>
           <thead class="govuk-table__head">
@@ -91,12 +92,16 @@ <h2 class="govuk-heading-s govuk-!-margin-top-3">
                       {{ table.description|markdown:3 }}
                     {% endif %}
                   </td>
-                  <td class="govuk-table__cell">  <a href="{% url 'home:details' result_type=table_type id=table.urn %}" class="govuk-link">Schema details</a></td>
+                  <td class="govuk-table__cell">  <a href="{% url 'home:details' result_type=table_type id=table.urn %}" class="govuk-link">Table details</a></td>
                 </tr>
               {% endwith %}
             {% endfor %}
           </tbody>
         </table>
+        {% else %}
+        <h2 class="govuk-heading-m">Database content</h2>
+        <p class="govuk-body">This database is missing table information.</p>
+        {% endif %}
       </div>
     </div>
   </div>

diff --git a/templates/details_table.html b/templates/details_table.html
@@ -26,7 +26,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-full">
       <span class="govuk-caption-m">Table</span>
-      <h2 class="govuk-heading-l">{{table.name}}</h2>
+      <h1 class="govuk-heading-l">{{table.name}}</h1>
     </div>
   </div>
   <div class="govuk-grid-row">
@@ -76,7 +76,7 @@ <h2 class="govuk-heading-s govuk-!-margin-top-3">
     <div class="govuk-grid-column-full">
       {% if table.column_details %}
         <table class="govuk-table">
-          <caption class="govuk-table__caption govuk-table__caption--m">Schema</caption>
+          <caption class="govuk-table__caption govuk-table__caption--m">Table schema</caption>
           <thead class="govuk-table__head">
             <tr class="govuk-table__row">
               <th scope="col" class="govuk-table__header">Column name</th>
@@ -97,7 +97,7 @@ <h2 class="govuk-heading-s govuk-!-margin-top-3">
           </tbody>
         </table>
       {% else %}
-        <h2 class="govuk-heading-m">Schema</h2>
+        <h2 class="govuk-heading-m">Table schema</h2>
         <p class="govuk-body">The schema for this table is not available.</p>
       {% endif %}
 

diff --git a/tests/selenium/conftest.py b/tests/selenium/conftest.py
@@ -68,6 +68,9 @@ def __init__(self, selenium):
 
 
 class DataProductDetailsPage(Page):
+    def primary_heading(self):
+        return self.selenium.find_element(By.TAG_NAME, "h1")
+
     def secondary_heading(self):
         return self.selenium.find_element(By.TAG_NAME, "h2")
 

diff --git a/tests/selenium/test_search_scenarios.py b/tests/selenium/test_search_scenarios.py
@@ -263,9 +263,9 @@ def click_on_the_first_result(self):
     def verify_i_am_on_the_details_page(self, item_name):
         assert item_name in self.selenium.title
 
-        secondary_heading_text = self.details_data_product_page.secondary_heading().text
+        heading_text = self.details_data_product_page.primary_heading().text
 
-        assert secondary_heading_text == item_name
+        assert heading_text == item_name
 
     def enter_a_query_and_submit(self, query):
         search_bar = self.search_page.search_bar()