From 0b62029614e1eedf317488457e849fecdb0bbf8d Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 3 Jun 2026 14:29:07 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20use=20anchor?=
 =?UTF-8?q?=20links=20for=20interlinking=20sub-documents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Render sub-doc interlinks as a tag> instead of span typed in button
---
 CHANGELOG.md                                  |  1 +
 .../Interlinking/LinkSelected.tsx             | 21 ++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c176c578af..d014b21350 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to
 - ♿️(frontend) add aria-hidden to decorative avatar SVGs in share modal #2324
 - 🏗️(frontend) move comments to its own folder feature #2374
 - ♿️(frontend) align mobile header menu aria-label i18n pattern #2377
+- ♿️(frontend) use anchor links for interlinking sub-documents #2391
 
 ### Fixed
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/LinkSelected.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/LinkSelected.tsx
index c627c9f198..c3aac8b5e2 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/LinkSelected.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/LinkSelected.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 import { css } from 'styled-components';
 
-import { Box, BoxButton, Text } from '@/components';
+import { Box, Text } from '@/components';
 import SelectedPageIcon from '@/docs/doc-editor/assets/doc-selected.svg';
 import { getEmojiAndTitle, useDoc } from '@/docs/doc-management/';
 
@@ -41,10 +41,9 @@ export const LinkSelected = ({
   const router = useRouter();
   const href = `/docs/${docId}/`;
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
 
-    // If ctrl or command is pressed, it opens a new tab. If shift is pressed, it opens a new window
     if (e.metaKey || e.ctrlKey || e.shiftKey) {
       window.open(href, '_blank');
       return;
@@ -52,8 +51,7 @@ export const LinkSelected = ({
     void router.push(href);
   };
 
-  // This triggers on middle-mouse click
-  const handleAuxClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleAuxClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     if (e.button !== 1) {
       return;
     }
@@ -63,8 +61,9 @@ export const LinkSelected = ({
   };
 
   return (
-    <BoxButton
-      as="span"
+    <Box
+      as="a"
+      href={href}
       className="--docs--interlinking-link-inline-content"
       data-href={href}
       onClick={handleClick}
@@ -75,6 +74,7 @@ export const LinkSelected = ({
         display: inline;
         padding: 0.1rem 0.4rem;
         border-radius: 4px;
+        cursor: pointer;
         & svg {
           position: relative;
           top: 2px;
@@ -85,6 +85,11 @@ export const LinkSelected = ({
             --c--contextuals--background--semantic--contextual--primary
           );
         }
+        .--docs--interlinking-link-inline-content:focus-visible {
+          outline: 2px solid
+            var(--c--contextuals--content--semantic--gray--primary);
+          outline-offset: 2px;
+        }
         transition: background-color var(--c--globals--transitions--duration)
           var(--c--globals--transitions--ease-out);
 
@@ -129,6 +134,6 @@ export const LinkSelected = ({
           {titleWithoutEmoji}
         </Box>
       </Text>
-    </BoxButton>
+    </Box>
   );
 };

From 884f5ca1ed2a8e3e7b1f722ba54858b822c6b8b8 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 3 Jun 2026 14:46:48 +0200
Subject: [PATCH 2/2] =?UTF-8?q?fixup!=20=E2=99=BF=EF=B8=8F(frontend)=20use?=
 =?UTF-8?q?=20anchor=20links=20for=20interlinking=20sub-documents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-inline-content/Interlinking/LinkSelected.tsx      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/LinkSelected.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/LinkSelected.tsx
index c3aac8b5e2..592422f671 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/LinkSelected.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/LinkSelected.tsx
@@ -85,9 +85,8 @@ export const LinkSelected = ({
             --c--contextuals--background--semantic--contextual--primary
           );
         }
-        .--docs--interlinking-link-inline-content:focus-visible {
-          outline: 2px solid
-            var(--c--contextuals--content--semantic--gray--primary);
+        &:focus-within {
+          outline: 2px solid var(--c--globals--colors--brand-400);
           outline-offset: 2px;
         }
         transition: background-color var(--c--globals--transitions--duration)