Add h1 on every page

lasseklovstad · Mar 22, 2024 · 577f07b · 577f07b
1 parent ed1a302
commit 577f07b
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/app/components/PageLayout/PageLayout.tsx b/app/components/PageLayout/PageLayout.tsx
@@ -1,12 +1,14 @@
 import styles from "./PageLayout.module.css";
 
 type Props = {
+  pageTitle: string;
   content: React.ReactNode;
   rightContent?: React.ReactNode;
 };
-export function PageLayout({ content, rightContent }: Props) {
+export function PageLayout({ content, rightContent, pageTitle }: Props) {
   return (
     <main className={styles.container}>
+      <h1 className="sr-only">{pageTitle}</h1>
       <article>{content}</article>
       {rightContent ? <aside>{rightContent}</aside> : null}
     </main>

diff --git a/app/index.css b/app/index.css
@@ -11,6 +11,18 @@ body {
   padding: 0;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 h1,
 h2,
 h3,

diff --git a/app/routes/$pageSlug.tsx b/app/routes/$pageSlug.tsx
@@ -44,11 +44,14 @@ export default function Page() {
   const { page } = useLoaderData<typeof clientLoader>();
 
   if (page === null) {
-    return <PageLayout content={<NotFound />} />;
+    return (
+      <PageLayout pageTitle="Det oppstod en feil" content={<NotFound />} />
+    );
   }
 
   return (
     <PageLayout
+      pageTitle={page.title}
       content={<PortableText value={page.content} components={components} />}
       rightContent={
         page.sideContent ? (