From 1e39d17914ebbd4c361b7ff83a3a64ae8d134fcd Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 17 Sep 2025 08:14:30 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20improve=20accessibility?=
 =?UTF-8?q?=20by=20adding=20landmark=20roles=20to=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

landmark roles help assistive tech users navigate quickly across the page

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 CHANGELOG.md                                               | 1 +
 src/frontend/apps/impress/src/features/footer/Footer.tsx   | 7 ++++++-
 .../apps/impress/src/features/header/components/Header.tsx | 1 +
 .../impress/src/features/home/components/HomeContent.tsx   | 1 +
 src/frontend/apps/impress/src/layouts/MainLayout.tsx       | 1 +
 src/frontend/apps/impress/src/layouts/PageLayout.tsx       | 1 +
 6 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3e489dd8c..e4baabc461 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to
 
 - ♿(frontend) improve accessibility:
   - #1354
+  - ♿ improve accessibility by adding landmark roles to layout #1394
 
 ### Fixed
 
diff --git a/src/frontend/apps/impress/src/features/footer/Footer.tsx b/src/frontend/apps/impress/src/features/footer/Footer.tsx
index 6cef3ffe2d..f38246451a 100644
--- a/src/frontend/apps/impress/src/features/footer/Footer.tsx
+++ b/src/frontend/apps/impress/src/features/footer/Footer.tsx
@@ -56,7 +56,12 @@ export const Footer = () => {
   }
 
   return (
-    <Box $position="relative" as="footer" className="--docs--footer">
+    <Box
+      $position="relative"
+      as="footer"
+      role="contentinfo"
+      className="--docs--footer"
+    >
       <BlueStripe />
       <Box $padding={{ top: 'large', horizontal: 'big', bottom: 'small' }}>
         <Box
diff --git a/src/frontend/apps/impress/src/features/header/components/Header.tsx b/src/frontend/apps/impress/src/features/header/components/Header.tsx
index ec20ae7bb7..cdb33d51f3 100644
--- a/src/frontend/apps/impress/src/features/header/components/Header.tsx
+++ b/src/frontend/apps/impress/src/features/header/components/Header.tsx
@@ -22,6 +22,7 @@ export const Header = () => {
   return (
     <Box
       as="header"
+      role="banner"
       $css={css`
         position: fixed;
         top: 0;
diff --git a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
index 7a6af3274b..3674cfb4d6 100644
--- a/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
+++ b/src/frontend/apps/impress/src/features/home/components/HomeContent.tsx
@@ -35,6 +35,7 @@ export function HomeContent() {
   return (
     <Box
       as="main"
+      role="main"
       className="--docs--home-content"
       aria-label={t('Main content')}
     >
diff --git a/src/frontend/apps/impress/src/layouts/MainLayout.tsx b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
index facf5f87a0..29fad38e8f 100644
--- a/src/frontend/apps/impress/src/layouts/MainLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/MainLayout.tsx
@@ -34,6 +34,7 @@ export function MainLayout({
         <LeftPanel />
         <Box
           as="main"
+          role="main"
           aria-label={t('Main content')}
           id={MAIN_LAYOUT_ID}
           $align="center"
diff --git a/src/frontend/apps/impress/src/layouts/PageLayout.tsx b/src/frontend/apps/impress/src/layouts/PageLayout.tsx
index d82ddb4be7..84c7a184ac 100644
--- a/src/frontend/apps/impress/src/layouts/PageLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/PageLayout.tsx
@@ -26,6 +26,7 @@ export function PageLayout({
       <Header />
       <Box
         as="main"
+        role="main"
         $width="100%"
         $css="flex-grow:1;"
         aria-label={t('Main content')}