FAQ accordion

@danielmrz-dev Thanks Daniel! I tried that just now, and it does work, so I will keep that in mind!

@vanzasetia I had no idea about <details> and <summary>! That does make it very easy and is a very cool option, but how do I hide the triangle? I tried the CSS in this article, but it didn't work. In fact, I tried all kinds of CSS on the ::marker pseudo-element, but the only one that worked was changing its color to transparent and then setting a negative margin on the summary to position the text where the marker would be:

summary {
    margin-left: -1.25rem;
    width: calc(100% + 1.25rem) !important;
}

summary::marker {
    color: transparent;
}

But that seems kinda hacky.

Thank you for all the info though. I definitely have some studying up to do on accessibility.

@dannypoit

You can remove it by changing the display of the <summary>. By default, it has display: list-item.

You are welcome! 👍

@techyjc Thank you! I admittedly don't know much about supporting screen readers, so that is an area I need to study up!

@techyjc

Hi, John! First things first, what are you trying to suggest? Does the example that you give have anything to do with this project?

Then, why do you need to add role="contentinfo" to the <section>? Why don't you just use <footer>? Also, why do you need to add aria-label when there is already <h2> inside it?

In the first place, why do you use <section> element?

Hi @vanzasetia, Danny posted questions for the community with his completed challenge and my response was based on the question about accessibility. I was suggesting a possible next logical step might be to add support for screen readers.

While I understand your point regarding the heading tag contained within explaining the elements content. There is an exact example of this given by the W3c. I have included the code example from the W3c.

<section role='contentinfo' aria-label='Gibson Guitars'> <h2>Gibson Guitars</h2> <p>I want an SG but don’t want to take out a mortgage, Dear Abby.. got a problem</p> <p> More about my feelings of deprivation due to lack of antique Gibson guitars</p> </section>

From the document it indicated if you use a section element that will contain information relevant to the user then you should add the role and aria attributes to highlight these to the reader as a (landing zone). Otherwise if it's just needed as styling element then use a div instead.

I wasn't trying to be critical.. Just offering some suggestions..🙂 I also included the link in my original response to demonstrate how and why for reference.

@techyjc

I think your suggestions are not relevant to this.

Also, the link that you share is not reliable.

"It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C."

Another thing, the page is a very old document.

"This page was last modified on 24 July 2014, at 16:03."

For me, it is better not to use <section> since it is not needed in this case. It is also not the next step to make the page easier for screen reader users.

Also, highlighting a section without any good reasons is only going to add unnecessary noise for screen reader users.

Then, I recommend referring to a more updated resource: WebAIM: HTML Semantics and Accessibility Cheat Sheet.

About my questions, I want to make sure that I understand why you are suggesting that. That is why I was asking those questions to ensure that your suggestion is correct and relevant to this.

@vanzasetia Fair enough. Point taken. Didn't see the last modified on the page to be honest. Apologies.😬