#164: ARIA-Semantik — Editorfläche, Autocomplete-Listboxen, Sidebar, Toolbar

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

@@ -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"

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')}

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"

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 ? (

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

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"

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"
 }

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"
 }