diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 97f29ce27a..99df784d95 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -85,6 +85,7 @@ Changelog * Fix: Raise a `SiteSetting.DoesNotExist` error when retrieving settings for an unrecognised site (Nick Smith) * Fix: Ensure that defaulted or unique values declared in `exclude_fields_in_copy` are correctly excluded in new copies, resolving to the default value (Elhussein Almasri) * Fix: Ensure that `default_ordering` set on IndexView is preserved if ModelViewSet does not specify an explicit ordering (Cynthia Kiser) + * Fix: Ensure that TableBlock cells are accessible when using keyboard control only (Elhussein Almasri) * Docs: Document, for contributors, the use of translate string literals passed as arguments to tags and filters using `_()` within templates (Chiemezuo Akujobi) * Docs: Document all features for the Documents app in one location (Neeraj Yetheendran) * Docs: Add section to testing docs about creating pages and working with page content (Mariana Bedran Lesche) diff --git a/client/src/entrypoints/contrib/table_block/table.js b/client/src/entrypoints/contrib/table_block/table.js index a0292070d3..a3918aebe7 100644 --- a/client/src/entrypoints/contrib/table_block/table.js +++ b/client/src/entrypoints/contrib/table_block/table.js @@ -5,6 +5,18 @@ import $ from 'jquery'; import { hasOwn } from '../../../utils/hasOwn'; +/** + * Due to the limitations of Handsontable, the 'cell' elements do not accept keyboard focus. + * To achieve this we will convert each cell to contenteditable with plaintext (for browsers that support this). + * This is not a perfect fix, clicking in a cell and then using keyboard has some quirks. + * However, without these attributes the keyboard cannot navigate to edit these cells at a.. + */ +const keyboardAccessAttrs = { + 'contenteditable': 'true', + 'plaintext-only': 'true', + 'tabindex': '0', +}; + function initTable(id, tableOptions) { const containerId = id + '-handsontable-container'; var tableHeaderId = id + '-handsontable-header'; @@ -20,12 +32,12 @@ function initTable(id, tableOptions) { let hot = null; let dataForForm = null; let isInitialized = false; + const tableParent = $('#' + id).parent(); const getWidth = function () { return $('.w-field--table_input').closest('.w-panel').width(); }; const getHeight = function () { - const tableParent = $('#' + id).parent(); let htCoreHeight = 0; tableParent.find('.htCore').each(function () { htCoreHeight += $(this).height(); @@ -164,6 +176,10 @@ function initTable(id, tableOptions) { const structureEvent = function (index, amount) { resizeHeight(getHeight()); persist(); + // wait until the document is ready and add these attributes. + $(() => { + $(tableParent).find('td, th').attr(keyboardAccessAttrs); + }); }; headerChoice.on('change', () => { @@ -216,6 +232,7 @@ function initTable(id, tableOptions) { // Render the table. Calling render also removes 'null' literals from empty cells. hot.render(); resizeHeight(getHeight()); + tableParent.find('td, th').attr(keyboardAccessAttrs); window.dispatchEvent(new Event('resize')); }); } @@ -263,6 +280,13 @@ class TableInput {
`; + // added these attributes to allow user move through Table using 'keyboard` and enable edit it. + $(() => { + const tableParent = document.getElementById( + `${id}-handsontable-container`, + ); + $(tableParent).find('td, th').attr(keyboardAccessAttrs); + }); placeholder.replaceWith(container); const input = container.querySelector(`input[name="${name}"]`); diff --git a/docs/releases/6.0.md b/docs/releases/6.0.md index 120a8de19d..070bbbc0cd 100644 --- a/docs/releases/6.0.md +++ b/docs/releases/6.0.md @@ -123,6 +123,7 @@ This feature was implemented by Nick Lee, Thibaud Colas, and Sage Abdullah. * Raise a `SiteSetting.DoesNotExist` error when retrieving settings for an unrecognised site (Nick Smith) * Ensure that defaulted or unique values declared in `exclude_fields_in_copy` are correctly excluded in new copies, resolving to the default value (Elhussein Almasri) * Ensure that `default_ordering` set on IndexView is preserved if ModelViewSet does not specify an explicit ordering (Cynthia Kiser) + * Ensure that TableBlock cells are accessible when using keyboard control only (Elhussein Almasri) ### Documentation