Implement FAQ component

Working on this at Florida Drupal Camp!

Should we call this something generic like Accordion? FAQ seems like a use case rather than a name for the component. But I haven’t checked what is more common.

Should we call this something generic like Accordion

makes sense to me! Updating title

vasantha deepika → made their first commit to this issue’s fork.

I have created the Accordion component, but a few improvements are still needed. I am actively working on them.
Please review it and share your suggestions, as they would be very helpful.

Thanks!

Using the html element will negate the need for JavaScript to make the accordion work.

Here is a good blog about it.

https://developer.mozilla.org/en-US/blog/html-details-exclusive-accordions/

I assume there is some kind of component is that could be used for the unique name.

Thanks for the feedback Jim Birch!
I’ll review the approach using the element and update the component accordingly.

@grifstuf was working on this at FLDC (see the first comment). I know he had code written, but not sure why it's not pushed.

Pushed up what I had to a new branch here: feature/1.x-accordion-component

Added the design to the IS, note that I've removed the CTA link because this won't work well in XB currently, with the restricted width that we have. So for simplicity let's leave it out for now.

Wrong file! Actually updated now :)

Thank you for the new design update! I have updated the MR based on the new design. Additionally, @mherchel, I have used the element for the accordion.

Thanks @vasantha deepika! For future reference, if you'd like someone else to review your work, please change the issue status to "Needs review" -- that'll ensure that other eyes get on it. :)

@mherchel What do you think of the approach in:

https://developer.mozilla.org/en-US/blog/html-details-exclusive-accordions/

If not, I believe this is going to need JavaScript to work.

Did a quick review of the actual components and left comments. Note though the CSS also needs a review.

Thank you for the review! I'am currently looking into them and working on fixes.

I've addressed all the comments and updated the MR accordingly. Moving the issue for review. Let me know if any further changes are needed!

Assigning to @pameeela for review.

hi @rikki_iki,

I've reviewed all the commands you added in the Merge Request and resolved them accordingly. The MR has been updated and is now ready for review. Please let me know if any further changes are required.

Thanks!

This looks good to me today and all comments resolved. Marking as RTBC.

Overall this is looking good. There's a couple issues:

1. The content area within the accordion items should be a slot, since it will accept arbitrary markup (and possibly other components)
2. We should be using CSS nesting
3. Need to use CSS logical properties for proper RTL support

I'm in the DrupalCon contrib room right now, so going to work on this.

This should be good to go!

I tested this by using the following snippet in the page.html.twig

              {% embed 'drupal_cms_olivero:accordion' with {
                title: 'This is the main heading',
                description: 'This is a long description.This is a long description.This is a long description.This is a long description. ',
              } only %}
                {% block items %}
                  {% embed 'drupal_cms_olivero:accordion-item' with {
                    title: 'Accordion item headingAccordion item headingAccordion item headingAccordion item headingAccordion item heading',
                  } only %}
                    {% block accordion_content %}
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, veniam, sint facilis pariatur hic iste dignissimos rerum possimus, totam architecto qui quos molestiae incidunt voluptatibus fugiat omnis nihil rem eum!
                    {% endblock %}
                  {% endembed %}

                  {% embed 'drupal_cms_olivero:accordion-item' with {
                    title: 'Accordion item heading',
                  } only %}
                    {% block accordion_content %}
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, veniam, sint facilis pariatur hic iste dignissimos rerum possimus, totam architecto qui quos molestiae incidunt voluptatibus fugiat omnis nihil rem eum!
                    {% endblock %}
                  {% endembed %}

                  {% embed 'drupal_cms_olivero:accordion-item' with {
                    title: 'Accordion item heading',
                  } only %}
                    {% block accordion_content %}
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, veniam, sint facilis pariatur hic iste dignissimos rerum possimus, totam architecto qui quos molestiae incidunt voluptatibus fugiat omnis nihil rem eum!
                    {% endblock %}
                  {% endembed %}

                  {% embed 'drupal_cms_olivero:accordion-item' with {
                    title: 'Accordion item heading',
                  } only %}
                    {% block accordion_content %}
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, veniam, sint facilis pariatur hic iste dignissimos rerum possimus, totam architecto qui quos molestiae incidunt voluptatibus fugiat omnis nihil rem eum!
                    {% endblock %}
                  {% endembed %}

                {% endblock %}
              {% endembed %}

I think this is fine, I tested in my local and it works, although I had to tweak the example above a bit. In a future iteration it should be polished and CSS hardcoded values replaced by variables. I also tested with VoiceOver and elements are announced correctly.

Screenshot attached.

Added Atlanta2025 tag and parent issue like other component implementation issues.

@pdureau left some feedback at #3515766 📌 Create "statistics" component for Olivero in Drupal CMS Active that's also relevant for this component, I can help adjusting this component as well, let me know if I should work on this too.