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:
co-authored by
Claude Opus 5
parent
91f49be6d7
commit
04b655fa9b
@@ -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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user