Andreas ReinholdandClaude Opus 5
7bc4f740e7
M3 says to avoid an icon in a snackbar and gives the supporting text no fourth colour, so the state glyph and the 80% description are gone: a type now only picks the announcement role. The 40px action and close buttons take the shared touch-target, Escape dismisses a snackbar that holds the focus, and the host publishes --material-snackbar-height on <html> so a `fab` button sits above the snackbar instead of under it. Plan step 18, actions.md ACT-17, ACT-18, ACT-20, ACT-34, ACT-35. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
45 lines
1.8 KiB
PHP
45 lines
1.8 KiB
PHP
<?php
|
|
|
|
it('hosts the snackbar queue, kept across wire:navigate', function () {
|
|
$html = (string) $this->blade('<x-toast />');
|
|
|
|
expect($html)
|
|
->toContain('x-persist="material-toast"')
|
|
->toContain('x-data="materialSnackbar"')
|
|
->toContain('bg-inverse-surface')
|
|
->toContain('justify-center');
|
|
});
|
|
|
|
it('draws no state icon, and reaches 48px from its 40px controls', function () {
|
|
$html = (string) $this->blade('<x-toast />');
|
|
|
|
// M3 tells you to avoid an icon in a snackbar; the type is left to pick the announcement role.
|
|
expect(substr_count($html, '<svg'))->toBe(1)
|
|
->and($html)->not->toContain('text-inverse-success')
|
|
->not->toContain('opacity-80')
|
|
->toContain('data-toast-action class="state-layer focus-ring touch-target')
|
|
->toContain('state-layer focus-ring touch-target inline-flex size-10');
|
|
});
|
|
|
|
it('can sit at the start', function () {
|
|
expect((string) $this->blade('<x-toast position="bottom-start" />'))->toContain('justify-start');
|
|
});
|
|
|
|
it('marks the snackbar and its action for tests and styling', function () {
|
|
$html = (string) $this->blade('<x-toast />');
|
|
|
|
expect($html)
|
|
->toMatch('/<div\s[^>]*\bdata-toast\b/')
|
|
->toMatch('/<button\s[^>]*\bdata-toast-action\b[^>]*x-on:click="act\(\)"/');
|
|
});
|
|
|
|
it('keeps the live region in the page, polite, around the snackbar that comes and goes', function () {
|
|
$html = (string) $this->blade('<x-toast />');
|
|
|
|
expect($html)
|
|
->toMatch('/<div\s[^>]*x-data="materialSnackbar"[^>]*aria-live="polite"/')
|
|
->toContain('aria-atomic="true"')
|
|
->toContain("x-bind:role=\"current && (current.type === 'error' || current.type === 'warning') ? 'alert' : 'status'\"")
|
|
->and(substr_count($html, 'aria-live'))->toBe(1);
|
|
});
|