Pin the two-line snackbar, and reach it with Alt+G

Plan step 22, actions.md § Missing (two-line snackbar height, snackbar
keyboard shortcut): the container grew organically from `min-h-12` rather
than sitting at SnackbarTokens.TwoLinesContainerHeight, and there was no
way for a keyboard to reach an actioned snackbar at all.

A `description` is M3's second line, so the snackbar is pinned to 68px
whenever one is there, and below `medium` a two-line snackbar with an
action wraps the action under the text — M3's "two lines with longer
action" configuration. Alt+G, the shortcut M3 suggests for the web, moves
the focus to a snackbar that carries an action from wherever the page had
it; `event.code`, because Alt rewrites `event.key` on some layouts.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:45:06 +02:00
co-authored by Claude Opus 5
parent 6af501c966
commit 44ae9ecea4
5 changed files with 67 additions and 11 deletions
+12
View File
@@ -21,6 +21,18 @@ it('draws no state icon, and reaches 48px from its 40px controls', function () {
->toContain('state-layer focus-ring touch-target inline-flex size-10');
});
it('grows to M3\'s two-line height, and wraps the action below on a compact window', function () {
$html = (string) $this->blade('<x-toast />');
// SnackbarTokens: 48dp for one line, 68dp for two — a description is that second line.
expect($html)
->toContain('x-bind:class="current.description ? \'min-h-17\' : \'min-h-12\'"')
->toContain('flex-wrap')
// M3's "two lines with longer action": the action leaves the text's line below `medium`.
->toContain('x-bind:class="current.description && current.action ? \'max-medium:basis-full\' : \'\'"')
->toContain('touch-target ms-auto h-10');
});
it('can sit at the start', function () {
expect((string) $this->blade('<x-toast position="bottom-start" />'))->toContain('justify-start');
});