diff --git a/src/js/classes/ImageBlock.js b/src/js/classes/ImageBlock.js new file mode 100644 index 00000000..f0033771 --- /dev/null +++ b/src/js/classes/ImageBlock.js @@ -0,0 +1,32 @@ +import AbstractDomElement from './AbstractDomElement' + +// ---- +// class +// ---- +class ImageBlock extends AbstractDomElement { + constructor(element, options) { + const instance = super(element, options) + + // avoid double init : + if (!instance.isNewInstance()) { + return instance + } + + const el = this._element + const figure = el.closest('.wp-block-image') + + // Add role="figure" and aria-label with the figure text to comply with RGAA criteria 1.9.1 : https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.9 + figure.setAttribute('role', 'figure') + figure.setAttribute('aria-label', el.textContent) + } +} + +// ---- +// init +// ---- +ImageBlock.init('.wp-block-image figcaption') + +// ---- +// export +// ---- +export default ImageBlock diff --git a/src/js/index.js b/src/js/index.js index 8de4735e..7a6f043e 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -4,3 +4,4 @@ import './classes/ScrollDirection' import './classes/ButtonSeoClick' import './classes/Header' import './classes/Animation' +import './classes/ImageBlock'