Skip to content

accessibility: improve semantic elements and aria tags on layouts and… #119

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

Open
KGFCH2 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

accessibility: improve semantic elements and aria tags on layouts and… #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b51255
accessibility: improve semantic elements and aria tags on layouts and…
KGFCH2 May 31, 2026
dd099bd
Merge branch 'main' into accessibility/improve-semantic-aria
KGFCH2 May 31, 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: 2 additions & 2 deletions frontend/src/layouts/MainLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import Footer from "../components/shared/Footer";

export default function MainLayout({ children }) {
return (
<div className="min-h-screen bg-white text-black flex flex-col font-sans">
<div className="min-h-screen bg-white text-black flex flex-col font-sans" role="document">
<Navbar />
<main className="flex-1 w-full flex flex-col">
<main className="flex-1 w-full flex flex-col" role="main" aria-label="Main Content">
{children}
</main>
<Footer />
Expand Down
119 changes: 37 additions & 82 deletions frontend/src/pages/NotFoundPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,93 +2,48 @@ import { Link } from "react-router-dom";

export default function NotFoundPage() {
return (
<main
className="relative min-h-screen overflow-hidden border-t-4 border-black bg-white"
aria-label="404 Not Found Page"
>
{/* Background Grid */}
<div
className="absolute inset-0 pointer-events-none"
style={{
backgroundImage:
"repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0px, rgba(0,0,0,0.04) 1px, transparent 1px, transparent calc(100% / 12))",
}}
/>

<div className="relative z-10 mx-auto flex flex-1 max-w-screen-2xl flex-col lg:flex-row">
{/* LEFT PANEL */}
<div className="relative flex-1 overflow-hidden border-b-4 border-black px-6 py-16 sm:px-10 lg:border-r-4 lg:border-b-0 lg:py-20">
{/* Ghost 404 */}
<p
aria-hidden="true"
className="pointer-events-none absolute inset-0 flex select-none items-center justify-center text-[clamp(10rem,35vw,30rem)] font-black tracking-tighter text-black opacity-[0.06]"
>
404
</p>

<div className="relative z-10 flex h-full flex-col justify-between">
{/* Label */}
<div>
<p className="text-xs font-black uppercase tracking-[0.35em] text-black sm:text-sm">
Error / Route Unavailable
</p>
</div>

{/* Main Content */}
<div className="py-12 lg:py-0">
<h1 className="text-[clamp(5rem,12vw,12rem)] font-black uppercase leading-[0.85] tracking-tighter text-black">
404
</h1>

<div className="mt-8 h-[6px] w-32 bg-black" />
<div className="w-full flex-1 flex flex-col md:flex-row bg-white" role="region" aria-label="Page Not Found Information">
{/* Left panel — large 404 */}
<div className="flex-1 flex items-center justify-center border-b-4 md:border-b-0 md:border-r-4 border-black px-8 py-16 md:py-0" aria-hidden="true">
<p className="text-[clamp(8rem,22vw,18rem)] font-black leading-none tracking-tighter text-black select-none">
404
</p>
</div>

<h2 className="mt-10 text-[clamp(3rem,7vw,6rem)] font-black uppercase leading-[0.9] tracking-tighter text-black">
Page
<br />
Not Found.
</h2>
</div>
{/* Right panel — message + CTA */}
<div className="flex-1 flex flex-col justify-center px-10 sm:px-16 py-16 md:py-0 max-w-xl md:max-w-none">
<p className="text-xs font-black uppercase tracking-widest text-black mb-4">
Error / Not Found
</p>

{/* Description */}
<div className="max-w-xl">
<p className="text-lg font-medium leading-relaxed text-black md:text-xl">
The page you're looking for doesn't exist, may have been moved,
or is temporarily unavailable.
</p>
</div>
</div>
</div>
<h1 className="text-4xl sm:text-5xl md:text-6xl font-black uppercase tracking-tighter text-black leading-tight mb-6">
Page not<br />found.
</h1>

{/* RIGHT PANEL */}
<div className="flex flex-1 items-center px-6 py-16 sm:px-10 md:px-16 lg:px-20 lg:py-20">
<div className="max-w-xl">
<p className="text-2xl font-medium leading-relaxed text-black md:text-3xl">
Double-check the URL or continue exploring the platform using one
of the options below.
</p>
<div className="w-16 h-1 bg-black mb-8" aria-hidden="true" />

{/* Actions */}
<nav
aria-label="404 page actions"
className="mt-12 flex flex-wrap gap-5"
>
<Link
to="/"
className="inline-flex transform-gpu items-center justify-center border-4 border-black bg-black px-10 py-5 text-sm font-black uppercase tracking-[0.2em] text-white transition-all duration-200 hover:-translate-y-1 hover:bg-white hover:text-black focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black"
>
Go Home
</Link>
<p className="text-base sm:text-lg font-bold text-black leading-relaxed mb-12 max-w-sm">
The page you're looking for doesn't exist or has been moved.
Double-check the URL, or head back home.
</p>

<Link
to="/explore"
className="inline-flex transform-gpu items-center justify-center border-4 border-black bg-white px-10 py-5 text-sm font-black uppercase tracking-[0.2em] text-black transition-all duration-200 hover:-translate-y-1 hover:bg-black hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black"
>
Explore
</Link>
</nav>
</div>
<div className="flex flex-col sm:flex-row gap-4">
<Link
to="/"
aria-label="Go back to the homepage"
className="inline-block py-5 px-10 bg-black text-white text-sm font-black uppercase tracking-widest hover:bg-white hover:text-black border-4 border-black transition-colors"
>
Go Home
</Link>
<Link
to="/explore"
aria-label="Explore other platform features"
className="inline-block py-5 px-10 bg-white text-black text-sm font-black uppercase tracking-widest hover:bg-black hover:text-white border-4 border-black transition-colors"
>
Explore
</Link>
</div>
</div>
</main>
</div>
);
}
}