Skip to content

a11y: Add main and region landmarks #1996

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
marcleblanc2 merged 1 commit into from
Sep 17, 2026
+12 −8
Merged

a11y: Add main and region landmarks #1996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 src/app/[...slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,15 +58,15 @@ const PostLayout = async ({params}: Props) => {

const content = (
<>
<div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
<main className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
<Breadcrumbs path={slug} />
<article>
<Prose>
<Content components={MdxComponents()} />
</Prose>
</article>
<PrevNextLinks />
</div>
</main>
<TableOfContents
headings={post.headings}
rawMarkdown={post.body.raw}
Expand Down
4 changes: 2 additions & 2 deletions src/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const pagePaths = allPosts.filter(post => !post.preview).map(post => post.url);

export default function NotFound() {
return (
<div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
<main className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
<div className="flex h-full flex-col items-center justify-center text-center">
<p className="font-display text-sm font-medium text-slate-900 dark:text-white">
404
Expand All @@ -19,6 +19,6 @@ export default function NotFound() {
</p>
<NotFoundLinks pagePaths={pagePaths} />
</div>
</div>
</main>
);
}
4 changes: 2 additions & 2 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,13 @@ const PostLayout = () => {

return (
<>
<div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
<main className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
<article>
<Prose suppressHydrationWarning>
<Content components={MdxComponents()} />
</Prose>
</article>
</div>
</main>
</>
);
};
Expand Down
8 changes: 6 additions & 2 deletions src/components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,16 @@ function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {

export function Hero() {
return (
<div className="overflow-hidden dark:-mb-32 dark:mt-[-4.75rem] dark:bg-dark-bg dark:pb-32 dark:pt-[4.75rem]">
<section
aria-labelledby="hero-title"
className="overflow-hidden dark:-mb-32 dark:mt-[-4.75rem] dark:bg-dark-bg dark:pb-32 dark:pt-[4.75rem]"
>
<div className="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
<div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-16 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
<div className="relative z-10 md:text-center lg:text-left">
<div className="relative">
<h1
id="hero-title"
className={clsx(
'inline bg-clip-text font-display text-4xl tracking-tight text-black sm:text-5xl dark:text-transparent dark:text-white'
)}
Expand Down Expand Up @@ -48,6 +52,6 @@ export function Hero() {
</div>
</div>
</div>
</div>
</section>
);
}
Loading