Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y + CSS cleanup: fix label associations, remove orphaned style blocks, suppress autofocus

Browse Source 
- Add for/id to all form label+input pairs: person, address, contact, users pages
- Convert decorative section-header <label> elements to <p> in launcher cfg files
- Add for/id to dynamic labels in leads custom questions, badges review form
- Change non-form <label> wrappers for custom editors to <div>/<p>
- Remove orphaned <style> blocks (ae_quick_modal_container/ae_quick_popover) from
  people/[person_id]/+page.svelte and location_view.svelte

Result: 95 warnings -> 26 warnings (remaining are lu_* false positives + 1 legacy CSS)
This commit is contained in:
Scott Idem
2026-03-05 21:28:16 -05:00
parent b766942373
commit 609818c361
21 changed files with 154 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/routes/core/addresses/ae_comp__address_form.svelte
View File

@@ -148,28 +148,28 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Location Details</legend>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Attention To / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
<label class="label text-xs font-bold opacity-75" for="addr-attention-to">Attention To / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-attention-to" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Organization Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
<label class="label text-xs font-bold opacity-75" for="addr-org-name">Organization Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-org-name" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Address Line 1</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
<label class="label text-xs font-bold opacity-75" for="addr-line-1">Address Line 1</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-1" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
</div>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Line 2</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
<label class="label text-xs font-bold opacity-75" for="addr-line-2">Line 2</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Line 3</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
<label class="label text-xs font-bold opacity-75" for="addr-line-3">Line 3</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-3" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
</div>
</div>
</fieldset>
@@ -180,25 +180,25 @@
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">City</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.city} required placeholder="Metropolis" />
<label class="label text-xs font-bold opacity-75" for="addr-city">City</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-city" type="text" bind:value={formData.city} required placeholder="Metropolis" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">State / Province</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.state_province} placeholder="NY" />
<label class="label text-xs font-bold opacity-75" for="addr-state">State / Province</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-state" type="text" bind:value={formData.state_province} placeholder="NY" />
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Postal Code</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.postal_code} placeholder="12345" />
<label class="label text-xs font-bold opacity-75" for="addr-postal">Postal Code</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-postal" type="text" bind:value={formData.postal_code} placeholder="12345" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Country (Code)</label>
<label class="label text-xs font-bold opacity-75" for="addr-country">Country (Code)</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Globe size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.country} placeholder="USA" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-country" type="text" bind:value={formData.country} placeholder="USA" />
</div>
</div>
</div>
@@ -209,26 +209,26 @@
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Technical & GIS</legend>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Timezone</label>
<label class="label text-xs font-bold opacity-75" for="addr-timezone">Timezone</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Clock size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-timezone" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Latitude</label>
<label class="label text-xs font-bold opacity-75" for="addr-latitude">Latitude</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Navigation size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.latitude} placeholder="40.7128" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-latitude" type="text" bind:value={formData.latitude} placeholder="40.7128" />
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Longitude</label>
<label class="label text-xs font-bold opacity-75" for="addr-longitude">Longitude</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Navigation size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-longitude" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
</div>
</div>
</div>
@@ -254,8 +254,8 @@
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Internal Notes</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
<label class="label text-xs font-bold opacity-75" for="addr-notes">Internal Notes</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-notes" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
</div>
</fieldset>
</div>