[upgrade]: Improve Testimonial Q&A

[AlexandreBillereau]

Feature Description

Improve Testimonial Q&A Component: Enhance SVG Arrow Animation

Description:

The current implementation of the SVG arrow in the Testimonial Q&A component uses a 180-degree rotation to indicate the expansion of a question. While functional, this approach results in a misalignment of the SVG when a question is opened, detracting from the overall user experience.

https://github.com/user-attachments/assets/01aaa4fa-a316-4f10-b082-7dc73d08a74d

Proposal:

• Replace the 180-degree rotation animation with a transition to a minus symbol ("-").
• For simplicity, the SVG will be replaced with elements.
• This change will provide a smoother visual effect and ensure the icon remains aligned when a question is opened.
• A significant part of this improvement will involve adjusting the CSS for the animation and alignment.

Acceptance Criteria:

• The arrow icon transitions smoothly to a minus symbol using elements when a question is expanded.
• The icon remains correctly aligned during and after the animation.
• The CSS is optimized to support the new animation without causing layout shifts or other visual issues.
• The component functions consistently across all supported browsers and devices.
• All existing tests pass.

Affected Component(s)

testimonial - Q&A

Additional Context

Additional details here...

Before Submitting

• [x] I've researched and searched the documentation
• [X] I've searched for existing issues and PRs

[damien-schneider]

Thank you very much for the issue. The issue is very interesting, and it is true that the alignment of the arrow is off when the answer is opened.

The advantage of the arrow is its accessibility; the UX is less accessible with just a minus icon. The suggestion is interesting and can serve as a variant if you find it worthwhile to develop. But I think to fix the existing variants, only modifying the top value when opened would be great from my point of view, such as adding group-open:top-10 or something close to this.

To summarize, I would suggest creating a variant with the minus icon and modifying the existing variants by adding group-open:top-.... what do you think about this ?