Keep the snackbar's live region in the page

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
This commit is contained in:
Andreas Reinhold
2026-09-14 05:53:51 +02:00
co-authored by Claude Opus 5
parent 91f49be6d7
commit 04b655fa9b
2 changed files with 21 additions and 3 deletions
+11 -1
View File
@@ -18,6 +18,16 @@ 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[^>]*aria-live="polite"/')
->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);
});