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

style(launcher): accessibility, session list UX, and preset-* token fixes

Browse Source 
Style token fixes:
- launcher_cfg.svelte: tab buttons preset-filled-primary-500 -> preset-filled-primary;
  opacity-50 inactive -> preset-tonal-surface
- launcher_cfg_app_modes.svelte: same fix for app mode buttons (opacity-40)
- launcher_cfg_controller.svelte: variant-filled-success/error -> preset-filled-*
- launcher_cfg_template.svelte: variant-filled-success -> preset-filled-success
- launcher_session_view.svelte: add dark:border-gray-600/700 to bare border-gray-*

Session list (menu_session_list.svelte) -- full accessibility + UX pass:
- fix: background sync fetches hidden:all so All Sessions toggle works
- fix: hide_event_launcher respected in class:hidden and class:opacity-40
- fix: overlay uses explicit opaque backgrounds (slate-100/slate-800) to prevent
  preset-tonal-secondary transparency bleed-through in light and dark mode
- feat: compact fixed 2rem row height; position:absolute overlay on hover/focus
  reveals full session name (300-char) without any layout shift (no sibling movement)
- feat: active session always fully visible in flow (height:auto, no clipping)
- a11y: hover_timer_wait 750->1200ms (motor accessibility)
- a11y: removed hover:scale which caused cursor drift and timer jitter
- a11y: px-1.5 py-1 touch targets, focus-visible ring for keyboard/switch users
- a11y: fa-eye-slash icons distinguish hide vs hide_event_launcher states
- docs: comprehensive OSIT/Aether-specific comments throughout
This commit is contained in:
Scott Idem
2026-03-06 20:25:31 -05:00
parent cc6f73ca04
commit 4cecc7a860
7 changed files with 226 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -89,8 +89,8 @@
type="button"
onclick={() => (active_tab = 'system')}
class="btn btn-sm text-[10px] uppercase font-bold transition-all"
class:preset-filled-primary-500={active_tab === 'system'}
class:opacity-50={active_tab !== 'system'}
class:preset-filled-primary={active_tab === 'system'}
class:preset-tonal-surface={active_tab !== 'system'}
>
<span class="fas fa-microchip mr-1"></span> System
</button>
@@ -98,8 +98,8 @@
type="button"
onclick={() => (active_tab = 'sync')}
class="btn btn-sm text-[10px] uppercase font-bold transition-all"
class:preset-filled-primary-500={active_tab === 'sync'}
class:opacity-50={active_tab !== 'sync'}
class:preset-filled-primary={active_tab === 'sync'}
class:preset-tonal-surface={active_tab !== 'sync'}
>
<span class="fas fa-sync mr-1"></span> Sync
</button>
@@ -107,8 +107,8 @@
type="button"
onclick={() => (active_tab = 'general')}
class="btn btn-sm text-[10px] uppercase font-bold transition-all"
class:preset-filled-primary-500={active_tab === 'general'}
class:opacity-50={active_tab !== 'general'}
class:preset-filled-primary={active_tab === 'general'}
class:preset-tonal-surface={active_tab !== 'general'}
>
<span class="fas fa-sliders-h mr-1"></span> General
</button>