From cca390b87d718af1081c3b1d90bd214ceeb06a68 Mon Sep 17 00:00:00 2001
From: William Carr <bill@datakind.org>
Date: Fri, 17 Apr 2026 10:53:20 -0400
Subject: [PATCH 1/3] fix(a11y): add h1 headings for document outline
 compliance

---
 resources/css/app.css             | 4 ++++
 resources/js/Pages/Auth/Login.jsx | 2 +-
 resources/js/Pages/FileUpload.jsx | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index d5820681..013e63ef 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -17,6 +17,10 @@
         url('https://storage.googleapis.com/staging-sst-01-staging-static/HelveticaNeueRoman.woff') format('woff');
         font-weight: 400;
     }
+
+    h1 {
+        @apply text-5xl font-light text-black;
+    }
 }
 
 [x-cloak] {
diff --git a/resources/js/Pages/Auth/Login.jsx b/resources/js/Pages/Auth/Login.jsx
index ae504abf..e1ffb486 100644
--- a/resources/js/Pages/Auth/Login.jsx
+++ b/resources/js/Pages/Auth/Login.jsx
@@ -34,7 +34,7 @@ export default function Login({ canResetPassword, status }) {
             alt="Edvise Logo"
           />
 
-          <div className="pb-8 text-2xl">Welcome! Log in to get started:</div>
+          <h1 className="mb-6 text-2xl">Welcome! Log in to get started:</h1>
 
           <div className="mb-4 rounded-md border border-blue-200 bg-blue-50 p-3">
             <p className="text-sm text-blue-800">
diff --git a/resources/js/Pages/FileUpload.jsx b/resources/js/Pages/FileUpload.jsx
index b391ce01..b19669c4 100644
--- a/resources/js/Pages/FileUpload.jsx
+++ b/resources/js/Pages/FileUpload.jsx
@@ -772,7 +772,7 @@ export default function FileUpload() {
         className="mx-12 mb-12 flex w-full flex-col rounded-3xl bg-white p-8"
         id="main_area"
       >
-        <div className="text-center text-5xl font-light">Upload Data</div>
+        <h1 className="text-center text-5xl font-light">Upload Data</h1>
         <Steppers
           currentStep={currentStep}
           stepsDict={steps}

From 0ad3fe4448745aa7a625a4e40e19e1c99df183ed Mon Sep 17 00:00:00 2001
From: William Carr <bill@datakind.org>
Date: Fri, 17 Apr 2026 10:53:41 -0400
Subject: [PATCH 2/3] refactor: remove unused imports

---
 resources/js/Pages/FileUpload.jsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/resources/js/Pages/FileUpload.jsx b/resources/js/Pages/FileUpload.jsx
index b19669c4..0592a7c8 100644
--- a/resources/js/Pages/FileUpload.jsx
+++ b/resources/js/Pages/FileUpload.jsx
@@ -6,19 +6,14 @@ import {
   DocumentDuplicateIcon,
   TrashIcon,
   DocumentIcon,
-  CheckIcon,
   XMarkIcon,
-  PlusCircleIcon,
 } from '@heroicons/react/24/outline';
 import DangerAlert from '@/Components/DangerAlert';
-import SuccessAlert from '@/Components/SuccessAlert';
 import Steppers from '@/Components/Steppers';
 import classNames from 'classnames';
 import BigSuccessAlert from '@/Components/BigSuccessAlert';
 import ErrorAlert from '@/Components/ErrorAlert';
-import HeaderLabel from '@/Components/HeaderLabel';
 import Spinner from '@/Components/Spinner';
-import { set } from 'lodash';
 
 /** Keep in sync with BACKEND_HTTP_VALIDATE_TIMEOUT_SECONDS (seconds) on the Laravel proxy. */
 const VALIDATE_UPLOAD_TIMEOUT_MS = 300_000;

From 447f995eb5b290193a8fb4408cd76beb4cdff645 Mon Sep 17 00:00:00 2001
From: William Carr <bill@datakind.org>
Date: Fri, 17 Apr 2026 10:53:50 -0400
Subject: [PATCH 3/3] chore: format

---
 resources/js/Pages/Auth/Login.jsx |  4 ++--
 resources/js/Pages/FileUpload.jsx | 30 +++++++++++++++---------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/resources/js/Pages/Auth/Login.jsx b/resources/js/Pages/Auth/Login.jsx
index e1ffb486..ecff234c 100644
--- a/resources/js/Pages/Auth/Login.jsx
+++ b/resources/js/Pages/Auth/Login.jsx
@@ -26,7 +26,7 @@ export default function Login({ canResetPassword, status }) {
   return (
     <AuthLayout>
       <div className="layout:box-container landing-rounded-lg relative mx-auto w-3/4 bg-white pb-20 sm:pb-44">
-        <div className="mx-auto -mb-12 mt-12 w-full max-w-2xl p-4">
+        <div className="mx-auto mt-12 -mb-12 w-full max-w-2xl p-4">
           <Head title="login" />
           <img
             className="w-1/3 pb-12"
@@ -109,7 +109,7 @@ export default function Login({ canResetPassword, status }) {
               <div className="flex items-center justify-end">
                 <Link
                   href={route('password.request')}
-                  className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  className="rounded-md text-sm text-gray-600 underline hover:text-gray-900 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none"
                 >
                   Forgot your password?
                 </Link>
diff --git a/resources/js/Pages/FileUpload.jsx b/resources/js/Pages/FileUpload.jsx
index 0592a7c8..12fbbf0b 100644
--- a/resources/js/Pages/FileUpload.jsx
+++ b/resources/js/Pages/FileUpload.jsx
@@ -99,13 +99,13 @@ export default function FileUpload() {
       let msg =
         '[ERROR] Prediction trigger failed: ' + predictionResults['error'];
       return (
-        <div className="flex flex-col pl-24 pr-24">
+        <div className="flex flex-col pr-24 pl-24">
           <ErrorAlert mainMsg={msg}></ErrorAlert>
         </div>
       );
     }
     return (
-      <div className="flex flex-col gap-y-24 pl-24 pr-24">
+      <div className="flex flex-col gap-y-24 pr-24 pl-24">
         <BigSuccessAlert
           mainMsg="Prediction initiated!"
           msgDetails={
@@ -124,7 +124,7 @@ export default function FileUpload() {
     if (batchCreationResult !== 'ok') {
       let msg = '[ERROR] Batch creation failed: ' + batchCreationResult;
       return (
-        <div className="flex flex-col pl-24 pr-24">
+        <div className="flex flex-col pr-24 pl-24">
           <ErrorAlert mainMsg={msg}></ErrorAlert>
           <div className="flex w-full flex-row items-end justify-between pt-48">
             <Link
@@ -139,7 +139,7 @@ export default function FileUpload() {
     }
     if (!startPrediction) {
       return (
-        <div className="flex flex-col gap-y-24 pl-24 pr-24">
+        <div className="flex flex-col gap-y-24 pr-24 pl-24">
           <BigSuccessAlert mainMsg="Batch creation successful!"></BigSuccessAlert>
           <div className="flex w-full items-end justify-end">
             <button
@@ -169,7 +169,7 @@ export default function FileUpload() {
     }
     if (Object.values(validationResults).find(element => element !== 'ok')) {
       return (
-        <div className="flex flex-col pl-24 pr-24">
+        <div className="flex flex-col pr-24 pl-24">
           <ErrorAlert
             mainMsg="[ERROR] The following files must be re-uploaded"
             msgDict={validationResults}
@@ -196,7 +196,7 @@ export default function FileUpload() {
       );
     }
     return (
-      <div className="flex flex-col pl-24 pr-24">
+      <div className="flex flex-col pr-24 pl-24">
         <BigSuccessAlert
           mainMsg="Data validation successful!"
           msgDetails="Your data has been successfully validated. You can now proceed to name the folder and confirm the upload."
@@ -258,7 +258,7 @@ export default function FileUpload() {
           Data can be uploaded to train a model or start an inference run for
           new dashboard results.
         </div>
-        <div className="flex w-full items-center justify-center pl-24 pr-24 pt-12">
+        <div className="flex w-full items-center justify-center pt-12 pr-24 pl-24">
           <label
             id="drop-zone"
             className="flex min-h-32 w-full cursor-pointer flex-col items-center justify-center rounded-3xl border-2 border-dashed border-[#f79222] bg-gray-50 hover:bg-gray-100"
@@ -266,7 +266,7 @@ export default function FileUpload() {
             onDragLeave={dragLeaveChange}
             onDrop={dropHandle}
           >
-            <div className="flex flex-col items-center justify-center gap-y-2 pb-6 pt-5">
+            <div className="flex flex-col items-center justify-center gap-y-2 pt-5 pb-6">
               <DocumentDuplicateIcon
                 aria-hidden="true"
                 className="size-6 shrink-0 text-gray-500"
@@ -330,7 +330,7 @@ export default function FileUpload() {
                   <button onClick={() => remove(f.name)}>
                     <TrashIcon
                       aria-hidden="true"
-                      className="inline-block flex size-5 shrink-0 align-middle"
+                      className="flex inline-block size-5 shrink-0 align-middle"
                     />
                   </button>
                 </div>
@@ -338,7 +338,7 @@ export default function FileUpload() {
             ))}
           </label>
         </div>
-        <div className="mx-auto flex w-full py-12 pl-24 pr-24">
+        <div className="mx-auto flex w-full py-12 pr-24 pl-24">
           {files == undefined || files.length == 0 ? (
             validationButtonDisable(true)
           ) : (
@@ -602,7 +602,7 @@ export default function FileUpload() {
             type="text"
             name="batchName"
             id="batchName"
-            className="mt-1 w-full rounded-full border border-gray-300 p-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-[#f79222]"
+            className="mt-1 w-full rounded-full border border-gray-300 p-2 shadow-sm focus:ring-2 focus:ring-[#f79222] focus:outline-none"
             value={batchName}
             onChange={e => setBatchName(e.target.value)}
             placeholder="Inference Run 2024 Fall Cohort 1"
@@ -615,13 +615,13 @@ export default function FileUpload() {
         <div className="flex w-full flex-row items-end justify-between pt-24">
           <Link
             href={route('file-upload')}
-            className="-ml-24 mb-4 rounded-full bg-gray-300 px-3 px-6 py-2 text-black"
+            className="mb-4 -ml-24 rounded-full bg-gray-300 px-3 px-6 py-2 text-black"
           >
             Back
           </Link>
           <div className="-mr-24 flex">
             <button
-              className="mb-4 mr-4 rounded-full border border-[#f79222] bg-white px-3 px-6 py-2 font-semibold text-[#f79222]"
+              className="mr-4 mb-4 rounded-full border border-[#f79222] bg-white px-3 px-6 py-2 font-semibold text-[#f79222]"
               onClick={() => {
                 // Also start the prediction so set it to true.
                 createBatch(true);
@@ -758,7 +758,7 @@ export default function FileUpload() {
     <AppLayout
       title="Upload Data"
       renderHeader={() => (
-        <h2 className="text-xl font-semibold leading-tight text-gray-800">
+        <h2 className="text-xl leading-tight font-semibold text-gray-800">
           FileUpload
         </h2>
       )}
@@ -771,7 +771,7 @@ export default function FileUpload() {
         <Steppers
           currentStep={currentStep}
           stepsDict={steps}
-          className="pb-12 pt-24"
+          className="pt-24 pb-12"
         />
 
         {currentStep === 1