Resolve "Accessing script feedback takes too many clicks and students generally don't realize there even is more feedback"

This feature mostly depends on UI preferences, however for accessibility I removed the accordion feature as it increased the amount of buttons students needed to press to view (script) feedback and instead displayed it all together like this:

I also changed which feedback is displayed first to script feedback (it used to be staff feedback) as students should see script feedback first before calling a TA to sign off their assignment (and consequently receiving staff feedback).

Closes #133 (closed)

src/main/resources/templates/submission/feedback.html

@@ -90,23 +90,23 @@
                 </th:block>
 
                 <div class="tabs" role="tablist" th:unless="${submission.scriptResults.isEmpty()}">
-                    <button
-                        role="tab"
-                        th:id="|staff-feedback-${submission.id}-tab|"
-                        type="button"
-                        aria-selected="true"
-                        th:aria-controls="|staff-feedback-${submission.id}|"
-                        th:text="#{submission.staff_feedback}"></button>
                     <button
                         role="tab"
                         th:id="|script-feedback-${submission.id}-tab|"
                         type="button"
-                        aria-selected="false"
+                        th:aria-selected="${submission.feedback.isEmpty()}"
                         th:aria-controls="|script-feedback-${submission.id}|"
                         th:text="#{submission.script_feedback}"></button>
+                    <button
+                        role="tab"
+                        th:id="|staff-feedback-${submission.id}-tab|"
+                        type="button"
+                        th:aria-selected="${!submission.feedback.isEmpty()}"
+                        th:aria-controls="|staff-feedback-${submission.id}|"
+                        th:text="#{submission.staff_feedback}"></button>
                 </div>
 
-                <div th:id="|staff-feedback-${submission.id}|" class="accordion">
+                <div th:id="|staff-feedback-${submission.id}|">
                     <div th:if="${submission.feedback.isEmpty()}">
                         <span th:text="#{submission.no_feedback}"></span>
                     </div>
@@ -125,16 +125,9 @@
                                     th:if="${feedback.gradeId}"
                                     th:text="${@gradeService.getScoreDisplayString(grades[feedback.gradeId])}"></span>
                             </div>
-                            <div>
-                                <button
-                                    class="fa-solid fa-chevron-down"
-                                    type="button"
-                                    aria-expanded="false"
-                                    th:aria-controls="|staff-feedback-${feedback.id}|"></button>
-                            </div>
                         </div>
                         <div
-                            class="accordion__content pil-5 mb-3 flex vertical gap-2"
+                            class="pil-5 mb-3 flex vertical gap-2"
                             th:id="|staff-feedback-${feedback.id}|">
                             <p
                                 style="max-width: 80ch"
@@ -149,7 +142,7 @@
                     th:unless="${submission.scriptResults.isEmpty()}"
                     th:with="trainResult = ${submission.scriptResults[0]}"
                     hidden>
-                    <div class="accordion">
+                    <div>
                         <th:block th:each="wagonResult, iter : ${trainResult.subresults}">
                             <div class="accordion__header flex space-between pil-5 pbl-3">
                                 <div class="flex gap-3 align-center">
@@ -160,17 +153,10 @@
                                         th:if="${wagonResult.status.name() == 'DONE' and wagonResult.score != null}"
                                         th:text="${@gradeService.getScoreDisplayString(wagonResult.score, wagonResult.wagon.gradeScheme)}"></span>
                                 </div>
-                                <div>
-                                    <button
-                                        type="button"
-                                        aria-expanded="false"
-                                        th:aria-controls="|wagon-${wagonResult.wagon.id}|"
-                                        class="fa-solid fa-chevron-down"></button>
-                                </div>
                             </div>
 
                             <div
-                                class="accordion__content flex gap-3 vertical mb-3"
+                                class="flex gap-3 vertical mb-3"
                                 th:id="|wagon-${wagonResult.wagon.id}|">
                                 <div
                                     th:each="scriptResult : ${wagonResult.subresults}"