✨(frontend) fix rgaa 1.9.1: convert to figure/figcaption structure if…

[Ovgodd]

Purpose

Improve accessibility and semantic HTML by applying the appropriate structure when captions are present, to comply with RGAA 1.9.1.

issue : 1074

Proposal

• Detect if a caption exists in the component/template
• Place the caption inside a figcaption tag
• Wrap media elements in a figure tag
• Place the caption inside a figcaption tag

[github-actions]

Size Change: +214 B (+0.01%)

Total Size: 3.65 MB

Filename	Size	Change
apps/impress/out/_next/static/fa80b17a/_buildManifest.js	0 B	-865 B (removed)	🏆
apps/impress/out/_next/static/b64167df/_buildManifest.js	866 B	+866 B (new file)	🆕

_{compressed-size-action}

[AntoLC]

figure has a margin by default:

[Ovgodd]

good catch, I fixed it:

[AntoLC]

This double if on block.props.caption can maybe be improved a bit ?

const withCaption = block.props.caption && dom.querySelector('.bn-file-caption');

return (withCaption) ? accessibleImageWithCaption() : accessibleImage();

[Ovgodd]

Yes very good idea 💯

[AntoLC]

Suggested change

	`Image: ${figcaptionElement.textContent}`,
	t(`Image: {{title}}`, {title: figcaptionElement.textContent}),

[AntoLC]

You can add all this part in this function as well:

docs/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/AccessibleImageBlock.tsx

Lines 49 to 92 in 0ab6394

	if (block.props.caption) {
	const captionElement = dom.querySelector('.bn-file-caption');
	if (captionElement) {
	const figureElement = document.createElement('figure');
	// Copy all attributes from the original div
	figureElement.className = dom.className;
	const styleAttr = dom.getAttribute('style');
	if (styleAttr) {
	figureElement.setAttribute('style', styleAttr);
	}
	figureElement.style.setProperty('margin', '0');
	Array.from(dom.children).forEach((child) => {
	figureElement.appendChild(child.cloneNode(true));
	});
	// Replace the <p> caption with <figcaption>
	const figcaptionElement = document.createElement('figcaption');
	const originalCaption = figureElement.querySelector('.bn-file-caption');
	if (originalCaption) {
	figcaptionElement.className = originalCaption.className;
	figcaptionElement.textContent = originalCaption.textContent;
	originalCaption.parentNode?.replaceChild(
	figcaptionElement,
	originalCaption,
	);
	// Add explicit role and aria-label for better screen reader support
	figureElement.setAttribute('role', 'img');
	figureElement.setAttribute(
	'aria-label',
	t(`Image: {{title}}`, { title: figcaptionElement.textContent }),
	);
	}
	// Return the figure element as the new dom
	return {
	...imageRenderComputed,
	dom: figureElement,
	};
	}
	}