From 3920ac6e0c8d5d8a73a806377e78a19c541d9b88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= Date: Thu, 10 Apr 2025 10:48:30 +0200 Subject: [PATCH 1/4] Fix accessibility for table block --- src/js/classes/TableBlock.js | 54 +++++++++++++++++++++++++++++ src/js/index.js | 1 + src/scss/06-blocks/core/_table.scss | 16 +++++++++ 3 files changed, 71 insertions(+) create mode 100644 src/js/classes/TableBlock.js diff --git a/src/js/classes/TableBlock.js b/src/js/classes/TableBlock.js new file mode 100644 index 00000000..af38c824 --- /dev/null +++ b/src/js/classes/TableBlock.js @@ -0,0 +1,54 @@ +import AbstractDomElement from './AbstractDomElement' +import each from '../utils/each' + +// ---- +// class +// ---- +class TableBlock extends AbstractDomElement { + constructor(element, options) { + const instance = super(element, options) + + // avoid double init : + if (!instance.isNewInstance()) { + return instance + } + + const el = this._element + const table = el.querySelector('table') + const thead = table.querySelector('thead') + const legend = el.querySelector('figcaption') + + // Tableau de données + if (thead) { + const ths = thead.querySelectorAll('th') + + each(ths, function (th) { + th.setAttribute('scope', 'col') + }) + + // Fix de la légende / titre du tableau. figcaption n'est pas supporté : https://accessibilite.numerique.gouv.fr/methode/glossaire/#tableau-de-donnees-ayant-un-titre + if (legend) { + const caption = document.createElement('caption') + caption.className = legend.className + caption.innerHTML = legend.innerHTML + table.insertBefore(caption, table.firstChild) + legend.remove() + } + } + + // Tableau de mise en forme + if (!thead) { + table.setAttribute('role', 'presentation') + } + } +} + +// ---- +// init +// ---- +TableBlock.init('.wp-block-table') + +// ---- +// export +// ---- +export default TableBlock diff --git a/src/js/index.js b/src/js/index.js index 64b490f0..65f0ae53 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -3,3 +3,4 @@ import './classes/ButtonSeoClick' import './classes/Header' import './classes/Animation' import './classes/ImageBlock' +import './classes/TableBlock' diff --git a/src/scss/06-blocks/core/_table.scss b/src/scss/06-blocks/core/_table.scss index 767bc828..88d7c81d 100644 --- a/src/scss/06-blocks/core/_table.scss +++ b/src/scss/06-blocks/core/_table.scss @@ -4,10 +4,26 @@ width: 100%; min-width: 240px; border-collapse: collapse; + + th { + font-weight: 700; + } + + figcaption, + caption { + margin-bottom: var(--spacing--block-1); + font-size: var(--paragraph--font-size-default); + font-weight: 700; + line-height: var(--paragraph--line-height-default); + text-align: left; + } } .wp-block-table { @extend %table; + display: flex; + flex-direction: column-reverse; + align-items: flex-start; } // Not apply style to ACF fields From 9b7dc4a09f06ca284997cd86bdf4b177e662c2f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= Date: Fri, 18 Jul 2025 09:56:08 +0200 Subject: [PATCH 2/4] fix innerhtml --- src/js/classes/TableBlock.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/classes/TableBlock.js b/src/js/classes/TableBlock.js index af38c824..c3948b0d 100644 --- a/src/js/classes/TableBlock.js +++ b/src/js/classes/TableBlock.js @@ -30,7 +30,7 @@ class TableBlock extends AbstractDomElement { if (legend) { const caption = document.createElement('caption') caption.className = legend.className - caption.innerHTML = legend.innerHTML + caption.textContent = legend.textContent table.insertBefore(caption, table.firstChild) legend.remove() } From fabc928ffeeeb201399e65dc1981e361701dea54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= Date: Wed, 5 Nov 2025 10:33:20 +0100 Subject: [PATCH 3/4] fix table block, remove caption replace --- src/js/classes/TableBlock.js | 63 ++++++++++++----------------- src/scss/06-blocks/core/_table.scss | 12 ------ 2 files changed, 26 insertions(+), 49 deletions(-) diff --git a/src/js/classes/TableBlock.js b/src/js/classes/TableBlock.js index c3948b0d..0412e571 100644 --- a/src/js/classes/TableBlock.js +++ b/src/js/classes/TableBlock.js @@ -1,46 +1,35 @@ import AbstractDomElement from './AbstractDomElement' -import each from '../utils/each' // ---- // class // ---- class TableBlock extends AbstractDomElement { - constructor(element, options) { - const instance = super(element, options) - - // avoid double init : - if (!instance.isNewInstance()) { - return instance - } - - const el = this._element - const table = el.querySelector('table') - const thead = table.querySelector('thead') - const legend = el.querySelector('figcaption') - - // Tableau de données - if (thead) { - const ths = thead.querySelectorAll('th') - - each(ths, function (th) { - th.setAttribute('scope', 'col') - }) - - // Fix de la légende / titre du tableau. figcaption n'est pas supporté : https://accessibilite.numerique.gouv.fr/methode/glossaire/#tableau-de-donnees-ayant-un-titre - if (legend) { - const caption = document.createElement('caption') - caption.className = legend.className - caption.textContent = legend.textContent - table.insertBefore(caption, table.firstChild) - legend.remove() - } - } - - // Tableau de mise en forme - if (!thead) { - table.setAttribute('role', 'presentation') - } - } + constructor(element, options) { + const instance = super(element, options) + + // avoid double init : + if (!instance.isNewInstance()) { + return instance + } + + const el = this._element + const table = el.querySelector('table') + const thead = table.querySelector('thead') + + // Tableau de données + if (thead) { + const ths = thead.querySelectorAll('th') + + ths.forEach((th) => { + th.setAttribute('scope', 'col') + }) + } + + // Tableau de mise en forme + if (!thead) { + table.setAttribute('role', 'presentation') + } + } } // ---- diff --git a/src/scss/06-blocks/core/_table.scss b/src/scss/06-blocks/core/_table.scss index 88d7c81d..7e5f297d 100644 --- a/src/scss/06-blocks/core/_table.scss +++ b/src/scss/06-blocks/core/_table.scss @@ -8,22 +8,10 @@ th { font-weight: 700; } - - figcaption, - caption { - margin-bottom: var(--spacing--block-1); - font-size: var(--paragraph--font-size-default); - font-weight: 700; - line-height: var(--paragraph--line-height-default); - text-align: left; - } } .wp-block-table { @extend %table; - display: flex; - flex-direction: column-reverse; - align-items: flex-start; } // Not apply style to ACF fields From 851f3d298650567bccd30831ec1b2391e2036226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= Date: Wed, 5 Nov 2025 10:51:22 +0100 Subject: [PATCH 4/4] fix table block, remove role attribute --- src/js/classes/TableBlock.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/js/classes/TableBlock.js b/src/js/classes/TableBlock.js index 0412e571..3aa98ba8 100644 --- a/src/js/classes/TableBlock.js +++ b/src/js/classes/TableBlock.js @@ -24,11 +24,6 @@ class TableBlock extends AbstractDomElement { th.setAttribute('scope', 'col') }) } - - // Tableau de mise en forme - if (!thead) { - table.setAttribute('role', 'presentation') - } } }