Fix alignment of expand icon + make it accessible (#3917)

Fixes #3889

hypha/static_src/javascript/all-submissions-table.js

@@ -4,11 +4,12 @@
     let submission_arrow = document.createElement("span");
     submission_arrow.classList.add("arrow");
 
-    let submission_toggle = document.createElement("span");
+    let submission_toggle = document.createElement("button");
     submission_toggle.classList.add(
         "all-submissions-table__toggle",
         "js-toggle-submission"
     );
+    submission_toggle.setAttribute("title", "Show submission details");
     submission_toggle.appendChild(submission_arrow);
 
     // Add the toggle arrow before the submission titles.

hypha/static_src/sass/components/_all-submissions-table.scss

@@ -161,7 +161,6 @@
                     @include triangle(right, $color--primary, 6px);
                     position: relative;
                     display: inline-block;
-                    margin-inline-end: 10px;
                     transform: rotate(0);
                     transition: transform $transition;
 
@@ -245,7 +244,14 @@
     }
 
     &__toggle {
-        padding: 5px 0 5px 5px;
+        padding: 0.5em;
+        margin-top: -0.5em;
+        cursor: pointer;
+        vertical-align: top;
+
+        &:hover {
+            opacity: 0.7;
+        }
     }
 
     &__more {

hypha/static_src/sass/components/_table.scss

@@ -116,7 +116,7 @@
             }
 
             &.title {
-                padding-inline-start: 20px;
+                padding-inline-start: 0.5em;
             }
         }
     }