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

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

View File

@@ -164,7 +164,7 @@
{#if $lq__event_session_obj && $lq__event_session_obj.event_session_id}
<header
class="event_session_about text-center border-b-2 border-gray-400 flex flex-row flex-wrap gap-2 items-center justify-between"
class="event_session_about text-center border-b-2 border-gray-400 dark:border-gray-600 flex flex-row flex-wrap gap-2 items-center justify-between"
>
<h3
class:hidden={!$lq__event_session_obj?.start_datetime ||
@@ -359,7 +359,7 @@
<ul class="event_presentation_list max-w-full space-y-2">
{#each $lq__event_presentation_obj_li as event_presentation_obj (event_presentation_obj.event_presentation_id)}
<li
class="border-b-2 border-gray-300 my-1 py-1 text-center md:text-left"
class="border-b-2 border-gray-300 dark:border-gray-700 my-1 py-1 text-center md:text-left"
>
<!-- The presentation information -->
<div