fix: 🐛 DsfrCallout description critere 8.9 RGAA 4.1.2 NC #981
Conversation
✅ Deploy Preview for vue-dsfr-demo ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| <div | ||
| v-if="$slots.default" | ||
| :class="['fr-callout__default', { 'fr-callout__text': !content }]" | ||
| > | ||
| <slot /> | ||
| </div> |
There was a problem hiding this comment.
Pourquoi cette classe fr-callout__default ?
There was a problem hiding this comment.
C'était pour cibler le wrapper du slot default, si on est en contenu additionnel pur
There was a problem hiding this comment.
Ça me gêne d’utiliser un nom de classe qui fait penser qu’elle existe dans le CSS du DSFR alors que ce n’est pas le cas.
There was a problem hiding this comment.
Je comprends j'étais moi-même peu convaincu, c'était pour eviter d'avoir une div sans attribut qui fait tâche ou une condition un peu capillotracté du style :
<div
v-if="$slots.default && !content"
class="'fr-callout__text"
>
<slot />
</div>
<slot v-else />
Quoi que c'est pas si terrible finalement
There was a problem hiding this comment.
Oui, je préfère cette solution avec le v-if="$slots.default && !content"
|
Il faut partir de |
MaitreManuel
force-pushed
the
dsfr-callout-default-slot-vs-text
branch
from
0176363 to
feff7a7
Compare
👷 Deploy request for vue-dsfr pending review.Visit the deploys page to approve it
|
✅ Deploy Preview for docs-vue-dsfr ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
MaitreManuel
force-pushed
the
dsfr-callout-default-slot-vs-text
branch
from
feff7a7 to
2064d39
Compare
✅ Deploy Preview for demo-vue-dsfr ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
C'est tout bon, fait à l'instant |
|
🎉 This PR is included in version 7.2.0 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
Bonjour à tous,
Une petite modification du DsfrCallout car on a eu une NC sur le critère 8.9 RGAA et ça nous a posé reflexion.
Dans notre cas, nous utilisons le slot par default pour la description obligatoire et nous n'utilisons pas la props
content.Sauf que dans votre implémentation cette description obligatoire se situe dans la balise
<p class="fr-callout__text">.On se retrouve de notre côté avec une balise vide qui remonte en NC.
Dans l'implémentation que je propose, on teste si
contentest défini, si oui, le comportement actuel est conservé, sinonfr-callout_textdevient une classe du wrapper duslotpar défaut.Et si on a et
props.contentet$slots.default, alors la balise p sera la détentrice dufr-callout_textpour la description, et le slot par défault un simple contenu additionnel.Au final, on respecte les spécifications DSFR du composant "Mise en avant" et on ne remonte pas de NC RGAA.
Merci pour votre lecture !