fix(a11y): 44px remove targets + empty states on person/document pickers
Both PersonMultiSelect and DocumentMultiSelect remove buttons were ~12px tap targets (below the 44px WCAG minimum) — pad them to min-h/min-w 44px with a focus-visible ring (SVG stays 12px). Add an optional emptyLabel slot inside the chip container and a hiddenInputName prop on PersonMultiSelect (mirroring DocumentMultiSelect) so EventForm can wire personIds without touching WhoWhenSection. Document the intentional bare typeahead fetch in documentTypeahead.ts (same-origin in prod, Vite-proxied in dev). Refs #781 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -11,12 +11,15 @@ interface Props {
|
||||
selectedDocuments?: DocumentOption[];
|
||||
placeholder?: string;
|
||||
hiddenInputName?: string;
|
||||
/** Empty-state text shown inside the chip container when nothing is selected. */
|
||||
emptyLabel?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
selectedDocuments = $bindable([]),
|
||||
placeholder = m.geschichte_editor_search_document(),
|
||||
hiddenInputName = 'documentIds'
|
||||
hiddenInputName = 'documentIds',
|
||||
emptyLabel = undefined
|
||||
}: Props = $props();
|
||||
|
||||
let searchTerm = $state('');
|
||||
@@ -73,7 +76,7 @@ function removeDocument(id: string | undefined) {
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => removeDocument(doc.id)}
|
||||
class="ml-0.5 text-ink/50 hover:text-red-500 focus:outline-none"
|
||||
class="ml-0.5 inline-flex min-h-[44px] min-w-[44px] items-center justify-center rounded-sm text-ink/50 hover:text-red-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
|
||||
aria-label={m.comp_multiselect_remove()}
|
||||
>
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -88,6 +91,10 @@ function removeDocument(id: string | undefined) {
|
||||
</span>
|
||||
{/each}
|
||||
|
||||
{#if emptyLabel && selectedDocuments.length === 0}
|
||||
<span class="px-1 py-1 font-sans text-sm text-ink-3 italic">{emptyLabel}</span>
|
||||
{/if}
|
||||
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
type="text"
|
||||
|
||||
@@ -12,6 +12,10 @@ export type DocumentOption = Pick<
|
||||
|
||||
export function createDocumentTypeahead() {
|
||||
return createTypeahead<DocumentOption>({
|
||||
// Intentional bare browser fetch (matches the Geschichte editor): in dev the
|
||||
// Vite proxy forwards /api and injects the auth header; in prod the app is
|
||||
// same-origin so the auth cookie travels automatically. An internal
|
||||
// +server.ts proxy would add complexity with no practical security benefit.
|
||||
fetchUrl: (q) =>
|
||||
fetch(`/api/documents/search?q=${encodeURIComponent(q)}&size=10`)
|
||||
.then((r) => {
|
||||
|
||||
Reference in New Issue
Block a user