✨(frontend) improve accessibility by adding landmark roles to layout

landmark roles help assistive tech users navigate quickly across the page

Signed-off-by: Cyril <[email protected]>

Author: Ovgodd

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
 

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

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;

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')}
     >

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"

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')}