Lists in json source cause HTML problems with `<p>` wrapping

Where to find the issue

Pages on https://www.coronawarn.app/ generated from json source containing lists <ul> or <ol>.

Describe the issue

When a <ul> (unordered list) or an <ol> (ordered list) is included in a json source file for the cwa-website, the default conversion to html wraps the list in paragraph <p> ... </p> tags which makes it invalid HTML.

See for instance https://stackoverflow.com/questions/7168723/unordered-list-in-a-paragraph-element. A paragraph <p> is allowed to contain phrasing content. <ul> and <ol> do not belong to the category of phrasing content.

Steps to reproduce

Run https://validator.w3.org on https://www.coronawarn.app/en/ and note error:

• “No p element in scope but a p end tag seen”

This is due to the following source. I have added new lines for readability:

<p>
<ol>
<li>Download the current version of the app (iOS: 2.28.0 or Android: 2.28.3)</li><li>Keep operating systems up-to-date (at least iOS 12.5 or iOS 13.5 depending on your iPhone model or at least Android 6 with current Google Play services)</li>
<li><a href='faq/results/#background_updates'>Keep background updates switched on and check them regularly</a></li>
<li>To be on the safe side, open the app once a day</li>
</ol>
</p>

This is a simple example from the main page. More importantly it is also a problem in the FAQs on https://www.coronawarn.app/en/faq/results/.

Analysis

In the example, the source link is from:

https://github.com/corona-warn-app/cwa-website/blob/4157d4b0b2cd1b4780ae3eeb9982f5eec6939e62/src/data/index.json#L46-L48

which is processed by the following and this wraps the list incorrectly in <p> ... </p>

https://github.com/corona-warn-app/cwa-website/blob/4157d4b0b2cd1b4780ae3eeb9982f5eec6939e62/src/partials/text-component.html#L12-L14

Suggestion

Some way needs to be found to prevent lists in the middle of textblocks being wrapped in <p> ... </p> so that the generated HTML is correct.

A special case (linkList) was already implemented for lists of internal URLs in FAQs. See https://github.com/corona-warn-app/cwa-website/blob/4157d4b0b2cd1b4780ae3eeb9982f5eec6939e62/src/partials/page-faq-results.html#L95-L106

Perhaps this could be made more generic?

---

Internal Tracking ID: EXPOSUREAPP-14392

[brianebeling]

After a review of this issue it seems unlikely that it causes unwanted behaviour, considering there are other places where there is no visible change, but with the structure we want and also a small test showed no difference in Chrome. That was not on the full scale of this issue though.

This might turn out to be a bit time consuming, we will keep it on the backlog till the priorities are a bit clearer as its not breaking any functionality. Pull Requests are welcome of course.

[brianebeling]

I think this is actually an issue. We should try to keep the relevant information here, so you don’t have to search for it. Something more generic like “Which HTML issues should we prioritize” would be a good topic for a discussion. In this case we have something specific that is actionable though, so relevant information should also go here.