Changed divs to buttons, moved click events, alter css

Author: RyanBirtch-aot

app/frontend/src/components/forms/submission/NotesPanel.vue

@@ -86,10 +86,13 @@ defineExpose({ addNote, getNotes, loading, newNote, notes, showNoteField });
     <div
       class="d-flex flex-md-row justify-space-between"
       data-test="showNotesPanel"
-      @click="showNotesContent = !showNotesContent"
     >
       <div cols="12" sm="6">
-        <h2 class="note-heading" :lang="locale">
+        <button
+          class="note-heading"
+          :lang="locale"
+          @click="showNotesContent = !showNotesContent"
+        >
           {{ $t('trans.notesPanel.notes') }}
           <v-icon>{{
             showNotesContent
@@ -98,7 +101,7 @@ defineExpose({ addNote, getNotes, loading, newNote, notes, showNoteField });
               ? 'mdi:mdi-chevron-left'
               : 'mdi:mdi-chevron-right'
           }}</v-icon>
-        </h2>
+        </button>
       </div>
 
       <div :class="[{ 'text-left': isRTL }, 'd-flex', 'align-items-center']">
@@ -197,6 +200,8 @@ defineExpose({ addNote, getNotes, loading, newNote, notes, showNoteField });
 .note-heading {
   color: #003366;
   margin-bottom: 0;
+  font-size: 27px;
+  font-weight: 700;
   .v-icon {
     transition: transform 0.3s ease;
   }

app/frontend/src/components/forms/submission/StatusPanel.vue

@@ -376,12 +376,13 @@ defineExpose({
 
 <template>
   <div :class="{ 'dir-rtl': isRTL }">
-    <div
-      class="flex-container"
-      data-test="showStatusPanel"
-      @click="showStatusContent = !showStatusContent"
-    >
-      <h2 class="status-heading" :class="{ 'dir-rtl': isRTL }" :lang="locale">
+    <div class="flex-container" data-test="showStatusPanel">
+      <button
+        class="status-heading"
+        :class="{ 'dir-rtl': isRTL }"
+        :lang="locale"
+        @click="showStatusContent = !showStatusContent"
+      >
         {{ $t('trans.formSubmission.status') }}
         <v-icon>{{
           showStatusContent
@@ -390,7 +391,7 @@ defineExpose({
             ? 'mdi:mdi-chevron-left'
             : 'mdi:mdi-chevron-right'
         }}</v-icon>
-      </h2>
+      </button>
       <!-- Show <p> here for screens greater than 959px  -->
       <p class="hide-on-narrow" :lang="locale">
         <span :class="isRTL ? 'status-details-rtl' : 'status-details'">
@@ -665,6 +666,8 @@ defineExpose({
 .status-heading {
   color: #003366;
   margin-bottom: 0;
+  font-size: 27px;
+  font-weight: 700;
   .v-icon {
     transition: transform 0.3s ease;
   }