diff --git a/docs/_static/images/screen40_table_block.png b/docs/_static/images/screen40_table_block.png index 2d4fbfc41..4332cf900 100644 Binary files a/docs/_static/images/screen40_table_block.png and b/docs/_static/images/screen40_table_block.png differ diff --git a/docs/reference/contrib/table_block.rst b/docs/reference/contrib/table_block.rst index 01a241c96..45351b796 100644 --- a/docs/reference/contrib/table_block.rst +++ b/docs/reference/contrib/table_block.rst @@ -2,7 +2,7 @@ TableBlock ========== -The TableBlock module provides an HTML table block type for StreamField. This module uses `handsontable 6.2.2 `_ to provide users with the ability to create and edit HTML tables in Wagtail. +The TableBlock module provides an HTML table block type for StreamField. This module uses `handsontable 6.2.2 `_ to provide users with the ability to create and edit HTML tables in Wagtail. Table blocks provides a caption field for accessibility. .. image:: ../../_static/images/screen40_table_block.png @@ -83,7 +83,7 @@ Every key in the ``table_options`` dictionary maps to a `handsontable `_ - The default number of columns for new tables. * `colHeaders `_ - Can be set to ``True`` or ``False``. This setting designates if new tables should be created with column headers. **Note:** this only sets the behaviour for newly created tables. Page editors can override this by checking the the “Column header” checkbox in the table editor in the Wagtail admin. * `rowHeaders `_ - Operates the same as ``colHeaders`` to designate if new tables should be created with the first column as a row header. Just like ``colHeaders`` this option can be overridden by the page editor in the Wagtail admin. -* `contextMenu `_ - Enables or disables the Handsontable right-click menu. By default this is set to ``True``. Alternatively you can provide a list or a dictionary with [specific options](https://handsontable.com/docs/6.2.2/demo-context-menu.html#page-specific). +* `contextMenu `_ - Enables or disables the Handsontable right-click menu. By default this is set to ``True``. Alternatively you can provide a list or a dictionary with [specific options](https://handsontable.com/docs/6.2.2/demo-context-menu.html#page-specific). * `editor `_ - Defines the editor used for table cells. The default setting is text. * `stretchH `_ - Sets the default horizontal resizing of tables. Options include, 'none', 'last', and 'all'. By default TableBlock uses 'all' for the even resizing of columns. * `height `_ - The default height of the grid. By default TableBlock sets the height to ``108`` for the optimal appearance of new tables in the editor. This is optimized for tables with ``startRows`` set to ``3``. If you change the number of ``startRows`` in the configuration, you might need to change the ``height`` setting to improve the default appearance in the editor. diff --git a/wagtail/contrib/table_block/blocks.py b/wagtail/contrib/table_block/blocks.py index ecfc9b198..036d8ba02 100644 --- a/wagtail/contrib/table_block/blocks.py +++ b/wagtail/contrib/table_block/blocks.py @@ -43,7 +43,12 @@ class TableInput(forms.HiddenInput): def get_context(self, name, value, attrs=None): context = super().get_context(name, value, attrs) + table_caption = '' + if value and value != 'null': + table_caption = json.loads(value).get('table_caption', '') context['widget']['table_options_json'] = json.dumps(self.table_options) + context['widget']['table_caption'] = table_caption + return context @@ -59,6 +64,7 @@ class TableBlock(FieldBlock): """ self.table_options = self.get_table_options(table_options=table_options) self.field_options = {'required': required, 'help_text': help_text} + super().__init__(**kwargs) @cached_property @@ -97,6 +103,7 @@ class TableBlock(FieldBlock): 'table_header': table_header, 'first_col_is_header': first_col_is_header, 'html_renderer': self.is_html_renderer(), + 'table_caption': value.get('table_caption'), 'data': value['data'][1:] if table_header else value.get('data', []) }) diff --git a/wagtail/contrib/table_block/static/table_block/js/table.js b/wagtail/contrib/table_block/static/table_block/js/table.js index b98cb1da4..d4521d277 100644 --- a/wagtail/contrib/table_block/static/table_block/js/table.js +++ b/wagtail/contrib/table_block/static/table_block/js/table.js @@ -4,9 +4,11 @@ function initTable(id, tableOptions) { var containerId = id + '-handsontable-container'; var tableHeaderCheckboxId = id + '-handsontable-header'; var colHeaderCheckboxId = id + '-handsontable-col-header'; + var tableCaptionId = id + '-handsontable-col-caption'; var hiddenStreamInput = $('#' + id); var tableHeaderCheckbox = $('#' + tableHeaderCheckboxId); var colHeaderCheckbox = $('#' + colHeaderCheckboxId); + var tableCaption = $('#' + tableCaptionId); var hot; var defaultOptions; var finalOptions = {}; @@ -18,6 +20,7 @@ function initTable(id, tableOptions) { var structureEvent; var dataForForm = null; var isInitialized = false; + var getWidth = function() { return $('.widget-table_input').closest('.sequence-member-inner').width(); }; @@ -55,6 +58,9 @@ function initTable(id, tableOptions) { if (dataForForm.hasOwnProperty('first_col_is_header')) { colHeaderCheckbox.prop('checked', dataForForm.first_col_is_header); } + if (dataForForm.hasOwnProperty('table_caption')) { + tableCaption.prop('value', dataForForm.table_caption); + } } if (!tableOptions.hasOwnProperty('width') || !tableOptions.hasOwnProperty('height')) { @@ -88,7 +94,8 @@ function initTable(id, tableOptions) { data: hot.getData(), cell: getCellsClassnames(), first_row_is_table_header: tableHeaderCheckbox.prop('checked'), - first_col_is_header: colHeaderCheckbox.prop('checked') + first_col_is_header: colHeaderCheckbox.prop('checked'), + table_caption: tableCaption.val() })); }; @@ -123,6 +130,10 @@ function initTable(id, tableOptions) { persist(); }); + tableCaption.on('change', function() { + persist(); + }); + defaultOptions = { afterChange: cellEvent, afterCreateCol: structureEvent, diff --git a/wagtail/contrib/table_block/templates/table_block/blocks/table.html b/wagtail/contrib/table_block/templates/table_block/blocks/table.html index 766b3e7df..524eae814 100644 --- a/wagtail/contrib/table_block/templates/table_block/blocks/table.html +++ b/wagtail/contrib/table_block/templates/table_block/blocks/table.html @@ -1,6 +1,9 @@ {% load table_block_tags %} + {% if table_caption %} + + {% endif %} {% if table_header %} diff --git a/wagtail/contrib/table_block/templates/table_block/widgets/table.html b/wagtail/contrib/table_block/templates/table_block/widgets/table.html index 63eb9ebfc..21cd400f2 100644 --- a/wagtail/contrib/table_block/templates/table_block/widgets/table.html +++ b/wagtail/contrib/table_block/templates/table_block/widgets/table.html @@ -19,6 +19,16 @@
+
+ +
+
+ +
+

{% trans 'A heading that identifies the overall topic of the table, and is useful for screen reader users' %}

+
+
+
{% include 'django/forms/widgets/hidden.html' %} diff --git a/wagtail/contrib/table_block/tests.py b/wagtail/contrib/table_block/tests.py index 5332a03ee..63967d32b 100644 --- a/wagtail/contrib/table_block/tests.py +++ b/wagtail/contrib/table_block/tests.py @@ -241,6 +241,30 @@ class TestTableBlock(TestCase): self.assertIn("
A fascinating table.
", result) + def test_table_block_caption_render(self): + """ + Test a generic render with caption. + """ + value = {'table_caption': 'caption', 'first_row_is_table_header': False, + 'first_col_is_header': False, + 'data': [['Test 1', 'Test 2', 'Test 3'], [None, None, None], + [None, None, None]]} + block = TableBlock() + result = block.render(value) + expected = """ +
{{ table_caption }}
+ + + + + + +
caption
Test 1Test 2Test 3
+ """ + self.assertHTMLEqual(result, expected) + self.assertIn('Test 2', result) + + class TestTableBlockForm(WagtailTestUtils, SimpleTestCase): def setUp(self):