♿️(frontend) ensure doc title is h1 for accessibility

Fix heading hierarchy when withTitle is false in production

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
 

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>