From 057992faafec0049f86309abd13ed2f3b1fa4815 Mon Sep 17 00:00:00 2001
From: Claude Fable 5 <fable-5@waidele.info>
Date: Tue, 21 Jul 2026 14:04:36 +0200
Subject: [PATCH 1/2] =?UTF-8?q?#164:=20ARIA-Semantik=20=E2=80=94=20Editorf?=
 =?UTF-8?q?l=C3=A4che,=20Autocomplete-Listboxen,=20Sidebar,=20Toolbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Editorfläche bekommt einen lokalisierten zugänglichen Namen und ist
im Lesemodus role=document statt eines unbenannten Textfelds (setOptions
im selben Layout-Effekt wie setEditable). Eingeklappte Sidebar zusätzlich
inert (aria-hidden allein ließ fokussierbare Kinder im Tab-Weg). Die
li-Zwischenknoten der Listboxen (Wikilink-/Mention-Autocomplete,
Suchergebnisse) sind role=presentation, damit listbox→option wieder eine
gültige Eltern-Kind-Beziehung ist. Toolbar: Pfeiltasten-Navigation über
die Controls (native Selects behalten ihre Pfeiltasten) und ein
sprechendes Toolbar-Label statt des Absatz-Buttons-Labels.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AGM8jo3hwoV9wsCVGfy8iq
---
 apps/web/src/editor/MentionAutocomplete.tsx  |  2 +-
 apps/web/src/editor/Toolbar.tsx              | 23 +++++++++++++++++++-
 apps/web/src/editor/WikilinkAutocomplete.tsx |  2 +-
 apps/web/src/layout/Sidebar.tsx              |  1 +
 apps/web/src/pages/PageEditorPage.tsx        | 14 +++++++++++-
 apps/web/src/search/SearchPalette.tsx        |  2 +-
 packages/shared/i18n/de/editor.json          |  4 +++-
 packages/shared/i18n/en/editor.json          |  4 +++-
 8 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/editor/MentionAutocomplete.tsx b/apps/web/src/editor/MentionAutocomplete.tsx
