Snackbar Runtime Module (v3.4.10)
Runtime module — not a Component Full-Spec Module. The baseline
components.css §14 Snackbar primitive (L2041–L2079) is
UNCHANGED. This module fills the runtime layer that the
baseline explicitly carved out: positioning, queue, timeout, action /
close, live announcement, reduced motion, interaction safety.
See docs/SNACKBAR-RUNTIME-AUDIT.md.
1 · Baseline static reference
These are the four baseline specimens from
style-guide.html#components-snackbar (L2941–L2975),
rendered statically as a visual reference. They use the same
.snackbar primitive that the runtime below produces; the
difference is that these are inline static specimens, while the runtime
versions are dynamically inserted at <body> scope.
The action button styling (inverse-primary +
label-large + hover state layer) and the close button
styling (24px container, 18px icon, hit-area expansion on coarse
pointer) are provided by lab-snackbar.css §1 and
§2. These were promised in the baseline §14 CSS comment
but not implemented at baseline; the runtime module fills the gap.
2 · Runtime — show() variants
Each button calls window.labSnackbar.show(...) with
different options. Snackbars appear at the bottom of the viewport
(centered on mobile, bottom-left on desktop ≥768px). Default timeouts
per audit §4.2: 5000ms (message-only), 7000ms (with action), 0
(persistent — with explicit close).
Hover the snackbar or focus its action/close button to pause the timeout. The timeout resumes when pointer leaves AND keyboard focus leaves the snackbar. This implements WCAG 2.2 SC 2.2.1 Timing Adjustable.
3 · Queue — single-at-a-time FIFO
Snackbar runtime enforces one visible snackbar at a time. Additional messages queue and surface FIFO as the current one dismisses. Click the rapid-fire button to enqueue four snackbars; they appear one after another.
4 · Forbidden-ancestor — trigger rejection
Per audit §7 — Charter §5: snackbar show() rejects when
invoked from a trigger inside .prose,
.wp-block-post-content, .entry-content, or
[contenteditable]. The snackbar host itself is always at
<body> scope, but the trigger-side check prevents
accidental announcements from content surfaces (e.g., a button
mistakenly placed inside a WordPress post body).
The button below sits inside .prose. Clicking it should
do nothing (no snackbar appears). If a snackbar does appear, the
forbidden-ancestor check is broken.
이 단락은 .prose 안에 있습니다. 아래 버튼은 forbidden ancestor 안에서 호출되어 무시되어야 합니다.
5 · Reduced motion
When the user's OS-level "Reduce motion" preference is on, the snackbar appears and disappears instantly. The live region announcement still fires, the queue still works, hover/focus pause still works. Motion is purely a presentational hint.
To test: enable "Reduce motion" in your OS accessibility settings,
reload this page, and click any Show button in §2 above.
Transitions will be disabled while everything else stays intact.