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

6
src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_review_form.svelte
View File

@@ -1031,9 +1031,10 @@
{#each [1, 2, 3, 4, 5, 6, 7, 8] as idx}
{#if ($lq__event_badge_obj[`other_${idx}_code`] || local_edit_active)}
<div class="space-y-1">
<label class="block text-xs text-gray-500">Option {idx}</label>
<label class="block text-xs text-gray-500" for="badge-option-{idx}">Option {idx}</label>
{#if local_edit_active}
<input
id="badge-option-{idx}"
type="text"
class="input input-sm w-full"
value={get_option_code(idx) ?? ''}
@@ -1062,9 +1063,10 @@
{#each [1, 2, 3, 4, 5, 6, 7, 8] as idx}
{#if ($lq__event_badge_obj[`ticket_${idx}_code`] || local_edit_active)}
<div class="space-y-1">
<label class="block text-xs text-gray-500">Ticket {idx}</label>
<label class="block text-xs text-gray-500" for="badge-ticket-{idx}">Ticket {idx}</label>
{#if local_edit_active}
<input
id="badge-ticket-{idx}"
type="text"
class="input input-sm w-full"
value={get_ticket_code(idx) ?? ''}

12
src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_app_modes.svelte
View File

@@ -20,8 +20,8 @@
<div class="col-span-full flex flex-col gap-3">
<!-- 1. App Mode Selection -->
<div class="flex flex-col gap-1">
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Operational Environment</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Operational Environment</p
>
<div class="grid grid-cols-3 gap-1 bg-surface-500/5 p-1 rounded-lg">
<button
@@ -58,8 +58,8 @@
<div
class="flex flex-col gap-1 border-t border-surface-500/10 pt-2 mt-1"
>
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Interface Visibility</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Interface Visibility</p
>
<div class="grid grid-cols-2 gap-2 p-1">
<label class="flex items-center gap-2 cursor-pointer group">
@@ -135,8 +135,8 @@
<div
class="col-span-full border-t border-surface-500/20 pt-3 mt-1 flex flex-col gap-2"
>
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Technical Layout</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Technical Layout</p
>
<div class="grid grid-cols-1 gap-2 p-1">
<label class="flex items-center gap-2 cursor-pointer group">

8
src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_controller.svelte
View File

@@ -48,8 +48,8 @@
<!-- 2. Controller Mode Selection -->
<div class="flex flex-col gap-1">
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Controller Strategy</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Controller Strategy</p
>
<select
bind:value={$events_loc.launcher.controller}
@@ -103,8 +103,8 @@
<div
class="col-span-full border-t border-surface-500/20 pt-3 mt-1 flex flex-col gap-2"
>
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Channel Configuration</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Channel Configuration</p
>
<div class="flex gap-1">
<input

4
src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_local_actions.svelte
View File

@@ -133,8 +133,8 @@
<div
class="col-span-full border-t border-surface-500/20 pt-2 mt-1 flex flex-col gap-1"
>
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>API Context</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>API Context</p
>
<div
class="bg-black/10 p-2 rounded text-[9px] font-mono opacity-60 break-all leading-tight"

16
src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_native_os.svelte
View File

@@ -66,8 +66,8 @@
<!-- 1. Window & Folders (Common) -->
<div class="flex flex-col gap-2">
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Folders & View</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Folders & View</p
>
<div class="grid grid-cols-2 gap-1">
<button
@@ -109,8 +109,8 @@
<!-- 2. Presentation Remote Control (Common) -->
<div class="flex flex-col gap-2">
<div class="flex flex-row justify-between items-center px-1">
<label class="text-[9px] font-bold uppercase opacity-50"
>Remote Control</label
<p class="text-[9px] font-bold uppercase opacity-50"
>Remote Control</p
>
<select
bind:value={remote_app}
@@ -171,8 +171,8 @@
>
<div class="grid grid-cols-2 gap-2">
<div class="flex flex-col gap-1">
<label class="text-[9px] font-bold uppercase opacity-50"
>System Actions</label
<p class="text-[9px] font-bold uppercase opacity-50"
>System Actions</p
>
<div class="grid grid-cols-1 gap-1">
<button
@@ -237,8 +237,8 @@
</div>
<div class="flex flex-col gap-1">
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Terminal Access</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Terminal Access</p
>
<div class="flex gap-1">
<input

4
src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_screen_saver.svelte
View File

@@ -23,8 +23,8 @@
<!-- 1. Technical Timers (Edit Mode Only) -->
{#if $ae_loc.edit_mode}
<div class="flex flex-col gap-2">
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Screen Saver Timers (ms)</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Screen Saver Timers (ms)</p
>
<div
class="grid grid-cols-1 gap-2 bg-surface-500/5 p-2 rounded border border-surface-500/10"

8
src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_sync_timers.svelte
View File

@@ -43,9 +43,9 @@
<!-- Technical Timers (Edit Mode Only) -->
{#if $ae_loc.edit_mode}
<div class="flex flex-col gap-2">
<label
<p
class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Polling Periods (ms)</label
>Polling Periods (ms)</p
>
<div class="grid grid-cols-2 gap-2">
<div class="flex flex-col gap-1">
@@ -125,9 +125,9 @@
<div
class="flex flex-col gap-1 mt-1 border-t border-surface-500/10 pt-2"
>
<label
<p
class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Cache Structure</label
>Cache Structure</p
>
<div class="flex items-center justify-between px-1">
<span class="text-[9px]">Hash Prefix Length</span>

12
src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_template.svelte
View File

@@ -56,8 +56,8 @@
<!-- B. COMMON GRID SECTION (Read Only / High Level) -->
<div class="flex flex-col gap-2">
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Standard Actions</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Standard Actions</p
>
<!-- Action Buttons -->
@@ -108,8 +108,8 @@
<!-- C. STATUS & GAUGES SECTION -->
<div class="flex flex-col gap-2">
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Current Status</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Current Status</p
>
<div
@@ -224,8 +224,8 @@
<!-- Terminal / Output Log -->
<div class="flex flex-col gap-1">
<label class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Debug Output</label
<p class="text-[9px] font-bold uppercase opacity-50 ml-1"
>Debug Output</p
>
<pre
class="text-[8px] bg-black text-green-500 p-2 overflow-x-auto rounded border border-surface-500/50 max-h-24 shadow-inner">

4
src/routes/events/[event_id]/(launcher)/cfg_components/launcher_cfg_updates.svelte
View File

@@ -69,8 +69,8 @@
class="flex flex-col gap-2 bg-surface-500/5 p-2 rounded border border-surface-500/10 mb-1"
>
<div class="flex flex-row justify-between items-center px-1">
<label class="text-[9px] font-bold uppercase opacity-50"
>Source Type</label
<p class="text-[9px] font-bold uppercase opacity-50"
>Source Type</p
>
<div class="flex gap-2">
<label class="flex items-center gap-1 text-[10px]">

15
src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_comp__exhibit_custom_questions.svelte
View File

@@ -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)}

34
src/routes/events/[event_id]/(leads)/leads/exhibit/[exhibit_id]/ae_tab__manage.svelte
View File

@@ -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"
/>

39
src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/location_view.svelte
View File

@@ -328,42 +328,3 @@
</div>
</section>
{/if}
<style lang="postcss">
/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
div.ae_quick_modal_container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color: hsla(0, 0%, 50%, 0.75);
/* padding: 1rem; */
/* border: solid thick red; */
}
/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
section.ae_quick_popover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
background-color: hsla(0, 0%, 97%, 0.97);
/* margin-top: 1rem;
margin-bottom: 2rem; */
/* padding: 1rem;
padding-top:4rem; */
/* padding-bottom: 4rem; */
border: solid thin hsla(0, 0%, 0%, 0.9);
border-radius: 0.5rem;
box-shadow: 0 0 1rem hsla(0, 0%, 0%, 0.5);
min-height: 30%;
/* max-height: 100vh; */
min-width: 80%;
/* overflow-y: auto; */
}
</style>

1
src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/+page.svelte
View File

@@ -482,6 +482,7 @@
<span class="fas fa-remove-format"></span>
</button>
<!-- svelte-ignore a11y_autofocus -->
<input
type="search"
placeholder="Search for a session"

4
src/routes/events/[event_id]/(pres_mgmt)/reports/reports_presenters.svelte
View File

@@ -274,11 +274,11 @@
// We need to loop through the array of objects and get the event_presenter_id_random from each object a new list of event_presenter_id_randoms. Then we can use this list to get the full objects from the database.
// let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
// for (let i = 0; i < $events_slct.event_presenter_obj_li.length; i++) {
// tmp_li.push($events_slct.event_presenter_obj_li[i].event_presenter_id_random);
// tmp_li.push($events_slct.event_presenter_obj_li[i].event_presenter_id);
// }
// event_presenter_id_random_li = tmp_li;
// event_presenter_id_random_li = $events_slct.event_presenter_obj_li.map(presenter_obj => presenter_obj.event_presenter_id_random);
// event_presenter_id_random_li = $events_slct.event_presenter_obj_li.map(presenter_obj => presenter_obj.event_presenter_id);
// Finally done with the search.
$events_sess.pres_mgmt.status_qry__search = 'done';