parent-with-a-foreign-child

This fails the run. Where it is wrong about your code, // ramonda-check-ignore <reason> on the line says so, and the reason is printed on every run.

Reported when a container whose children are fixed by the content model holds a tag that is not one of them.

The framework reports the same fault while running, as RMD028 — but only once the line actually runs. This is the same fault proved from the source instead.

A list is not styling, it is a COUNT. Assistive technology announces "list, 5 items" and offers a way to step through them, and it works that count out from the <li> children. A stray element in between breaks the run — some readers announce the wrong number, some end the list early and start a second one — and a reader told there are three items where there are seven is worse off than one told nothing.

<table> and <select> are stricter again: the parser MOVES a foreign child out of the element, so the tree the browser builds is not the tree in the source. Hydration then reports that as RMD007, a server/client mismatch, and sends you looking for a clock or a random number that is not there.

Put the wrapper INSIDE the item rather than around it:

<li>
  <div className="row">…</div>
</li>

Nobody writes this on purpose. It arrives when a row gets wrapped for layout, or a tooltip is put around one, and nothing on screen changes — the CSS was on the row all along.

Next

• All rules — the other checks this one runs beside.
• Checking your app — how to run it, and what it proves.