@ -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"
|
||||
|
||||
@ -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')}
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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 ? (
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user