mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-25 05:02:57 +01:00
Code Issues Releases Wiki Activity

Make TableBlock cells reachable using keyboard

Browse Source 
Fixes #8893
This commit is contained in:
elhussein almasri 2023-12-30 23:53:07 +00:00 committed by LB (Ben Johnston)
parent 690c382577
commit d1b1fa638d
3 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.txt
View File

@ -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)

26
client/src/entrypoints/contrib/table_block/table.js
View File

@ -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 {
<div id="${id}-handsontable-container"></div>
<input type="hidden" name="${name}" id="${id}" placeholder="${this.strings['Table']}">
`;
// 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}"]`);

1
docs/releases/6.0.md
View File

@ -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