fix(curriculum): expand clickable area in module card

[PolyDevil]

Fixes https://github.com/mdn/yari/issues/10734.

Problem

Half of the card is not clickable. While it may look like a card (clickable element) - in fact it is not.

Solution

In order to preserve the semantics and make entire card clickable - we make the card non-staticly positioned element and create a pseudo element inside the link that takes all the available space;

.parent {
  position: relative;
}

a::before {
  content: "";
  position: absolute;
  inset: 0;
}

[PolyDevil]

Thank you for this PR, @PolyDevil. 🙌

As per the pull request template, can you please also open an issue for the problem? Thanks!

Also, let's resolve the problem by wrapping the whole <li> content in the link, instead of just the <header> content, instead of the CSS workaround. 🙏

Wrapping li in a would destroy the semantics of the tags inside of a - so there is not point to use anything besides div and span. You would want to preserve the semantics AND to make entire card element clickable.

[PolyDevil]

https://github.com/mdn/yari/issues/10734 an issue

[fiji-flo]

Hi there, @caugner said wrapping the content of the <li> in an <a>:

Also, let's resolve the problem by wrapping the whole <li> content in the link, instead of just the <header> content, instead of the CSS workaround. 🙏

As <a> is a transparent regarding its content I'd very much vote for this solution. Would you mind changing your PR?

[github-actions[bot]]

This pull request has merge conflicts that must be resolved before it can be merged.

[caugner]

Thanks again for your PR, @PolyDevil.

The issue has meanwhile been resolved in https://github.com/mdn/yari/pull/10805.