FAQs accordion

Community feedback

• 

  P

  Imre Bartis•60

  @imrebartis

  Posted 4 months 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!

  12

  Marked as helpful
• 

  P

  Imre Bartis•60

  @imrebartis

  Posted 4 months 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

  11

  Marked as helpful