Accordions

Our accordions are modeled after Bootstrap accordions, with modifications for accessibility (including a larger hit-state, open/close icons, and right-to-left support).

For screen readers, role="heading" and aria-level="x" attributes are present on the span tag with class="title". In this way, we avoid using headers, which alter the flow of the document.

In the example below, Bootstrap's header class h4 is applied to the <a> tag, while <span class="title"> has role="heading" and aria-level="3" attributes for screen readers.

                                
                                    <div class="accordion-group my-3" role="tablist" id="accordion-01">

                                        <div class="card">

                                            <a class="card-header h4 collapse collapsed" id="acc-button-01" data-toggle="collapse" href="#panel-acc-button-01"  role="tab" aria-expanded="false" aria-controls="panel-acc-button-01">
                                                <span class="title" role="heading" aria-level="3">Accordion Title</span>
                                            </a>

                                            <div class="collapse" id="panel-acc-button-01" role="tabpanel" aria-labelledby="acc-button-01" data-parent="#accordion-01">

                                                <div class="card-body">
                                                    <p>
                                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore debitis provident natus, unde fugit
                                                        voluptatibus quia molestias odit deleniti, maxime tempora quod magni sit praesentium ipsam neque
                                                        consequatur voluptates.
                                                    </p>
                                                </div>

                                            </div>
                                            <!-- .collapse -->

                                        </div>
                                        <!-- .card (end of first accordion, repeat as needed) -->

                                    </div>
                                
                            

Accordions an be customized in scss/_f-layout-elements.scss under J. Accordion and button toggle.