Add table caption property in table class component

Add support for basic rendering of a screen reader (not visible) only caption element
Fixes #11493

CHANGELOG.txt

@@ -49,6 +49,7 @@ Changelog
  * Keep database state of pages and snippets updated while in draft state (Stefan Hammer)
  * Add the accessibility checker within the page and snippets editor (Thibaud Colas)
  * Add `DrilldownController` and `w-drilldown` component to support drilldown menus (Thibaud Colas)
+ * Add support for `caption` on admin UI Table component (Aman Pandey)
  * Fix: Update system check for overwriting storage backends to recognise the `STORAGES` setting introduced in Django 4.2 (phijma-leukeleu)
  * Fix: Prevent password change form from raising a validation error when browser autocomplete fills in the "Old password" field (Chiemezuo Akujobi)
  * Fix: Ensure that the legacy dropdown options, when closed, do not get accidentally clicked by other interactions wide viewports (CheesyPhoenix, Christer Jensen)

docs/releases/6.0.md

@@ -81,6 +81,7 @@ This feature was implemented by Nick Lee, Thibaud Colas, and Sage Abdullah.
  * Polish dark theme styles and update color tokens (Thibaud Colas, Rohit Sharma)
  * Keep database state of pages and snippets updated while in draft state (Stefan Hammer)
  * Add `DrilldownController` and `w-drilldown` component to support drilldown menus (Thibaud Colas)
+ * Add support for `caption` on admin UI Table component (Aman Pandey)
 
 
 ### Bug fixes

wagtail/admin/templates/wagtailadmin/tables/table.html

@@ -1,6 +1,11 @@
 {% load wagtailadmin_tags %}
 
 <table{% include "wagtailadmin/shared/attrs.html" with attrs=table.attrs %}>
+    {% with caption=table.get_caption %}
+        {% if caption %}
+            <caption class="w-sr-only">{{ caption }}</caption>
+        {% endif %}
+    {% endwith %}
     {% if table.has_column_widths %}
         {% for column in table.columns.values %}
             <col {% if column.width %}width="{{ column.width }}"{% endif %} />

wagtail/admin/tests/ui/test_tables.py

@@ -47,6 +47,40 @@ class TestTable(TestCase):
         """,
         )
 
+    def test_table_render_with_caption(self):
+        data = [
+            {"first_name": "Paul", "last_name": "Simon"},
+            {"first_name": "Art", "last_name": "Garfunkel"},
+        ]
+
+        caption = "Test table"
+
+        table = Table(
+            columns=[
+                Column("first_name"),
+                Column("last_name"),
+            ],
+            data=data,
+            caption=caption,
+        )
+
+        html = self.render_component(table)
+        self.assertHTMLEqual(
+            html,
+            """
+            <table class="listing">
+                <caption class="w-sr-only">Test table</caption>
+                <thead>
+                    <tr><th>First name</th><th>Last name</th></tr>
+                </thead>
+                <tbody>
+                    <tr><td>Paul</td><td>Simon</td></tr>
+                    <tr><td>Art</td><td>Garfunkel</td></tr>
+                </tbody>
+            </table>
+        """,
+        )
+
     def test_table_render_with_width(self):
         data = [
             {"first_name": "Paul", "last_name": "Simon"},

wagtail/admin/ui/tables/__init__.py

@@ -413,8 +413,10 @@ class Table(Component):
         ordering=None,
         classname=None,
         attrs=None,
+        caption=None,
     ):
         self.columns = OrderedDict([(column.name, column) for column in columns])
+        self.caption = caption
         self.data = data
         if template_name:
             self.template_name = template_name
@@ -424,6 +426,9 @@ class Table(Component):
             self.classname = classname
         self.base_attrs = attrs or {}
 
+    def get_caption(self):
+        return self.caption
+
     def get_context_data(self, parent_context):
         context = super().get_context_data(parent_context)
         context["table"] = self