Styling changes:

- move `usa-accordion` class to wrap all accordion elements
- remove background color form `accordion` class and move it to atat
specific class `accordion__header`
- create class names for styling elements instead of relying on element
type

styles/elements/_accordions.scss

@@ -2,13 +2,12 @@
   @include shadow-panel;
   margin: $gap * 3 0;
   max-width: $max-panel-width;
-  background-color: $color-white;
 
   &__header {
     padding: $gap * 2 $gap * 3;
+    background-color: $color-white;
 
-    h3,
-    p {
+    &-text {
       margin: 0;
     }
   }

templates/applications/index.html

@@ -32,17 +32,18 @@
     ) }}
 
   {% else %}
+    <div class="usa-accordion">
       {% for application in portfolio.applications|sort(attribute='name') %}
         {% set section_name = "application-{}".format(application.id) %}
         {% set title = "Environments ({})".format(application.environments|length) %}
           <div class="accordion">
             <div class="accordion__header">
-            <h3>
+              <h3 class="accordion__header-text">
                 <a href='{{ url_for("applications.settings", application_id=application.id) }}'>
                   {{ application.name }} {{ Icon("caret_right", classes="icon--tiny icon--primary") }}
                 </a>
               </h3>
-            <p>
+              <p class="accordion__header-text">
                 {{ application.description }}
               </p>
             </div>
@@ -75,6 +76,7 @@
           {% endcall %}
         </div>
       {% endfor %}
+    </div>
   {% endif %}
 
 </div>

templates/components/accordion.html

@@ -8,7 +8,7 @@
   content_tag="div",
   content_classes="") %}
   <accordion v-cloak inline-template>
-    <{{wrapper_tag}} class="usa-accordion {{ wrapper_classes }}">
+    <{{wrapper_tag}} class="{{ wrapper_classes }}">
       <{{heading_tag}} class="accordion__button {{ heading_classes }}">
         <button
           v-on:click="toggle($event)"

templates/task_orders/index.html

@@ -14,7 +14,7 @@
 
 {% macro TaskOrderList(task_orders, status) %}
   {% set status = "All Task Orders" %}
-  <div class="accordion">
+  <div class="accordion usa-accordion">
     {% call Accordion(title=status, id=status, heading_tag="h4") %}
       {% for task_order in task_orders %}
         <div class="accordion__content--list-item">