GX2018: interactive element inside a link or a button

Cause#

HTML does not allow an interactive element inside a link or a button. A click then has two targets, and a keyboard user cannot reach the inner one in each browser. For a link inside a link, the parser of the browser ends the first link.

Example#

package card

<a href="/products/7" class="card">
  <h3>Tea</h3>
  <button type="button">Add to cart</button>
</a>

gx check reports:

card/Card.gx:5:3: GX2018: the <button> is inside a <a>: an interactive element cannot hold a second one

Fix#

1. Move the inner element out of the link or the button.
2. For a card with a main link and a button, make the card a div. Put the link around the title only.