Responsive accordion layout; SCSS with BEM

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout looks great in desktop, it is responsive and the mobile state looks great as well.

  You already got some feedbacks on this, just going to add some small suggestions:

  • Do not use a tag for the accordion toggle since those are not links, use button instead because it is a control element for the accordion.
  • If you are going to use button don't forget to add a default aria-expanded="false" attribute on it, it will be set to true if the users toggles the button and vice-versa. This will let your users know that is has expanded something to be seen.
  • The dropdown svg should be hidden so add aria-hidden="true" on it. Remember to always hide decorative images.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  LEUILLIER•120

  @JulienLEUILLIERPosted about 3 years ago

  @pikamart Very nice of you to take the time ! Thank you, I will look all those up.

  1
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @JulienLEUILLIER 👋🏻

  I just have one small suggestion, I suggest adding aria-hidden to the box image, like this <img src="/images/illustration-box-desktop.svg" alt="" aria-hidden="true" class="hide-for-mobile card__box">. You can read more about aria-hidden here.

  I hope this was helpful 👨🏻‍💻 looks good on every viewport width size, well done. Cheers 👾

  Marked as helpful

  1

  ---

  

  LEUILLIER•120

  @JulienLEUILLIERPosted about 3 years ago

  @kens-visuals Thank you, will look that up ✌️

  0
• 

  Al-Baraa Bakri•330

  @Al-Baraa-BakriPosted about 3 years ago

  good job :) I just finished this challenge .. What About Add Some Transition ?

  1

  ---

  

  LEUILLIER•120

  @JulienLEUILLIERPosted about 3 years ago

  @Al-Baraa-Bakri Hi, thanks ! I saw your solution and it was a nice way of adding transition to the menus. I'm using display:none which can't be animated, I'll try another way later on, I think keyframes can work! I'll add some feedback on your solution as well.

  0