feat(viewer): ErrorState non-color cues (C09 L81.15)

CHANGELOG.md

@@ -6,6 +6,8 @@ Follows [Keep a Changelog](https://keepachangelog.com/); versioning is [SemVer](
 
 ### Added
 
+- Viewer `ErrorState` non-color cues: warning glyph + `aria-invalid` (C09 L81.15).
+
 - Versioning policy SSOT + CHANGELOG tagged-section SelfCheck (C11 L119).
 - ADR 0005: explicit no Workers/Vercel/edge deploy target (C11 L114) + `edge-deploy-scope` SelfCheck.
 - Blocking `sandbox-boundary` SelfCheck job in `security.yml` (C04 L40; hard no-net/rootless still unpaid).
@@ -21,4 +23,4 @@ Initial public release tag (`v0.2.0`).
 - Session list / search selection in the viewer.
 - Domain mutation-targeted state machine and boundary tests.
 
-<!-- Earlier history was Unreleased-aggregated; tag sections start at 0.2.0. -->
+<!-- Earlier history was Unreleased-aggregated; tag sections start at 0.2.0. -->

crates/sl-viewer/src/async_states.rs

@@ -196,6 +196,8 @@ pub fn ErrorColorFixture() -> Element {
 ///
 /// Exposes a stable DOM `id` so form controls can point
 /// `aria-errormessage` at this alert (WCAG 3.3.1 / 3.3.3 association).
+/// Non-color cues: warning glyph (`aria-hidden`), left danger border, and
+/// `role="alert"` — color alone is never the sole error signal (L81.15).
 #[component]
 pub fn ErrorState(
     /// Error message shown to the user.
@@ -217,11 +219,22 @@ pub fn ErrorState(
             class: "sl-error-state",
             role: "alert",
             "aria-live": "assertive",
+            "aria-invalid": "true",
             "data-testid": "error-state",
             style: "display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 16px;margin:8px 0;background:{c.surface};border:1px solid {c.border};border-left:3px solid {c.danger};border-radius:6px;color:{c.text};font-size:13px;line-height:1.5;",
-            p {
-                style: "margin:0;color:{c.danger};font-weight:600;",
-                "Something went wrong"
+            div {
+                style: "display:flex;align-items:center;gap:8px;",
+                span {
+                    class: "sl-error-icon",
+                    "aria-hidden": "true",
+                    "data-testid": "error-state-icon",
+                    style: "flex-shrink:0;font-size:16px;font-weight:700;line-height:1;color:{c.danger};",
+                    "⚠"
+                }
+                p {
+                    style: "margin:0;color:{c.danger};font-weight:600;",
+                    "Something went wrong"
+                }
             }
             p {
                 id: "{error_id}-detail",

docs/VISUAL_SPEC.md

@@ -168,6 +168,8 @@ Errors are recoverable by default; show message + path forward.
 
 Do **not** use `--lc-orange` as the sole error signal (orange = live). Do **not** use cobalt for failure text.
 
+**Non-color cues (L81.15):** every recoverable error panel (`ErrorState`) must pair color with at least one of: a warning glyph (`aria-hidden`), a distinct left border, `role="alert"`, and/or `aria-invalid="true"`. Color alone is never sufficient.
+
 ### Surfaces
 
 | Surface | Behavior |