♿️(frontend) Set page titles for 403 and 404 errors

Appryll · AntoLC · commit 4fc49d5cb2c3 · 2025-06-11T16:36:53.000+02:00
Set the page titles for the 403 and 404 error
pages to improve user experience and accessibility.
diff --git a/src/frontend/apps/impress/src/pages/403.tsx b/src/frontend/apps/impress/src/pages/403.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@openfun/cunningham-react';
+import Head from 'next/head';
 import Image from 'next/image';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -17,34 +18,46 @@ const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
 
   return (
-    <Box
-      $align="center"
-      $margin="auto"
-      $gap="1rem"
-      $padding={{ bottom: '2rem' }}
-    >
-      <Image
-        className="c__image-system-filter"
-        src={img403}
-        alt={t('Image 403')}
-        style={{
-          maxWidth: '100%',
-          height: 'auto',
-        }}
-      />
-
-      <Box $align="center" $gap="0.8rem">
-        <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
-          {t('You do not have permission to view this document.')}
-        </Text>
-
-        <StyledLink href="/">
-          <StyledButton icon={<Icon iconName="house" $color="white" />}>
-            {t('Home')}
-          </StyledButton>
-        </StyledLink>
+    <>
+      <Head>
+        <title>
+          {t('Access Denied - Error 403')} - {t('Docs')}
+        </title>
+        <meta
+          property="og:title"
+          content={`${t('Access Denied - Error 403')} - ${t('Docs')}`}
+          key="title"
+        />
+      </Head>
+      <Box
+        $align="center"
+        $margin="auto"
+        $gap="1rem"
+        $padding={{ bottom: '2rem' }}
+      >
+        <Image
+          className="c__image-system-filter"
+          src={img403}
+          alt={t('Image 403')}
+          style={{
+            maxWidth: '100%',
+            height: 'auto',
+          }}
+        />
+
+        <Box $align="center" $gap="0.8rem">
+          <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
+            {t('You do not have permission to view this document.')}
+          </Text>
+
+          <StyledLink href="/">
+            <StyledButton icon={<Icon iconName="house" $color="white" />}>
+              {t('Home')}
+            </StyledButton>
+          </StyledLink>
+        </Box>
       </Box>
-    </Box>
+    </>
   );
 };
 
diff --git a/src/frontend/apps/impress/src/pages/404.tsx b/src/frontend/apps/impress/src/pages/404.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@openfun/cunningham-react';
+import Head from 'next/head';
 import Image from 'next/image';
 import { ReactElement } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -17,36 +18,48 @@ const Page: NextPageWithLayout = () => {
   const { t } = useTranslation();
 
   return (
-    <Box
-      $align="center"
-      $margin="auto"
-      $gap="1rem"
-      $padding={{ bottom: '2rem' }}
-    >
-      <Image
-        className="c__image-system-filter"
-        src={img403}
-        alt={t('Image 403')}
-        style={{
-          maxWidth: '100%',
-          height: 'auto',
-        }}
-      />
-
-      <Box $align="center" $gap="0.8rem">
-        <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
-          {t(
-            'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
-          )}
-        </Text>
-
-        <StyledLink href="/">
-          <StyledButton icon={<Icon iconName="house" $color="white" />}>
-            {t('Home')}
-          </StyledButton>
-        </StyledLink>
+    <>
+      <Head>
+        <title>
+          {t('Page Not Found - Error 404')} - {t('Docs')}
+        </title>
+        <meta
+          property="og:title"
+          content={`${t('Page Not Found - Error 404')} - ${t('Docs')}`}
+          key="title"
+        />
+      </Head>
+      <Box
+        $align="center"
+        $margin="auto"
+        $gap="1rem"
+        $padding={{ bottom: '2rem' }}
+      >
+        <Image
+          className="c__image-system-filter"
+          src={img403}
+          alt={t('Image 403')}
+          style={{
+            maxWidth: '100%',
+            height: 'auto',
+          }}
+        />
+
+        <Box $align="center" $gap="0.8rem">
+          <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
+            {t(
+              'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
+            )}
+          </Text>
+
+          <StyledLink href="/">
+            <StyledButton icon={<Icon iconName="house" $color="white" />}>
+              {t('Home')}
+            </StyledButton>
+          </StyledLink>
+        </Box>
       </Box>
-    </Box>
+    </>
   );
 };
 
