fix(accessibility): add visually hidden description text in tables (#896)

* fix(accessibility): add visually hidden description text in tables

* use column not table in if

* test: add integration test for blank column descriptions

* suggestion for empty description text

Author: LavMatt

templates/details_dashboard.html

@@ -20,7 +20,11 @@
                 <tr class="govuk-table__row">
                   <td class="govuk-table__cell"><a href="{% url 'home:details' result_type=chart_type urn=chart.entity_ref.urn %}" class="govuk-link">{{chart.entity_ref.display_name}}</a></td>
                   <td class="govuk-table__cell">
-                      {{ chart.description|markdown:3 }}
+                  {% if chart.description %}
+                    {{ chart.description|markdown:3 }}
+                  {% else %}
+                    <p class="govuk-visually-hidden">A description for {{chart.entity_ref.display_name}} does not exist</p>
+                  {% endif %}
                   </td>
                 </tr>
               {% endwith %}

templates/details_database.html

@@ -20,11 +20,15 @@
                 <tr class="govuk-table__row">
                   <td class="govuk-table__cell"><a href="{% url 'home:details' result_type=table_type urn=table.entity_ref.urn %}" class="govuk-link">{{table.entity_ref.display_name}}</a></td>
                   <td class="govuk-table__cell">
+                  {% if table.description %}
                     {% if table.description|length > 200 %}
                       {{ table.description|slice:":200"|add:"..."|markdown:3 }}
                     {% else %}
                       {{ table.description|markdown:3 }}
                     {% endif %}
+                  {% else %}
+                    <p class="govuk-visually-hidden">A description for {{table.entity_ref.display_name}} does not exist</p>
+                  {% endif %}
                   </td>
                 </tr>
               {% endwith %}

templates/details_table.html

@@ -20,7 +20,13 @@
             {% for column in entity.column_details %}
               <tr class="govuk-table__row">
                 <td class="govuk-table__cell">{{column.display_name}}</td>
-                <td class="govuk-table__cell column-description">{{column.description|default:''|markdown:3|truncatechars_html:300}}</td>
+                <td class="govuk-table__cell column-description">
+                {% if column.description %}
+                  {{column.description|default:''|markdown:3|truncatechars_html:300}}</td>
+                {% else %}
+                  <p class="govuk-visually-hidden">A description for {{column.display_name}} does not exist</p>
+                {% endif %}
+                </td>
                 <td class="govuk-table__cell">{{column.type|title}}</td>
                 <td class="govuk-table__cell">{{column.nullable|yesno:"Yes,No,"}}</td>
               </tr>

tests/conftest.py

@@ -329,6 +329,7 @@ def search_result_from_database(database: Database):
 def generate_table_metadata(
     name: str = fake.unique.name(),
     description: str = fake.unique.paragraph(),
+    column_description: str = "description **with markdown**",
     relations=None,
     custom_properties=None,
 ) -> Table:
@@ -367,7 +368,7 @@ def generate_table_metadata(
                 name="urn",
                 display_name="urn",
                 type="string",
-                description="description **with markdown**",
+                description=column_description,
                 nullable=False,
                 is_primary_key=True,
                 foreign_keys=[
@@ -553,6 +554,11 @@ def example_dashboard(name="example_dashboard"):
     return generate_dashboard_metadata(name=name)
 
 
+@pytest.fixture(autouse=True)
+def example_table(name="example_table"):
+    return generate_table_metadata(name=name)
+
+
 def generate_page(page_size=20, result_type: ResultType | None = None):
     """
     Generate a fake search page
@@ -570,7 +576,7 @@ def client():
 
 
 @pytest.fixture(autouse=True)
-def mock_catalogue(request, example_database, example_dashboard):
+def mock_catalogue(request, example_database, example_dashboard, example_table):
     if "datahub" in request.keywords:
         yield None
         return
@@ -629,7 +635,7 @@ def mock_catalogue(request, example_database, example_dashboard):
     )
     mock_get_glossary_terms_response(mock_catalogue)
     mock_get_chart_details_response(mock_catalogue)
-    mock_get_table_details_response(mock_catalogue)
+    mock_get_table_details_response(mock_catalogue, example_table)
     mock_get_database_details_response(mock_catalogue, example_database)
     mock_get_dashboard_details_response(mock_catalogue, example_dashboard)
     mock_get_tags_response(mock_catalogue)
@@ -650,8 +656,8 @@ def mock_get_chart_details_response(mock_catalogue):
     mock_catalogue.get_chart_details.return_value = generate_chart_metadata()
 
 
-def mock_get_table_details_response(mock_catalogue):
-    mock_catalogue.get_table_details.return_value = generate_table_metadata()
+def mock_get_table_details_response(mock_catalogue, example_table):
+    mock_catalogue.get_table_details.return_value = example_table
 
 
 def mock_get_dashboard_details_response(mock_catalogue, example_dashboard):

tests/integration/test_interact_with_search_results.py

@@ -3,6 +3,8 @@
 
 from tests.conftest import (
     generate_page,
+    generate_table_metadata,
+    mock_get_table_details_response,
     mock_search_response,
     search_result_from_database,
 )
@@ -49,7 +51,26 @@ def test_table_search_to_details(self, mock_catalogue):
         self.start_on_the_search_page()
         self.enter_a_query_and_submit("court timeliness")
         self.click_on_the_first_result()
-        self.verify_i_am_on_the_table_details_page()
+        self.verify_i_am_on_the_table_details_page("description with markdown")
+
+    def test_table_search_to_details_accessibility(self, mock_catalogue):
+        """
+        Users with accessibility needs are presented with useful description info in details
+        tables, e.g. for missing details of a column in a table
+        """
+        mock_search_response(
+            mock_catalogue=mock_catalogue,
+            page_results=generate_page(result_type=ResultType.TABLE),
+            total_results=100,
+        )
+        table_no_column_description = generate_table_metadata(column_description="")
+        mock_get_table_details_response(mock_catalogue, table_no_column_description)
+        self.start_on_the_search_page()
+        self.enter_a_query_and_submit("court timeliness")
+        self.click_on_the_first_result()
+        self.verify_i_am_on_the_table_details_page(
+            "A description for urn does not exist"
+        )
 
     def test_database_search_to_table_details(self, mock_catalogue, example_database):
         """
@@ -67,7 +88,7 @@ def test_database_search_to_table_details(self, mock_catalogue, example_database
         self.verify_database_details()
         self.verify_database_tables_listed()
         self.click_on_table()
-        self.verify_i_am_on_the_table_details_page()
+        self.verify_i_am_on_the_table_details_page("description with markdown")
 
     def start_on_the_search_page(self):
         self.selenium.get(f"{self.live_server_url}/search?new=True")
@@ -112,12 +133,10 @@ def verify_database_details(self):
     def click_on_table(self):
         self.details_database_page.table_link().click()
 
-    def verify_i_am_on_the_table_details_page(self):
+    def verify_i_am_on_the_table_details_page(self, column_description):
         heading_text = self.details_database_page.primary_heading().text.replace(
             " Table", ""
         )
         assert heading_text == self.selenium.title.split("-")[0].strip()
 
-        assert self.table_details_page.column_descriptions() == [
-            "description with markdown"
-        ]
+        assert self.table_details_page.column_descriptions() == [column_description]