refactor(frontend): Extract shared form primitives (#114)#122
Conversation
| <div> | ||
| <label for={id} class={formClasses.label}> | ||
| {label} | ||
| {#if required}<span class="text-red-500">*</span>{/if} |
There was a problem hiding this comment.
💡 Accessibility: Add aria-hidden to required asterisk indicator
Screen readers will announce the * character as "asterisk", which can be confusing since the semantic "required" information is already conveyed by the required attribute on the <input> element.
Suggested fix:
{#if required}<span class="text-red-500" aria-hidden="true">*</span>{/if}There was a problem hiding this comment.
Code review complete. No critical or important issues found. One minor accessibility suggestion on FormInput.svelte (aria-hidden on required asterisk indicator). Changes look good overall - solid refactoring with proper Svelte 5 runes usage, i18n compliance maintained, and backward-compatible autoFocus enhancement.
| Automated Code Review | Commit: 4f02183 | Reviewed: 2026-03-08 | Status: Approved | Critical: 0 | Important: 0 | Suggestion: 0 | Previous aria-hidden suggestion resolved (already in code at FormInput.svelte:35) | AGENTS.md: Security pass, Architecture pass, i18n pass, Testing pass | Summary: Clean refactor - shared form primitives, createDirtyTracker, and 9 migrated forms eliminate ~280 lines of duplication. autoFocus backward-compatible. No issues found. | CI: https://github.com/datenknoten/freundebuch/actions/runs/22818235915 |
…source duplication (#114) Create reusable UI components (FormInput, FormSelect, FormCheckbox, FormTextarea), a shared Tailwind class constants module (formClasses), and a dirty-tracking utility (createDirtyTracker) to replace ~700 lines of structural duplication across 9 subresource edit forms. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
e1c9788 to
4f02183
Compare
There was a problem hiding this comment.
Code review passed at commit 4f02183. No critical or important issues. The previous accessibility suggestion (aria-hidden on required asterisk in FormInput.svelte) is already addressed. The refactor is clean and follows all project conventions.
|
🎉 This PR is included in version 2.65.5 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Summary
FormInput,FormSelect,FormCheckbox,FormTextarea), shared Tailwind class constants (formClasses), and a dirty-tracking utility (createDirtyTracker) inapps/frontend/src/lib/components/ui/enabledparameter toautoFocusaction to support conditional autofocus in form componentsCloses #114
Test plan
pnpm --filter @freundebuch/frontend checkpasses (0 errors, 23 pre-existing warnings)pnpm --filter @freundebuch/frontend buildsucceeds🤖 Generated with Claude Code