FAQ accordion card HTML, CSS (Sass), Bootstrap 5, Vanilla JavaScript

Hi, hope you had fun on this project !

The accordeon part works well but I can see 2 little design/display problems. 1- Layout between 900px --> 1150px looks a bit off as the all accordeon block goes really big in height / width. You should probably work a bit more on limiting the maximum sizes.

2- The orange box image moves out of it position when a quote/answer block is opened.

Great job and hope my feedback can help you improve this !

Hello! How's it going? You did an excellent job!

Here is some quick feedback to you. Since I am not a big fan of plain CSS or SCSS I won't help you there sorry :'( Instead I will help you out with the Accordion implementation.

• Accordion Button should be nested inside of a heading or an element with role set to heading and an appropiate aria-level, and it should be the only child element. Something like this:

<h2>
   <button> Your Accordion Item Title Here! </button>
</h2>
<div role="heading" aria-level="2">
   <button> Your Accordion Item Title Here! </button>
</div>

• Accordion Button should always have aria-expanded set to true (panel is visible) or false (panel is not visible).

• Each Accordion Button and its related Accordion Panel should be linked to each other: the button should have aria-controls set to the id of the Accordion Panel (when the Panel is visible) and the Panel might have aria-labelledby pointing to the button id. Something like this:

<h2>
  <button id="button-1" aria-controls="panel-1"> Accordion Button </button>
</h2>
 <div id="panel 1" aria-labelledby="button-1">
  Accordion Panel
 </div>

• An Accordion may implement navigation using the vertical keyboard arrows (ArrowUp - ArrowDown). This is optional.

I recommend looking at the WAI-ARIA Authoring Practices. It explains all the behaviour and accessibility you need to build cool HTML patterns like accordions, dialogs, menus, tabs, etc.

Hope this helps you. Keep working on your projects and have fun. Best wishes!