Stop the alert interrupting, unless it is asked to

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

resources/views/components/alert.blade.php

@@ -5,9 +5,15 @@
      text from `description` or the slot, and an `actions` slot for one or two text buttons.
      `color` (alias `tone`): `info` (the default), `success`, `warning`, `error`, `primary`,
      `secondary`, `tertiary`, or `neutral` for surface-container-high. `icon` replaces the state's
-     icon; `:icon="false"` drops it. `dismissible` adds a close button that hides it in the browser.
+     icon; `:icon="false"` drops it. `dismissible` adds a close button that hides it in the browser,
+     40px drawn with the 48px target M3 asks for.
 
-     Errors and warnings are `role="alert"` and announced at once; the rest are `role="status"`. --}}
+     It is a `role="status"`, whatever its colour: an alert is usually part of the page as it
+     renders, and `role="alert"` is an assertive live region that some screen readers announce over
+     the page title on load — and that a Livewire morph re-announces. `assertive` opts into
+     `role="alert"` for the case the prop is named after: a notice put on screen in answer to
+     something the person just did. M3 publishes no banner; the nearest thing it does publish, the
+     snackbar, says polite and never assertive. --}}
 
 @props([
     'title' => null,
@@ -16,6 +22,7 @@
     'tone' => null,
     'icon' => null,
     'dismissible' => false,
+    'assertive' => false,
 ])
 
 @php
@@ -35,7 +42,7 @@
 @endphp
 
 <div
-    role="{{ in_array($color, ['error', 'warning'], true) ? 'alert' : 'status' }}"
+    role="{{ $assertive ? 'alert' : 'status' }}"
     @if ($dismissible) x-data="{ shown: true }" x-show="shown" x-transition.opacity @endif
     {{ $attributes->class(['flex items-start gap-3 rounded-corner-md p-4', $colours]) }}
 >
@@ -58,7 +65,7 @@
     </div>
 
     @if ($dismissible)
-        <button type="button" class="state-layer focus-ring -m-2 inline-flex size-10 shrink-0 items-center justify-center rounded-corner-full" aria-label="{{ __('Dismiss') }}" x-on:click="shown = false">
+        <button type="button" class="state-layer focus-ring touch-target -m-2 inline-flex size-10 shrink-0 items-center justify-center rounded-corner-full" aria-label="{{ __('Dismiss') }}" x-on:click="shown = false">
             <x-livewire-material::icon name="close" optical="20" class="size-5" />
         </button>
     @endif