FAQ accordion card

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Though I had to zoom out since you are using 1440px as the breakpoint for desktop which is too large for lots of users like me who are using 1366x768 traditional screen. The 1440px on the design does not mean it is the breakpoint, lowering it down would be really great because why would you show the mobile layout for a screen-size that is intended to be seen by desktop users right. The mobile layout looks good though.

  kens_visuals already gave great feedback on this one, just going to add some suggestions as well:

  • You should have not used h2 for the toggle @kens-visuals since by using it, the component will only be limited for mouse users and can't be toggled by other peripherals like keyboard. Instead, you should use button since interactive components needs to have interactive elements.

  <li>
    <button></button> # can use the "+" selector in css
    <p></p> # this is hidden
  </li>
  

  But using this approach will need you to use js to manipulate the button's aria-expanded attribute. Instead, use details tag for this one.

  • details tag are intended for screen-reader users and it is accessible from the start.
  • The dropdown-icon could use aria-hidden="true". In general, decorative images on a site could have use an extra aria-hidden="true" attribute so that they will be totally hidden for screen-reader alongside with the alt="".
  • Lastly, when you are hiding something, using opacity or height is not enough since it will only hide the element visually but it will still be picked by up the system. Using either display or visibility will make it work properly.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Logan Willaumez•160

  @LoganWillaumezPosted about 3 years ago

  Hey @pikamart !

  Thanks for your response :D. Your solution seem to be the proper way to do this, but I have a little problem ;

  ---

  • I tried to rework my code for incorporate <details> tag, but it break my animation. I recreated it with @keyframe animation, but I did'nt find a way for the "return animation" when <details> is :not[open]. I did some research and it appears it's because <details> tag hides its content programmatically.

  • I found one article explaining me how to do this with javascript, but I have a question : It's not more complicated or "time consuming" regarding of the benefit of using details for a smooth animation [open] - :not[open]? (I'm a beginner, maybe the right answer is do it with more javascript, it's more proper and optimised)

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @LoganWillaumez Hey glad that you found it useful.

  Yes, details is not really animatable at the moment, just one con when using it.

  Though if you don't want to use details tag, you can use button. have a look at this simple snippet that I created

  Marked as helpful

  1

  

  Logan Willaumez•160

  @LoganWillaumezPosted about 3 years ago

  @pikamart Ok it's good to know :D !

  Thanks for your tips, I'll correct it asap 😁

  Have a nice day !

  1
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @LoganWillaumez 👋🏻

  I have some suggestions to help you fix the accessibility and HTML issues.

  • In your markup, <div class="container">...</div> should be <main class="container">...</main> and this will fix the accessibility issues.
  • For the box icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here.

  <img src="images/illustration-box-desktop.svg" alt="" aria-hidden="true” class="box">
  

  • Since you chose to use <section>s, and they have to have a heading, I suggest replacing <p> tags of .faqtitle to <h2>. This will fix the HTML issues.

  I hope this was helpful 👨🏻‍💻 Don't forget to generate a new repot once you fix the issues. Other than that, you did a pixel perfect job, nice touch on animations. Cheers 👾

  Marked as helpful

  1

  ---

  

  Logan Willaumez•160

  @LoganWillaumezPosted about 3 years ago

  Hey @kens-visuals !

  Thanks for your feedbacks, I don't knew about aria-hidden property, it's cool to know :)

  No more problem about accessibility with your tips :D !

  Have a good day

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @LoganWillaumez, you're welcome 😇

  0