feat(document): explain auto-generated title under the edit title field (#726)
Adds the FR-TITLE-005 helper line under the title input in DescriptionSection, shown only on the single-document edit form via a new showTitleHelp prop (off for the new-document and bulk-edit forms). It is wired to the input with aria-describedby and uses text-ink-3 (WCAG AA on bg-surface). New Paraglide key form_helper_title_autogenerated in de/en/es. Adds a component test for the helper + aria wiring and an end-to-end pass: create an auto-titled doc, edit its date, and see the title follow on the detail page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -17,6 +17,7 @@ let {
|
||||
titleRequired = false,
|
||||
suggestedTitle = '',
|
||||
hideTitle = false,
|
||||
showTitleHelp = false,
|
||||
editMode = false
|
||||
}: {
|
||||
tags?: Tag[];
|
||||
@@ -31,6 +32,7 @@ let {
|
||||
titleRequired?: boolean;
|
||||
suggestedTitle?: string;
|
||||
hideTitle?: boolean;
|
||||
showTitleHelp?: boolean;
|
||||
editMode?: boolean;
|
||||
} = $props();
|
||||
|
||||
@@ -72,8 +74,14 @@ const titleValue = $derived(titleDirty ? currentTitle : suggestedTitle || curren
|
||||
titleDirty = true;
|
||||
}}
|
||||
required={titleRequired}
|
||||
aria-describedby={showTitleHelp ? 'title-help' : undefined}
|
||||
class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||||
/>
|
||||
{#if showTitleHelp}
|
||||
<p id="title-help" class="mt-1 text-xs text-ink-3">
|
||||
{m.form_helper_title_autogenerated()}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user