From 7f1216e22524d8ad8e47d9a889a6067d6828314f Mon Sep 17 00:00:00 2001
From: Aman Pandey <aman2001mi@gmail.com>
Date: Tue, 23 Jan 2024 16:53:14 +0530
Subject: [PATCH] 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                                 |  1 +
 docs/releases/6.0.md                          |  1 +
 .../templates/wagtailadmin/tables/table.html  |  5 +++
 wagtail/admin/tests/ui/test_tables.py         | 34 +++++++++++++++++++
 wagtail/admin/ui/tables/__init__.py           |  5 +++
 5 files changed, 46 insertions(+)

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 1abf475f1c..8149e55673 100644
--- a/CHANGELOG.txt
+++ b/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)
diff --git a/docs/releases/6.0.md b/docs/releases/6.0.md
index d6abf2a157..b4c511b252 100644
--- a/docs/releases/6.0.md
+++ b/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
diff --git a/wagtail/admin/templates/wagtailadmin/tables/table.html b/wagtail/admin/templates/wagtailadmin/tables/table.html
index f205a0b919..ec5b39a6d4 100644
--- a/wagtail/admin/templates/wagtailadmin/tables/table.html
+++ b/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 %} />
diff --git a/wagtail/admin/tests/ui/test_tables.py b/wagtail/admin/tests/ui/test_tables.py
index 51e05f2f7d..7c00a4512c 100644
--- a/wagtail/admin/tests/ui/test_tables.py
+++ b/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"},
diff --git a/wagtail/admin/ui/tables/__init__.py b/wagtail/admin/ui/tables/__init__.py
index 283ddce94d..b05341036d 100644
--- a/wagtail/admin/ui/tables/__init__.py
+++ b/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