fix(a11y): move banner to page header (aka banner region)

digitalservicebund · Jan 8, 2024 · d6e5f8d · d6e5f8d
1 parent 15bd5e6
commit d6e5f8d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/app/components/PageHeader.tsx b/app/components/PageHeader.tsx
@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { EnvironmentBanner } from "./EnvironmentBanner";
 
 export const PageHeaderPropsSchema = z.object({
   title: z.string(),
@@ -8,14 +9,17 @@ type PageHeaderProps = z.infer<typeof PageHeaderPropsSchema>;
 
 export default function Header({ title, linkLabel }: PageHeaderProps) {
   return (
-    <header className="py-20 px-16">
-      <a
-        href="/"
-        className="ds-label-01-bold no-underline hover:underline mr-8 text-black focus:outline active:underline active:decoration-4"
-        aria-label={linkLabel}
-      >
-        {title}
-      </a>
+    <header>
+      <EnvironmentBanner />
+      <div className="py-20 px-16">
+        <a
+          href="/"
+          className="ds-label-01-bold no-underline hover:underline mr-8 text-black focus:outline active:underline active:decoration-4"
+          aria-label={linkLabel}
+        >
+          {title}
+        </a>
+      </div>
     </header>
   );
 }
diff --git a/app/root.tsx b/app/root.tsx
@@ -37,7 +37,6 @@ import { getPageHeaderProps } from "./services/cms/models/StrapiPageHeader";
 import { getCookieBannerProps } from "./services/cms/models/StrapiCookieBannerSchema";
 import FeedbackBanner, { augmentFeedback } from "./components/FeedbackBanner";
 import { getStrapiFeedback } from "./services/cms/models/StrapiGlobal";
-import { EnvironmentBanner } from "./components/EnvironmentBanner";
 
 export const headers: HeadersFunction = () => ({
   "X-Frame-Options": "SAMEORIGIN",
@@ -158,7 +157,6 @@ function App() {
           hasTrackingConsent={hasTrackingConsent}
           content={cookieBannerContent}
         />
-        <EnvironmentBanner />
         <Header {...header} />
         <Breadcrumbs breadcrumbs={breadcrumbs} />
         <main className="flex-grow">
@@ -184,7 +182,6 @@ export function ErrorBoundary() {
         <Links />
       </head>
       <body className="flex flex-col min-h-screen">
-        <EnvironmentBanner />
         {loaderData && <Header {...loaderData.header} />}
         <main className="flex-grow">
           <ErrorBox