Fix accessibility for table block

Author: cedric07

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

src/js/index.js

@@ -5,3 +5,4 @@ import './classes/ButtonSeoClick'
 import './classes/Header'
 import './classes/Animation'
 import './classes/ImageBlock'
+import './classes/TableBlock'

src/scss/06-blocks/core/_table.scss

@@ -2,10 +2,27 @@
     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