Card, mauvais type sur la propriété desc ?

[vmaubert]

👋
Le composant Card a une desc de type ReactNode.

Dans l'implémentation de ce composant, on utilise desc de cette façon :

{desc !== undefined && (
    <p className={cx(fr.cx("fr-card__desc"), classes.desc)}>{desc}</p>
)}

Le problème c'est que dans la balise <p> nous n'avons pas le droit de mettre n'importe quoi.
cf https://www.w3.org/TR/html401/struct/text.html#h-9.3.1
=> « The P element represents a paragraph. It cannot contain block-level elements (including P itself). »

Est-ce que c'est voulu ? Actuellement, nous utilisons ce composant sur notre projet, avec des <span> dans la description. Cela nous génère des warnings dans le console du navigateur.
Je vois 2 solutions :
1 - Le typage n'est pas bon et il faut passer desc en string (breaking change).
2 - Overrider le <p> quand le type est ReactNode

J'ai aperçu d'autres <p> sur ce composant, donc d'autres propriétés sont surement concernées par ce problème.

Merci d'avance.

PS: Je suis dispo pour faire la PR, je ne suis juste pas certain de quelle solution mettre en place.

[enguerranws]

De mémoire, la description était voulu par le DSFR en <p>, pour éviter justement de trop abuser sur le contenu des cartes.
Le typage reste bon, on peut passer un ReactNode, mais pas de n'importe quelle nature :

<>
  Ma desc avec un <a href="https://www.monlien.fr">lien</a>
</>

Ça c'est ok.

Mais pas ça :

<div>
  Ma desc avec un <a href="https://www.monlien.fr">lien</a>
</div>

(d'ailleurs, ça ça n'est pas valide niveau W3C tout court)

C'est contraignant, mais justement, ça permet de garder des représentations de cartes cohérentes d'un projet à l'autre et éviter de trop gros écarts.

[garronej]

Oui, tout element inline (<a/>, <span />, <button /> peut être utiliser dans un paragraphe. Il faut juste utiliser un fragment comme l'a bien fait remarquer @enguerranws.