From 4cd72ffa4f4c6c3f6dd5ecd7fc07d5ec0247f2e1 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 16 Mar 2026 10:24:57 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20ensure=20doc=20t?=
 =?UTF-8?q?itle=20is=20h1=20for=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix heading hierarchy when withTitle is false in production
---
 CHANGELOG.md                                  |  1 +
 .../docs/doc-header/components/DocTitle.tsx   | 64 ++++++++++---------
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3812c1d5..7dad887f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -35,6 +35,7 @@ and this project adheres to
 - ⬆️(frontend) upgrade Next.js to v16 #1980
 - ♿️(frontend) fix aria-label and landmark on document banner state #1986
 - 🌐(i18n) add "new window" translation key for waffle aria-label #1984
+- ♿️(frontend) ensure doc title is h1 for accessibility #2006
 
 ### Fixed
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
index 0ff9c6d9..8bd28170 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
@@ -43,7 +43,7 @@ export const DocTitleText = () => {
   return (
     <Box className={CLASS_DOC_TITLE} $direction="row" $align="center">
       <Text
-        as="h2"
+        as="h1"
         $margin={{ all: 'none', left: 'none' }}
         $size={isMobile ? 'h4' : 'h2'}
       >
@@ -168,37 +168,39 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
       {!isTopRoot && <DocTitleEmojiPicker doc={doc} />}
 
       <Tooltip content={t('Rename')} aria-hidden={true} placement="top">
-        <Box
-          as="span"
-          role="textbox"
-          className="--docs--doc-title-input"
-          contentEditable
-          defaultValue={titleDisplay || undefined}
-          onKeyDownCapture={handleKeyDown}
-          suppressContentEditableWarning={true}
-          aria-label={`${t('Document title')}`}
-          aria-multiline={false}
-          onBlurCapture={(event) =>
-            handleTitleSubmit(event.target.textContent || '')
-          }
-          $padding={{ right: 'big' }}
-          $css={css`
-            &[contenteditable='true']:empty:not(:focus):before {
-              content: '${untitledDocument}';
-              color: var(
-                --c--contextuals--content--semantic--neutral--tertiary
-              );
-              pointer-events: none;
-              font-style: italic;
+        <Box as="h1" $margin="none">
+          <Box
+            as="span"
+            role="textbox"
+            className="--docs--doc-title-input"
+            contentEditable
+            defaultValue={titleDisplay || undefined}
+            onKeyDownCapture={handleKeyDown}
+            suppressContentEditableWarning={true}
+            aria-label={`${t('Document title')}`}
+            aria-multiline={false}
+            onBlurCapture={(event) =>
+              handleTitleSubmit(event.target.textContent || '')
             }
-            font-size: ${isDesktop
-              ? css`var(--c--globals--font--sizes--h2)`
-              : css`var(--c--globals--font--sizes--sm)`};
-            font-weight: 700;
-            outline: none;
-          `}
-        >
-          {titleDisplay}
+            $padding={{ right: 'big' }}
+            $css={css`
+              &[contenteditable='true']:empty:not(:focus):before {
+                content: '${untitledDocument}';
+                color: var(
+                  --c--contextuals--content--semantic--neutral--tertiary
+                );
+                pointer-events: none;
+                font-style: italic;
+              }
+              font-size: ${isDesktop
+                ? css`var(--c--globals--font--sizes--h2)`
+                : css`var(--c--globals--font--sizes--sm)`};
+              font-weight: 700;
+              outline: none;
+            `}
+          >
+            {titleDisplay}
+          </Box>
         </Box>
       </Tooltip>
     </Box>