FAQs accordion

Community feedback

• 

  P

  Imre Bartis•60

  @imrebartisPosted 28 days ago

  @IbrahimMurad

  You're welcome!

  Reusable variables

  • I mean something like $spacing-sm: 1rem e.g.

  Hover color

  • The hover color in Figma I mentioned above is hsl(290deg 80% 53%)

  Project structure

  • The src folder should be in the root folder of your project. It would contain the index.html, the script.js and a styles folder containing the style files (style.sass, style.css and style.css.map)

  Let me know if you need any more clarifications!

  Marked as helpful

  1

  ---

  

  Ibrahim Morad•380

  @IbrahimMuradPosted 28 days ago

  @imrebartis Got it.

  Thanks. 🙏

  Really appreciated.

  1

  

  P

  Imre Bartis•60

  @imrebartisPosted 28 days ago

  @IbrahimMurad

  No problem!

  1
• 

  P

  Imre Bartis•60

  @imrebartisPosted 29 days ago

  User experience

  • When clicking on an .accordion__question the accordion item toggles, unless you happen to click somewhere between the .question open and the button. The cursor is a pointer even in places like this, so the user expects the accordion item to toggle in such cases
  • After clicking on a .question open you can't toggle the accordion item with Enter or Space. You can do that though if you have clicked on a button
  • If the user navigates by using Tab, it's only the buttons that get focused (and not both the .accordion__question and the button)

  Readme

  • Consider adding What I learned and Continued development sections

  HTML structure and accessibility

  • Neat usage of <picture> for handling responsive images
  • Good usage of semantic elements
  • Heading elements are not in a sequentially-descending order (h1 and h3 used instead of h1 and h2)
  • The aria-controls attributes have incorrect references (multiple buttons point to #answer2)
  • The accordion structure should be wrapped in e.g. a <section> with an area-label and a role="region"
  • The empty buttons have no aria-labelledby
  • Consider adding a <span class="sr-only">Toggle answer</span>inside of the empty buttons, for screen reader support
  • Consider adding role="banner" to the header
  • Consider making more descriptive the alt text of the background image
  • Consider adding keyboard shortcuts for navigating between accordions (up/down arrows), and add the keyboard navigation focus styles

  JavaScript

  • Consider adding keyboard support for Enter and Space

  Layout and styles

  • The hover color of the .question opens is different from the one in Figma
  • Mobile view styles are missing
  • Consider creating reusable variables for spacing

  Project Structure

  • Consider using a src folder

  Marked as helpful

  1

  ---

  

  Ibrahim Morad•380

  @IbrahimMuradPosted 29 days ago

  @imrebartis

  First: A huge thanks for your very detailed feedback.

  User Experience: I will fix all of these issues.

  HTML structure and accessibility: Many of these things I do not know about so, I am starting to look at them, and then update the What I learned and Continued development sections accordingly.

  Layout and styles: I am using the free plan, so I do not have the Figma files, I just completed the challenge by looking at the images, so there will be some details missing.

  I do not know what you mean by creating reusable variables for spacing, can you elaborate?

  Project Structure: Can you provide me the structure in your mind so that I can learn from it?

  Many THANKS

  0