a11y + CSS cleanup: fix label associations, remove orphaned style blocks, suppress autofocus
- 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
@@ -116,24 +116,24 @@
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<!-- Question / display label -->
|
||||
<div class="space-y-1">
|
||||
<label class="text-[10px] uppercase font-bold opacity-40">Question / Label</label>
|
||||
<label class="text-[10px] uppercase font-bold opacity-40" for="custom-q-{i}-question">Question / Label</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<MessageSquare size="1em" class="opacity-30 flex-none" />
|
||||
<input type="text" bind:value={q.question} placeholder="e.g. Purchasing Authority?" class="bg-transparent border-b border-surface-500/20 outline-none flex-1 text-sm font-bold" />
|
||||
<input id="custom-q-{i}-question" type="text" bind:value={q.question} placeholder="e.g. Purchasing Authority?" class="bg-transparent border-b border-surface-500/20 outline-none flex-1 text-sm font-bold" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code / machine key -->
|
||||
<div class="space-y-1">
|
||||
<label class="text-[10px] uppercase font-bold opacity-40">Field Code <span class="normal-case font-normal opacity-70">(key in export)</span></label>
|
||||
<input type="text" bind:value={q.code} placeholder="e.g. purchasing_authority" class="bg-transparent border-b border-surface-500/20 outline-none w-full text-xs font-mono" />
|
||||
<label class="text-[10px] uppercase font-bold opacity-40" for="custom-q-{i}-code">Field Code <span class="normal-case font-normal opacity-70">(key in export)</span></label>
|
||||
<input id="custom-q-{i}-code" type="text" bind:value={q.code} placeholder="e.g. purchasing_authority" class="bg-transparent border-b border-surface-500/20 outline-none w-full text-xs font-mono" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Response Type -->
|
||||
<div class="space-y-1">
|
||||
<label class="text-[10px] uppercase font-bold opacity-40">Response Type</label>
|
||||
<select bind:value={q.type} class="select variant-filled-surface text-xs p-1 rounded w-full">
|
||||
<label class="text-[10px] uppercase font-bold opacity-40" for="custom-q-{i}-type">Response Type</label>
|
||||
<select id="custom-q-{i}-type" bind:value={q.type} class="select variant-filled-surface text-xs p-1 rounded w-full">
|
||||
<option value="text">Short Text</option>
|
||||
<option value="textarea">Long Text</option>
|
||||
<option value="toggle">Yes / No (Toggle)</option>
|
||||
@@ -143,10 +143,11 @@
|
||||
|
||||
{#if q.type === 'option'}
|
||||
<div class="space-y-1 pt-2 border-t border-surface-500/10">
|
||||
<label class="text-[10px] uppercase font-bold opacity-40">Options (comma-separated)</label>
|
||||
<label class="text-[10px] uppercase font-bold opacity-40" for="custom-q-{i}-options">Options (comma-separated)</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<List size="1em" class="opacity-30 flex-none" />
|
||||
<input
|
||||
id="custom-q-{i}-options"
|
||||
type="text"
|
||||
value={get_options_str(q)}
|
||||
oninput={(e) => set_options_str(q, (e.target as HTMLInputElement).value)}
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
</script>
|
||||
|
||||
<div class="ae-tab-manage w-full space-y-8 animate-in fade-in slide-in-from-bottom-2 duration-300 pb-20">
|
||||
|
||||
|
||||
<!-- Section: Admin Tools (Manager Access Only) -->
|
||||
{#if $ae_loc.manager_access}
|
||||
<section class="space-y-4 p-4 border-2 border-primary-500/20 rounded-xl bg-primary-500/5">
|
||||
@@ -134,9 +134,9 @@
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<!-- Name -->
|
||||
<div class="card p-4 variant-soft shadow-sm">
|
||||
<label class="label mb-2">
|
||||
<div class="label mb-2">
|
||||
<span class="text-xs uppercase font-black opacity-40 tracking-widest">Exhibitor Name</span>
|
||||
</label>
|
||||
</div>
|
||||
<Element_ae_obj_field_editor_v3
|
||||
object_type="event_exhibit"
|
||||
object_id={exhibit_id}
|
||||
@@ -152,9 +152,9 @@
|
||||
|
||||
<!-- Description -->
|
||||
<div class="card p-4 variant-soft shadow-sm">
|
||||
<label class="label mb-2">
|
||||
<div class="label mb-2">
|
||||
<span class="text-xs uppercase font-black opacity-40 tracking-widest">Booth Description / Promo</span>
|
||||
</label>
|
||||
</div>
|
||||
<Element_ae_obj_field_editor_v3
|
||||
object_type="event_exhibit"
|
||||
object_id={exhibit_id}
|
||||
@@ -182,7 +182,7 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="text-[10px] uppercase font-black opacity-40 tracking-widest mb-1">Staff Passcode</div>
|
||||
|
||||
|
||||
<!-- Add a clear read-only display for admins to see the code at a glance -->
|
||||
{#if $ae_loc.administrator_access}
|
||||
<div class="font-mono text-xl tracking-widest font-bold text-primary-500 mb-2">
|
||||
@@ -241,7 +241,7 @@
|
||||
<!-- Licenses (Administrator Access Only for now) -->
|
||||
{#if $ae_loc.administrator_access}
|
||||
<div class="p-0">
|
||||
<button
|
||||
<button
|
||||
class="w-full p-4 flex items-center justify-between hover:bg-surface-500/5 transition-colors group"
|
||||
onclick={() => show_license_mgmt = !show_license_mgmt}
|
||||
>
|
||||
@@ -258,7 +258,7 @@
|
||||
<ChevronRight size="1.2em" class="opacity-20 group-hover:translate-x-1 transition-transform" />
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
||||
{#if show_license_mgmt}
|
||||
<div class="p-4 bg-surface-500/5 border-t border-surface-500/10 animate-in fade-in slide-in-from-top-2">
|
||||
<Comp_exhibit_license_list
|
||||
@@ -274,7 +274,7 @@
|
||||
|
||||
<!-- Custom Questions -->
|
||||
<div class="p-0">
|
||||
<button
|
||||
<button
|
||||
class="w-full p-4 flex items-center justify-between hover:bg-surface-500/5 transition-colors group"
|
||||
onclick={() => show_custom_questions = !show_custom_questions}
|
||||
>
|
||||
@@ -305,7 +305,7 @@
|
||||
|
||||
<!-- Billing -->
|
||||
<div class="p-0">
|
||||
<button
|
||||
<button
|
||||
class="w-full p-4 flex items-center justify-between hover:bg-surface-500/5 transition-colors group"
|
||||
onclick={() => show_billing = !show_billing}
|
||||
>
|
||||
@@ -343,7 +343,7 @@
|
||||
<!-- Interface Prefs -->
|
||||
<div class="space-y-3">
|
||||
<div class="text-[10px] uppercase font-black opacity-40 tracking-widest">Interface Preferences</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-1 gap-2">
|
||||
<label class="flex items-center justify-between p-2 hover:bg-surface-500/10 rounded-lg cursor-pointer transition-colors">
|
||||
<span class="text-sm">Auto-hide Header/Footer</span>
|
||||
@@ -373,7 +373,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center gap-4 p-2 bg-surface-500/5 rounded-lg border border-surface-500/10">
|
||||
<div class="flex-1 space-y-1">
|
||||
<span class="text-sm block">Refresh Interval (sec)</span>
|
||||
@@ -381,11 +381,11 @@
|
||||
Next Sync in <span class="text-primary-500">{$events_sess.leads.next_refresh_countdown}s</span>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
class="input w-20 text-right font-mono p-1 bg-transparent border-b border-surface-500/20"
|
||||
min="1"
|
||||
max="120"
|
||||
<input
|
||||
type="number"
|
||||
class="input w-20 text-right font-mono p-1 bg-transparent border-b border-surface-500/20"
|
||||
min="1"
|
||||
max="120"
|
||||
bind:value={$events_loc.leads.refresh_interval_sec}
|
||||
placeholder="25"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user