fix: wrap texts in paragraphs in blocks #2
Conversation
Texts that are a single paragraph are not wrapped in in block cells. This is a known issue and has yet to be fixed in the pipeline. It is semantically correct to wrap text in a .
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
scripts/aem.js
Outdated
| block.querySelectorAll(':scope > div > div').forEach((cell) => { | ||
| if (cell.textContent.trim()) { | ||
| const firstChild = cell.firstElementChild; | ||
| if (!firstChild || ['STRONG', 'EM', 'A'].includes(firstChild.tagName)) { |
There was a problem hiding this comment.
Should this include ol and ul tags as well?
There was a problem hiding this comment.
<ul> and <ol> are already block-level elements. I only included inline elements that do not have a block-level parent atm (and texts).
This is also the case for default content, e.g. https://main--hlx-1--buuhuu.hlx.page/
...
<h1 id="congrats-you-are-ready-to-go">Congrats,<br>you are ready to go!</h1>
<p><span class="icon icon-search"></span></p>
<p>Your forked repo is setup as a helix project and you are ready to start developing.<br>The content you are looking at
is served from this <a
href="https://drive.google.com/drive/folders/1MGzOt7ubUh3gu7zhZIPb7R7dyRzG371j?usp=sharing">gdrive</a><br><br>Adjust
the <code>fstab.yaml</code> to point to a folder either in your sharepoint or your gdrive that you shared with helix.
See the full tutorial here:<br><br><a href="https://bit.ly/3aImqUL">https://www.hlx.live/tutorial</a></p>
<ul>
<li>
<ul>
<li>
<ul>
<li>Sub list 2</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="columns">
...
The only exception I would make are <picture> elements which are inline as well, but have sufficient semantics already.
Strike that, we should also wrap <picture> to cover cases like text or links immediately following a picture.
Feature/header component
Currently the
<p>of text paragraphs in block cells are removed, which is semantically incorrect. This is a known issue in the helix-html-pipeline which has yet to be addressed. In the meantime, wrap any inline element (<a>,<strong>,<em>,<picture>,#text) in a<p>as part of the decoration phase. Skip h1-6 as those are already semantically correct.