Sharing modal generates nested <p>elements

[Ldoppea]

When opening a sharing modal, recipients list uses a <Typography> component that generated nested <p> elements in DOM.

Nested <p> elements can be rendered but this does not produce a HTML document that is not conform with W3C specifications. A <p> element should contain only phrasing content : http://dev.w3.org/html5/spec/single-page.html#phrasing-content

This bug may be related to cozy-ui but the documentation seems not to have this problem: https://docs.cozy.io/cozy-ui/react/#!/Typography

Rendered component:

Generated DOM:

Error displayed in dev mode:

Code responsible for this component :

cozy-libs/packages/cozy-sharing/src/components/Recipient.jsx

Lines 298 to 321 in 9f463ef

	const Recipient = props => {
	const { t } = useI18n()
	const client = useClient()
	const { instance, isOwner, status, ...rest } = props
	const isMe =
	(isOwner && status === 'owner') || instance === client.options.uri
	const defaultDisplayName = t(DEFAULT_DISPLAY_NAME)
	const name = getDisplayName(rest, defaultDisplayName)
	return (
	<CompositeRow
	dense
	className={cx(styles['recipient'], 'u-ph-0')}
	primaryText={
	<Typography className="u-ellipsis" variant="body1">
	{isMe ? t('Share.recipients.you') : name}
	</Typography>
	}
	secondaryText={<Status status={status} isMe={isMe} instance={instance} />}
	image={<RecipientAvatar recipient={props} />}
	right={<Permissions {...props} className="u-flex-shrink-0" />}
	/>
	)
	}