Pour la FAQ, je propose l'ajustement CSS suivant :
.faq__item {
background: #ffffff;
border: 1px solid #ffffff;
border-radius: 0.5rem;
&::details-content {
opacity: 0;
transition:
opacity 600ms,
content-visibility 600ms allow-discrete;
}
&[open]::details-content {
opacity: 1;
}
}
.faq__question {
list-style: none;
&::after {
content: "+" / "";
font-size: 1.5rem;
font-weight: 400;
position: absolute;
right: 1.5rem;
transition: transform 0.3s ease;
}
[open] &::after {
content: "−" / "";
}
}
Plusieurs objectifs :
- Passer le + en - lorsque la réponse est visible
- Ne pas restituer vocalement le + et le -
- Proposition de correction de la transition introduite par cette règle " transition: transform 0.3s ease;" qui ne peut pas fonctionner en l'état. J'ai supposé un effet d'apparition en jouant sur l'opacité, mais ça reste une proposition sans rapport avec l'aspect accessibilité.
