FAQ accordion with Scss

Community feedback

• 

  Abdul Khaliq 🚀•72,360

  @0xabdulkhaliq

  Posted 12 months ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

  ---

  MAKING ACCESSIBLE ACCORDIONS 🔴 :

  • The best way to go with creating the accordion elements in this challenge would be with the details and summary elements instead of using plain div element with no semantic meaning.

  ---

  • They are already fairly accessible and provided a clean, semantic way to create accordion elements. I see you have used the div & p elements for the accordions, but those are not interactive or accessible by keyboard, so not all users will be able to open the accordions to see the content inside.

  ---

  • MDN's reference is a great place to start learning about the details and summary elements if you are interested.

  ---

  • If you have any questions or need further clarification, you can always check out my submission for legacy version of this challenge and/or feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  10

  Marked as helpful
• 

  Bernardo Poggioni•6,490

  @R3ygoski

  Posted 12 months ago

  Olá novamente Daniel, cá estou eu como sempre kkkk. Primeiramente, parabéns pelo projeto, e gostei dessa ideia de colocar o scroll no card ao invés de expandir ele.

  Sobre a melhora do JavaScript, sinceramente eu não vi áreas que precisam de ser melhoradas, mas notei uma coisa peculiar, que foi a forma que você nomeou uma das suas variáveis, que foi com um estilo bem similar ao BEM, que foi essa variável accordion__content, isso não está errado, mas não é uma boa prática, geralmente utilizamos o camelCase no JS, mas também pode ser usado o snake_case, mas independente de qual forma escolher, tente não alterar ela, se foi camelCase, faça todos em camelCase até o fim. Porque isso ajuda na manutenção e organização do código.

  Sobre o HTML, a única parte que eu vejo que realmente precisa de um ajuste, seria a parte da semântica do HTML. Como por exemplo: <div class="accordion__top-text"> poderia ser uma figure, e por aí vai.

  Sobre o CSS/Scss, pelo visto você pegou o jeito com sass, a única coisa que eu gostaria de falar aqui sobre isso é nesse trecho por exemplo (vale para semelhantes também):

  & p {
     /* Props omitidas */
  }
  

  Você não precisaria utilizar o parent selector(&), isso porque o p, já está dentro do escopo do seletor pai, então você poderia colocar só o p. Geralmente só vai colocar esse parent selector assim, quando você quer usar um operador, exemplos:

  • & > p -Que dessa forma você seleciona o filho direto do parent.
  • & ~ p -Que dessa forma você seleciona os irmãos do parent.

  E por aí vai.

  Novamente, parabéns pelo seu projeto, você está avançando muito bem, e principalmente parabéns pela sua lógica de JS que por mais que você esteja começando agora, ela está bem concisa e objetiva. Caso algo que eu tenha dito não tenha ficado claro, você já sabe.

  15

  Marked as helpful