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

refactor: address Svelte compiler warnings and improve a11y/security

Browse Source 
- Convert decorative labels to spans to fix a11y warnings in Accounts and Sites pages
- Add rel="noopener noreferrer" to external links for security
- Use untrack for Svelte 5 state initialization from props in e_app_sign_in_out.svelte
- Make TipTap editor styles global to fix scoping warnings for dynamic content
This commit is contained in:
Scott Idem
2026-02-09 20:22:51 -05:00
parent c1750dd04e
commit f24449457f
7 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/ae_core/ae_comp__site_config_editor.svelte
View File

@@ -117,7 +117,7 @@
<div class="flex gap-2">
<input type="text" bind:value={cfg_json.header_image_path} class="input variant-form-material grow" placeholder="https://..." />
{#if cfg_json.header_image_path}
<a href={cfg_json.header_image_path} target="_blank" class="btn-icon variant-soft-surface"><ExternalLink size="1.2em" /></a>
<a href={cfg_json.header_image_path} target="_blank" rel="noopener noreferrer" class="btn-icon variant-soft-surface"><ExternalLink size="1.2em" /></a>
{/if}
</div>
</label>

8
src/lib/app_components/e_app_sign_in_out.svelte
View File

@@ -37,10 +37,10 @@
let { log_lvl = $bindable(0), data = null, hidden = $bindable(true) }: Props = $props();
let url_user_id = $state(data?.url?.searchParams?.get('user_id'));
let url_user_key = $state(data?.url?.searchParams?.get('user_key')); // Reminder that "key" is the site's auth key.
let url_user_username = $state(data?.url?.searchParams?.get('username'));
let url_user_email = $state(data?.url?.searchParams?.get('user_email'));
let url_user_id = $state(untrack(() => data?.url?.searchParams?.get('user_id')));
let url_user_key = $state(untrack(() => data?.url?.searchParams?.get('user_key'))); // Reminder that "key" is the site's auth key.
let url_user_username = $state(untrack(() => data?.url?.searchParams?.get('username')));
let url_user_email = $state(untrack(() => data?.url?.searchParams?.get('user_email')));
$effect(() => {
// NOTE: Sync URL params to state.

2
src/lib/elements/element_tiptap_editor.scss
View File

@@ -1,5 +1,5 @@
/* Basic editor styles */
.tiptap {
:global(.tiptap) {
:first-child {
margin-top: 0;
}

6
src/routes/core/accounts/+page.svelte
View File

@@ -76,7 +76,7 @@
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
<div class="flex flex-wrap gap-6 items-end">
<div class="flex-1 min-w-[280px] space-y-1">
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Accounts</label>
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Accounts</span>
<div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
<div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
<Search size={18} class="opacity-50" />
@@ -99,7 +99,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</label>
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_accounts}>
<option value="all">All Statuses</option>
<option value="enabled">Enabled Only</option>
@@ -108,7 +108,7 @@
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</label>
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_accounts}>
<option value="all">All Visibility</option>
<option value="not_hidden">Not Hidden Only</option>

2
src/routes/core/contacts/[contact_id]/+page.svelte
View File

@@ -125,7 +125,7 @@
<Globe size={10} /> Website
</p>
{#if contact.website_url}
<a href={contact.website_url} target="_blank" class="font-bold text-secondary-500 hover:underline flex items-center gap-2 truncate">
<a href={contact.website_url} target="_blank" rel="noopener noreferrer" class="font-bold text-secondary-500 hover:underline flex items-center gap-2 truncate">
{contact.website_url} <Link2 size={12} />
</a>
{:else}

6
src/routes/core/sites/+page.svelte
View File

@@ -79,7 +79,7 @@
<div class="card p-6 shadow-xl variant-glass-surface border border-surface-500/10 space-y-4">
<div class="flex flex-wrap gap-6 items-end">
<div class="flex-1 min-w-[280px] space-y-1">
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Sites</label>
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Sites</span>
<div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
<div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
<Search size={18} class="opacity-50" />
@@ -102,7 +102,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</label>
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_sites}>
<option value="all">All Statuses</option>
<option value="enabled">Enabled Only</option>
@@ -111,7 +111,7 @@
</div>
<div class="space-y-1">
<label class="label text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</label>
<span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
<select class="select variant-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_sites}>
<option value="all">All Visibility</option>
<option value="not_hidden">Not Hidden Only</option>

2
src/routes/core/sites/[site_id]/+page.svelte
View File

@@ -212,7 +212,7 @@
<div class="flex flex-col">
<span class="font-bold text-sm flex items-center gap-1">
{dom.fqdn}
<a href="https://{dom.fqdn}" target="_blank" class="opacity-30 group-hover:opacity-100 transition-opacity">
<a href="https://{dom.fqdn}" target="_blank" rel="noopener noreferrer" class="opacity-30 group-hover:opacity-100 transition-opacity">
<ExternalLink size={12} />
</a>
</span>