Add role="table" to TableBlock output

As per https://twitter.com/SaraSoueidan/status/1177622630763028480, certain browsers apply heuristics to decide whether `<table>` elements exist for layout or data purposes, and adjust the behaviour of their accessibility features accordingly. Given that TableBlock intentionally doesn't allow markup within cells, we can be reasonably sure that any tables created with it are genuine data tables, and should therefore indicate that using `role="table"`.

CHANGELOG.txt

@@ -21,6 +21,7 @@ Changelog
  * Add `WAGTAILDOCS_SERVE_METHOD` setting to determine how document downloads will be linked to and served (Tobias McNulty, Matt Westcott)
  * Add `WAGTAIL_MODERATION_ENABLED` setting to enable / disable the 'Submit for Moderation' option (Jacob Topp-Mugglestone)
  * Added settings to customise pagination page size for the Images admin area (Brian Whitton)
+ * Added ARIA role to TableBlock output (Matt Westcott)
  * Fix: Added line breaks to long filenames on multiple image / document uploader (Kevin Howbrook)
  * Fix: Added https support for Scribd oEmbed provider (Rodrigo)
  * Fix: Changed StreamField group labels color so labels are visible (Catherine Farman)

docs/releases/2.7.rst

@@ -40,6 +40,7 @@ Other features
  * Add ``WAGTAILDOCS_SERVE_METHOD`` setting to determine how document downloads will be linked to and served (Tobias McNulty, Matt Westcott)
  * Add ``WAGTAIL_MODERATION_ENABLED`` setting to enable / disable the 'Submit for Moderation' option (Jacob Topp-Mugglestone)
  * Added settings to customise pagination page size for the Images admin area (Brian Whitton)
+ * Added ARIA role to TableBlock output (Matt Westcott)
 
 
 Bug fixes

wagtail/contrib/table_block/templates/table_block/blocks/table.html

@@ -1,6 +1,6 @@
 {% load table_block_tags %}
 
-<table>
+<table role="table">
     {% if table_caption %}
        <caption>{{ table_caption }}</caption>
     {% endif %}

wagtail/contrib/table_block/tests.py

@@ -37,7 +37,7 @@ class TestTableBlock(TestCase):
         block = TableBlock()
         result = block.render(value)
         expected = """
-            <table>
+            <table role="table">
                 <tbody>
                     <tr><td>Test 1</td><td>Test 2</td><td>Test 3</td></tr>
                     <tr><td></td><td></td><td></td></tr>
@@ -61,7 +61,7 @@ class TestTableBlock(TestCase):
         block = TableBlock()
         result = block.render(value)
         expected = """
-            <table>
+            <table role="table">
                 <thead>
                     <tr><th>Test 1</th><th class="htLeft">Test 2</th><th>Test 3</th></tr>
                 </thead>
@@ -90,7 +90,7 @@ class TestTableBlock(TestCase):
             ]
         })
         expected = """
-            <table>
+            <table role="table">
                 <tbody>
                     <tr><td></td><td></td><td></td></tr>
                     <tr><td></td><td></td><td></td></tr>
@@ -110,7 +110,7 @@ class TestTableBlock(TestCase):
                           [None, None, None]]}
 
         expected = """
-            <table>
+            <table role="table">
                 <tbody>
                     <tr><td>&lt;p&gt;&lt;strong&gt;Test&lt;/strong&gt;&lt;/p&gt;</td><td></td><td></td></tr>
                     <tr><td></td><td></td><td></td></tr>
@@ -131,7 +131,7 @@ class TestTableBlock(TestCase):
                  'data': [['Foo', 'Bar', 'Baz'], [None, None, None], [None, None, None]]}
 
         expected = """
-            <table>
+            <table role="table">
                 <thead>
                     <tr><th>Foo</th><th>Bar</th><th>Baz</th></tr>
                 </thead>
@@ -153,7 +153,7 @@ class TestTableBlock(TestCase):
                  'data': [['Foo', 'Bar', 'Baz'], ['one', 'two', 'three'], ['four', 'five', 'six']]}
 
         expected = """
-            <table>
+            <table role="table">
                 <tbody>
                     <tr><th>Foo</th><td>Bar</td><td>Baz</td></tr>
                     <tr><th>one</th><td>two</td><td>three</td></tr>
@@ -173,7 +173,7 @@ class TestTableBlock(TestCase):
                  'data': [['Foo', 'Bar', 'Baz'], ['one', 'two', 'three'], ['four', 'five', 'six']]}
 
         expected = """
-            <table>
+            <table role="table">
                 <thead>
                     <tr><th>Foo</th><th>Bar</th><th>Baz</th></tr>
                 </thead>
@@ -252,7 +252,7 @@ class TestTableBlock(TestCase):
         block = TableBlock()
         result = block.render(value)
         expected = """
-            <table>
+            <table role="table">
                 <caption>caption</caption>
                 <tbody>
                     <tr><td>Test 1</td><td>Test 2</td><td>Test 3</td></tr>