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

48
src/routes/core/contacts/ae_comp__contact_form.svelte
View File

@@ -140,22 +140,22 @@
<!-- Identity Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity & Branding</legend>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Title / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.title} required placeholder="Business Office" />
<label class="label text-xs font-bold opacity-75" for="contact-title">Title / Name</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-title" type="text" bind:value={formData.title} required placeholder="Business Office" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Tagline</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
<label class="label text-xs font-bold opacity-75" for="contact-tagline">Tagline</label>
<input class="input variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-tagline" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Email Address</label>
<label class="label text-xs font-bold opacity-75" for="contact-email">Email Address</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Mail size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="email" bind:value={formData.email} placeholder="contact@example.com" />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-email" type="email" bind:value={formData.email} placeholder="contact@example.com" />
</div>
</div>
</fieldset>
@@ -163,29 +163,29 @@
<!-- Communication Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Phone & Web</legend>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Mobile Phone</label>
<label class="label text-xs font-bold opacity-75" for="contact-phone-mobile">Mobile Phone</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Phone size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-phone-mobile" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Office Phone</label>
<label class="label text-xs font-bold opacity-75" for="contact-phone-office">Office Phone</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Phone size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-phone-office" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
</div>
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Website URL</label>
<label class="label text-xs font-bold opacity-75" for="contact-website">Website URL</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="url" bind:value={formData.website_url} placeholder="https://..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-website" type="url" bind:value={formData.website_url} placeholder="https://..." />
</div>
</div>
</fieldset>
@@ -193,28 +193,28 @@
<!-- Social Media Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Social Media</legend>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">LinkedIn URL</label>
<label class="label text-xs font-bold opacity-75" for="contact-linkedin">LinkedIn URL</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Linkedin size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-linkedin" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
</div>
</div>
<div class="grid grid-cols-2 gap-2">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Facebook URL</label>
<label class="label text-xs font-bold opacity-75" for="contact-facebook">Facebook URL</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Facebook size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-facebook" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
</div>
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75">Instagram URL</label>
<label class="label text-xs font-bold opacity-75" for="contact-instagram">Instagram URL</label>
<div class="input-group input-group-divider grid-cols-[auto_1fr] variant-filled-surface rounded-lg overflow-hidden">
<div class="input-group-shim"><Instagram size={16} /></div>
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
<input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-instagram" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
</div>
</div>
</div>
@@ -223,7 +223,7 @@
<!-- Status Section -->
<fieldset class="space-y-4">
<legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
<div class="flex flex-wrap gap-4 pt-2">
<label class="flex items-center space-x-2 cursor-pointer">
<input class="checkbox" type="checkbox" bind:checked={formData.enable} />
@@ -240,8 +240,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="Additional details..."></textarea>
<label class="label text-xs font-bold opacity-75" for="contact-notes">Internal Notes</label>
<textarea class="textarea variant-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-notes" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
</div>
</fieldset>
</div>