Andreas ReinholdandClaude Opus 5
04b655fa9b
The region carrying aria-live was created together with its message, inside the x-if that draws the snackbar, so a screen reader had nothing to notice changing. It moves to the permanent host, which is polite and atomic as M3 asks; a type now only picks the region's role, and the explicit aria-live keeps an error polite too. Plan step 11, actions.md ACT-02. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
34 lines
1.2 KiB
PHP
34 lines
1.2 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('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);
|
|
});
|