Responsive Accordion Card Component Utilizing JavaScript

👋Hi There!

I have some feedback on this solution:

• Accessibility
  • The current HTML markup won't allow the users to navigate this website using keyboard (Tab and Enter).
  • Use summary and details tags, this will allow the users to interact with the accordion using keyboard. Not only that, assistive technology like screen reader or screen magnifier can tell the user that the accordion whether it is collapsed or expanded.
  • Any text content should be wrapped in a meaningful tag such as paragraph, heading, quote, etc. Wrapping text content only with div or span (meaningless elements) may not allow the screen reader to pronounce the text content.
  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technology such as screen readers or screen magnifiers ignore those images. In this case, all images are decorative only.
  • Use rem or sometimes em unit instead of px. Using px on border and box-shadow will not allow them to scale.
• Non Accessibility
  • On 900px width, the card has full width and height. I would recommend adding padding to the body element to prevent that.
  • Comments in JavaScript should tell yourself or other developers "why" instead of "what is it doing?"
  • I would recommend writing code that is self-documenting, meaning instead of giving comment // Toggle Accordion, instead create a toggleAccordion() function.

That's it! Hopefully this is helpful!