6ef888a128
Wrapping the editor with pointer-events-none was visual-only — keyboard users could still tab into the contenteditable and type. Wire `editable: !disabled` on the Tiptap Editor and a reactive `$effect` that calls setEditable when the prop flips after mount; expose `aria-disabled="true"` on the wrapper so screen readers announce the deactivated state. Tests assert contenteditable=false and aria-disabled=true when disabled; contenteditable=true otherwise. Closes WCAG 2.1.1 / 4.1.2 — Felix #5615 + Leonie #5621 + Nora #5618 BLOCKER. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
40 lines
1.0 KiB
Svelte
40 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { untrack } from 'svelte';
|
|
import PersonMentionEditor from './PersonMentionEditor.svelte';
|
|
import type { components } from '$lib/generated/api';
|
|
|
|
type PersonMention = components['schemas']['PersonMention'];
|
|
|
|
type Props = {
|
|
initialValue?: string;
|
|
initialMentions?: PersonMention[];
|
|
placeholder?: string;
|
|
disabled?: boolean;
|
|
onChange: (snapshot: { value: string; mentionedPersons: PersonMention[] }) => void;
|
|
};
|
|
|
|
let {
|
|
initialValue = '',
|
|
initialMentions = [],
|
|
placeholder,
|
|
disabled = false,
|
|
onChange
|
|
}: Props = $props();
|
|
|
|
// initial* props seed mount-time state; reading them inside untrack signals
|
|
// the intentional one-shot capture and silences state_referenced_locally.
|
|
let value = $state(untrack(() => initialValue));
|
|
let mentionedPersons = $state<PersonMention[]>(untrack(() => [...initialMentions]));
|
|
|
|
$effect(() => {
|
|
onChange({ value, mentionedPersons: [...mentionedPersons] });
|
|
});
|
|
</script>
|
|
|
|
<PersonMentionEditor
|
|
bind:value={value}
|
|
bind:mentionedPersons={mentionedPersons}
|
|
placeholder={placeholder}
|
|
disabled={disabled}
|
|
/>
|