From 2c2bbe91d66e99acc0cb4ebd6b69cca11d0679e6 Mon Sep 17 00:00:00 2001
From: Ovgodd <c.gromoff@gmail.com>
Date: Tue, 25 Aug 2026 09:12:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20make=20sub-doc?=
 =?UTF-8?q?=20interlinks=20keyboard=20accessible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A native anchor breaks Tiptap drag and drop, so we use role=link.
---
 CHANGELOG.md                                  |  4 ++
 .../Interlinking/LinkSelected.tsx             | 37 +++++++++++++++----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e4e73898b..7408b9a86 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Changed
+
+- ♿️(frontend) use anchor links for interlinking sub-documents #2391
+
 ## [v5.5.0] - 2026-08-24
 
 ### Added
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 c627c9f19..bb5cacc62 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,9 +2,9 @@ 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/';
+import { getEmojiAndTitle, useDoc, useDocStore } from '@/docs/doc-management/';
 
 interface LinkSelectedProps {
   docId: string;
@@ -38,12 +38,18 @@ export const LinkSelected = ({
   }, [doc?.title, docId, isEditable]);
 
   const { emoji, titleWithoutEmoji } = getEmojiAndTitle(title);
+  const { currentDoc } = useDocStore();
+  const isDeletedDoc = !!currentDoc?.deleted_at;
   const router = useRouter();
   const href = `/docs/${docId}/`;
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (e: React.MouseEvent<HTMLSpanElement>) => {
     e.preventDefault();
 
+    if (isDeletedDoc) {
+      return;
+    }
+
     // 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');
@@ -53,8 +59,8 @@ export const LinkSelected = ({
   };
 
   // This triggers on middle-mouse click
-  const handleAuxClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (e.button !== 1) {
+  const handleAuxClick = (e: React.MouseEvent<HTMLSpanElement>) => {
+    if (e.button !== 1 || isDeletedDoc) {
       return;
     }
     e.preventDefault();
@@ -62,19 +68,36 @@ export const LinkSelected = ({
     window.open(href, '_blank');
   };
 
+  /**
+   * A link is activated with Enter only, Space is a button behaviour and stays
+   * available to the editor.
+   */
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (e.key !== 'Enter' || isDeletedDoc) {
+      return;
+    }
+    e.preventDefault();
+    void router.push(href);
+  };
+
   return (
-    <BoxButton
+    <Box
       as="span"
+      role="link"
+      tabIndex={isDeletedDoc ? -1 : 0}
+      aria-disabled={isDeletedDoc || undefined}
       className="--docs--interlinking-link-inline-content"
       data-href={href}
       onClick={handleClick}
       onAuxClick={handleAuxClick}
+      onKeyDown={handleKeyDown}
       draggable="false"
       $height="28px"
       $css={css`
         display: inline;
         padding: 0.1rem 0.4rem;
         border-radius: 4px;
+        cursor: pointer;
         & svg {
           position: relative;
           top: 2px;
@@ -129,6 +152,6 @@ export const LinkSelected = ({
           {titleWithoutEmoji}
         </Box>
       </Text>
-    </BoxButton>
+    </Box>
   );
 };