Skip to content

fix(a11y): add h1 headings for document outline compliance #260

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mrmaloof merged 4 commits into from
Apr 28, 2026
Merged

fix(a11y): add h1 headings for document outline compliance #260

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cca390b
fix(a11y): add h1 headings for document outline compliance
mrmaloof Apr 17, 2026
0ad3fe4
refactor: remove unused imports
mrmaloof Apr 17, 2026
447f995
chore: format
mrmaloof Apr 17, 2026
3e129c8
Merge branch 'develop' into feature/missing_headers
mrmaloof Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions resources/css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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] {
Expand Down
6 changes: 3 additions & 3 deletions resources/js/Pages/Auth/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@ 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"
src="https://storage.googleapis.com/staging-sst-01-staging-static/edvise-logo.svg"
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">
Expand Down Expand Up @@ -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>
Expand Down
37 changes: 16 additions & 21 deletions resources/js/Pages/FileUpload.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -104,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={
Expand All @@ -129,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
Expand All @@ -144,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
Expand Down Expand Up @@ -174,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}
Expand All @@ -201,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."
Expand Down Expand Up @@ -263,15 +258,15 @@ 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"
onDragOver={dragOverImageChange}
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"
Expand Down Expand Up @@ -335,15 +330,15 @@ 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>
</li>
))}
</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)
) : (
Expand Down Expand Up @@ -607,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"
Expand All @@ -620,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);
Expand Down Expand Up @@ -763,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>
)}
Expand All @@ -772,11 +767,11 @@ 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}
className="pb-12 pt-24"
className="pt-24 pb-12"
/>

{currentStep === 1
Expand Down