noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stop the alert interrupting, unless it is asked to

Browse Source 
An error or warning alert was role="alert", an assertive live region — but the
usual alert is part of the page as it renders, which some screen readers then
announce over the page title, and a Livewire morph re-announces. It is now
role="status" whatever its colour, with an `assertive` prop for a notice put on
screen in answer to something the person just did. Its 40px dismiss button takes
the shared touch-target. Plan step 18, actions.md ACT-18, ACT-36.

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 06:11:09 +02:00
co-authored by Claude Opus 5
parent 7bc4f740e7
commit c33d90c653
3 changed files with 17 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/AlertTest.php
+5 -3
View File
@@ -4,17 +4,18 @@ it('states a notice in its state\'s container, with the state\'s icon', function
$html = (string) $this->blade('<x-alert title="Storage almost full" description="3.8 of 4 GB" color="warning" />');
expect($html)
->toContain('role="alert"')
->toContain('role="status"')
->toContain('bg-warning-container text-on-warning-container')
->toContain('Storage almost full')
->toContain('3.8 of 4 GB')
->toContain('<svg');
});
it('is a status unless it is an error or a warning', function () {
it('is a status whatever its colour, and interrupts only when asked to', function () {
expect((string) $this->blade('<x-alert description="Saved." tone="success" />'))->toContain('role="status"')->toContain('bg-success-container')
->and((string) $this->blade('<x-alert description="Heads up." />'))->toContain('role="status"')->toContain('bg-info-container')
->and((string) $this->blade('<x-alert description="Broken." color="error" />'))->toContain('role="alert"');
->and((string) $this->blade('<x-alert description="Broken." color="error" />'))->toContain('role="status"')
->and((string) $this->blade('<x-alert description="Broken." color="error" assertive />'))->toContain('role="alert"');
});
it('takes actions, drops its icon on request, and can be dismissed', function () {
@@ -30,5 +31,6 @@ it('takes actions, drops its icon on request, and can be dismissed', function ()
->toContain('Try again')
->toContain('x-data="{ shown: true }"')
->toContain('aria-label="Dismiss"')
->toContain('touch-target')
->and(substr_count($html, '<svg'))->toBe(1);
});