index 873fcf6..17281c2 100644
--- a/apps/web/src/editor/MentionAutocomplete.tsx
+++ b/apps/web/src/editor/MentionAutocomplete.tsx
@@ -121,7 +121,7 @@ export function MentionAutocomplete({ editor }: { editor: Editor }): React.JSX.E
       style={{ position: 'fixed', left: state.coords.left, top: state.coords.bottom + 4 }}
     >
       {suggestions.map((user, index) => (
-        <li key={user.id}>
+        <li key={user.id} role="presentation">
           <button
             type="button"
             role="option"
diff --git a/apps/web/src/editor/Toolbar.tsx b/apps/web/src/editor/Toolbar.tsx
index ae09ea7..f7b9817 100644
--- a/apps/web/src/editor/Toolbar.tsx
+++ b/apps/web/src/editor/Toolbar.tsx
@@ -80,6 +80,22 @@ function ImageInsertButton({
   );
 }
 
+/** Arrow-key navigation between toolbar controls (#164, role="toolbar"
+ * convention). Native selects keep their own arrow-key handling. */
+function onToolbarArrowKey(event: React.KeyboardEvent<HTMLDivElement>): void {
+  if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') return;
+  const target = event.target as HTMLElement;
+  if (target.tagName === 'SELECT' || target.tagName === 'INPUT') return;
+  const controls = [
+    ...event.currentTarget.querySelectorAll<HTMLElement>('button:not([disabled]), select'),
+  ];
+  const index = controls.indexOf(target);
+  if (index === -1) return;
+  event.preventDefault();
+  const step = event.key === 'ArrowRight' ? 1 : -1;
+  controls[(index + step + controls.length) % controls.length]?.focus();
+}
+
 /** Keyboard-accessible toolbar for the page editor (issue #25). Table row/
  * column controls stay visible but disabled outside a table, so the
  * toolbar's layout and tab order never shift while typing. */
@@ -118,7 +134,12 @@ export function Toolbar({
   });
 
   return (
-    <div className="editor-toolbar" role="toolbar" aria-label={t('toolbar.paragraph')}>
+    <div
+      className="editor-toolbar"
+      role="toolbar"
+      aria-label={t('toolbar.label')}
+      onKeyDown={onToolbarArrowKey}
+    >
       <div className="editor-toolbar__group">
         <ToolbarButton
           label={t('toolbar.paragraph')}
diff --git a/apps/web/src/editor/WikilinkAutocomplete.tsx b/apps/web/src/editor/WikilinkAutocomplete.tsx
index 6d46315..583f108 100644
--- a/apps/web/src/editor/WikilinkAutocomplete.tsx
+++ b/apps/web/src/editor/WikilinkAutocomplete.tsx
@@ -158,7 +158,7 @@ export function WikilinkAutocomplete({ editor }: { editor: Editor }): React.JSX.
       style={{ position: 'fixed', left: state.coords.left, top: state.coords.bottom + 4 }}
     >
       {suggestions.map((item, index) => (
-        <li key={`${item.kind}:${item.slug}`}>
+        <li key={`${item.kind}:${item.slug}`} role="presentation">
           <button
             type="button"
             role="option"
diff --git a/apps/web/src/layout/Sidebar.tsx b/apps/web/src/layout/Sidebar.tsx
index 5bbb44d..f1acca2 100644
--- a/apps/web/src/layout/Sidebar.tsx
+++ b/apps/web/src/layout/Sidebar.tsx
@@ -64,6 +64,7 @@ export function Sidebar({ collapsed }: SidebarProps): React.JSX.Element {
     <nav
       className={collapsed ? 'sidebar sidebar--collapsed' : 'sidebar'}
       aria-hidden={collapsed}
+      inert={collapsed}
       aria-label={t('layout.sidebar.label')}
     >
       {!pond.data ? (
diff --git a/apps/web/src/pages/PageEditorPage.tsx b/apps/web/src/pages/PageEditorPage.tsx
index 93ed349..5560e2e 100644
--- a/apps/web/src/pages/PageEditorPage.tsx
+++ b/apps/web/src/pages/PageEditorPage.tsx
@@ -209,7 +209,19 @@ function PageEditor({
 
   useLayoutEffect(() => {
     editor?.setEditable(canEdit);
-  }, [editor, canEdit]);
+    // TipTap rendert die Fläche als role="textbox" — ohne Namen, und im
+    // Lesemodus ist "Textfeld" schlicht falsch (#164, WCAG 4.1.2). Im
+    // Lesemodus wird sie zum benannten Dokument-Bereich.
+    editor?.setOptions({
+      editorProps: {
+        attributes: {
+          role: canEdit ? 'textbox' : 'document',
+          'aria-label': t('contentLabel'),
+          ...(canEdit ? { 'aria-multiline': 'true' } : {}),
+        },
+      },
+    });
+  }, [editor, canEdit, t]);
 
   // Entering edit mode drops the caret straight into the content, so writing
   // starts without an extra — and on empty pages pixel-precise — click. Skip
diff --git a/apps/web/src/search/SearchPalette.tsx b/apps/web/src/search/SearchPalette.tsx
index f5265c9..c31e312 100644
--- a/apps/web/src/search/SearchPalette.tsx
+++ b/apps/web/src/search/SearchPalette.tsx
@@ -208,7 +208,7 @@ export function SearchPalette({ onClose }: { onClose: () => void }): React.JSX.E
         ) : (
           <ul className="search-results" role="listbox" aria-label={t('resultsLabel')}>
             {hits.map((hit, index) => (
-              <li key={hit.pageId}>
+              <li key={hit.pageId} role="presentation">
                 <button
                   type="button"
                   role="option"
diff --git a/packages/shared/i18n/de/editor.json b/packages/shared/i18n/de/editor.json
index 73708f4..c5de04a 100644
--- a/packages/shared/i18n/de/editor.json
+++ b/packages/shared/i18n/de/editor.json
@@ -38,6 +38,7 @@
     "discardConfirm": "Die auf diesem Gerät gespeicherten Änderungen verwerfen? Das kann nicht rückgängig gemacht werden."
   },
   "toolbar": {
+    "label": "Formatierung",
     "paragraph": "Absatz",
     "heading1": "Überschrift 1",
     "heading2": "Überschrift 2",
@@ -189,5 +190,6 @@
   "dateMarker": {
     "due": "Zieldatum",
     "start": "Startdatum"
-  }
+  },
+  "contentLabel": "Seiteninhalt"
 }
diff --git a/packages/shared/i18n/en/editor.json b/packages/shared/i18n/en/editor.json
index 57a5e9e..7486fdc 100644
--- a/packages/shared/i18n/en/editor.json
+++ b/packages/shared/i18n/en/editor.json
@@ -38,6 +38,7 @@
     "discardConfirm": "Discard the changes saved on this device? This cannot be undone."
   },
   "toolbar": {
+    "label": "Formatting",
     "paragraph": "Paragraph",
     "heading1": "Heading 1",
     "heading2": "Heading 2",
@@ -189,5 +190,6 @@
   "dateMarker": {
     "due": "Due date",
     "start": "Start date"
-  }
+  },
+  "contentLabel": "Page content"
 }
-- 
2.45.2


From d4d4282c556425a2f465c222f6776b4be09ae53d Mon Sep 17 00:00:00 2001
From: Claude Fable 5 <fable-5@waidele.info>
Date: Tue, 21 Jul 2026 14:16:20 +0200
Subject: [PATCH 2/2] #165: Reflow bei 320 px und Tastatur-Scrollbarkeit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vier Ursachen des seitenweiten Horizontal-Scrollens behoben: die Topbar
saß mit min-content-Breite in der Grid-Spalte (min-width: 0 nach dem
#100-Muster) und wickelt auf schmalen Viewports auf eine zweite Zeile
(Grid-Zeile minmax, Suchtext wird zum Icon); die aufgeklappte Sidebar
liegt unter 40rem als Overlay über dem Inhalt statt ihn auf einen
Streifen zu quetschen; Footer wickelt; Titel-Input und Settings-Spalte
schrumpfen (min-width bzw. align-items: stretch im Schmal-Layout).
Der Haupt-Scrollbereich ist per tabindex=0 tastatur-scrollbar — auf den
Rechtstext-Seiten gab es sonst keinen Weg, den Inhalt zu scrollen.

Gemessen: 10 Ansichten bei 320 px ohne Dokument-Überlauf (vorher 892 px
Inhaltsbreite); e2e content/settings-nav/sidebar/legal/page-tree/search
grün.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AGM8jo3hwoV9wsCVGfy8iq
---
 apps/web/src/layout/AppLayout.tsx |  5 +++-
 apps/web/src/layout/TopBar.tsx    |  3 +-
 apps/web/src/styles/base.css      | 50 ++++++++++++++++++++++++++++++-
 3 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/layout/AppLayout.tsx b/apps/web/src/layout/AppLayout.tsx
index cd0ab18..afae63a 100644
--- a/apps/web/src/layout/AppLayout.tsx
+++ b/apps/web/src/layout/AppLayout.tsx
@@ -64,7 +64,10 @@ export function AppLayout(): React.JSX.Element {
             <Sidebar collapsed={collapsed} />
             {!collapsed && <SidebarResizer widthRem={widthRem} onResize={setSidebarWidth} />}
             <div className="main-column">
-              <main className="main">
+              {/* tabIndex: the main area is the app's scroll container; on
+                  pages without focusable content (e.g. legal texts) keyboard
+                  users could otherwise not scroll it (#165, WCAG 2.1.1). */}
+              <main className="main" tabIndex={0}>
                 <Outlet />
               </main>
               {/* Outside the scroll container: always visible at the bottom
diff --git a/apps/web/src/layout/TopBar.tsx b/apps/web/src/layout/TopBar.tsx
index ee9fff5..577d42f 100644
--- a/apps/web/src/layout/TopBar.tsx
+++ b/apps/web/src/layout/TopBar.tsx
@@ -96,7 +96,8 @@ export function TopBar({ sidebarCollapsed, onToggleSidebar }: TopBarProps): Reac
           onClick={() => setSearchOpen(true)}
           aria-label={t('search:open')}
         >
-          <Search aria-hidden /> {t('search:open')}
+          <Search aria-hidden />
+          <span className="topbar__search-text">{t('search:open')}</span>
         </button>
       )}
       {searchOpen && user && <SearchPalette onClose={() => setSearchOpen(false)} />}
diff --git a/apps/web/src/styles/base.css b/apps/web/src/styles/base.css
index 3cedb5a..4dc4299 100644
--- a/apps/web/src/styles/base.css
+++ b/apps/web/src/styles/base.css
@@ -53,7 +53,9 @@ button {
 /* Layout skeleton */
 .app {
   display: grid;
-  grid-template-rows: var(--topbar-height) 1fr;
+  /* minmax: the topbar row may grow when its controls wrap on narrow
+     viewports (issue #165, WCAG 1.4.10). */
+  grid-template-rows: minmax(var(--topbar-height), auto) 1fr;
   height: 100%;
 }
 
@@ -70,6 +72,10 @@ button {
   align-items: center;
   gap: var(--space-4);
   padding: 0 var(--space-4);
+  /* Same #100 pattern as .app-body: without this the topbar's min-content
+     width sizes the shared grid column and forces page-level horizontal
+     scrolling on narrow viewports (issue #165, WCAG 1.4.10). */
+  min-width: 0;
   border-bottom: 1px solid var(--color-border);
   background: var(--color-bg);
   /* Own stacking context above the scrolling `.main` content: the nav comes
@@ -91,6 +97,39 @@ button {
   flex: 1;
 }
 
+/* Narrow viewports (issue #165, WCAG 1.4.10): the topbar wraps onto a
+   second row instead of pushing the page wider than the viewport; every
+   control stays visible and reachable. The search button drops to its
+   icon (the aria-label carries the name). The expanded sidebar becomes
+   an overlay above the content — 256 px beside a 320 px viewport would
+   leave the content a sliver and force page-level horizontal scrolling. */
+@media (max-width: 40rem) {
+  .topbar {
+    flex-wrap: wrap;
+    row-gap: 0;
+    padding: var(--space-1) var(--space-2);
+  }
+
+  .topbar__search-text {
+    display: none;
+  }
+
+  .app-body {
+    position: relative;
+  }
+
+  .sidebar:not(.sidebar--collapsed) {
+    position: absolute;
+    inset: 0 auto 0 0;
+    z-index: 25;
+    box-shadow: 2px 0 8px rgb(0 0 0 / 0.15);
+  }
+
+  .sidebar-resizer {
+    display: none;
+  }
+}
+
 .sidebar {
   width: var(--sidebar-width);
   flex-shrink: 0;
@@ -715,6 +754,9 @@ button {
   align-items: center;
   gap: var(--space-2);
   flex-shrink: 0;
+  /* Wrap instead of widening the page on narrow viewports (#165). */
+  flex-wrap: wrap;
+  min-width: 0;
   padding: var(--space-2) var(--space-8);
   border-top: 1px solid var(--color-border);
   background: var(--color-bg);
@@ -958,6 +1000,9 @@ button {
 
 .editor-page__title {
   flex: 1;
+  /* An input's intrinsic size-attribute width must not set the page's
+     minimum width on narrow viewports (#165). */
+  min-width: 0;
   border: none;
   background: none;
   font-family: var(--font-heading);
@@ -3784,6 +3829,9 @@ ul[data-type='task_list'] li p:last-of-type {
 @media (max-width: 60rem) {
   .settings-layout {
     flex-direction: column;
+    /* Override the row layout's flex-start: stacked, the content column
+       must stretch to the viewport instead of its widest control (#165). */
+    align-items: stretch;
   }
 
   .settings-nav {
-- 
2.45.2