T4.5/T4.6/T4.7 - S10/S11/S12: it announces, it is legible, focus is visible

Three small accessibility items, done together because they share one probe and
one measurement method. tests/a11y_check.py, 22 checks, all passing.

S10 — ANNOUNCEMENTS. The app had zero aria-live regions; login.html's
role="alert" / role="status" pair was the only correct example in the codebase.
Both toasts now take an optional kind and set the role BEFORE the text, because
assistive technology announces on the content change and a role applied after
describes the next message rather than this one. The sync badge announces
politely.

Admin banners are handled by a rule rather than by editing thirteen assignment
sites: a MutationObserver in console-util.js marks anything carrying `.bad` as
role=alert and everything else role=status. Thirteen edits is thirteen chances to
get it wrong, and any banner added later would have missed out. The probe checks
a banner created after load, which is the case that would have regressed.

S11 — CONTRAST. Re-measured rather than quoting either published figure, as the
file map asked. #8d8d8d is 3.32:1 on white, not "about 2.9:1" as the plan says;
console.css:103's 3.3:1 was right. On the shaded surfaces it is worse - 3.01:1 on
a success banner. --cds-text-helper (#6f6f6f) clears 4.5:1 on all seven
backgrounds the app actually paints, tightest 4.56:1.

Fixed once, in the token, so all three sheets inherit it. console.css's local
override is gone, as the task requires. Disabled text was repointed to
--cds-text-disabled rather than darkened with everything else: making disabled
text MORE legible makes a disabled control look enabled.

The probe measures against the background actually painted behind each element,
walking ancestors for the first non-transparent one - not an assumed white, which
is how "passes on paper" and "fails on the page" come to disagree.

S12 — FOCUS. An app-wide :focus-visible floor in theme-light.css at zero
specificity, so any component can still draw its own. Filled controls get an
explicit rule at class specificity: a blue ring inside a blue button measures
1.00:1, which is not a subtle problem but no indicator at all. console.css's
inset ring had exactly that defect on button.primary.

`outline: none` is down from six to one, and that one (.wpc-search-input) has its
replacement in the rule above it - the shell rings on :focus-within, and ringing
both would draw two rectangles.

TWO REAL DEFECTS THE PROBE FOUND that reading would not have:

  - .wp-navbtn's ring is white, which is right on the near-black app bar and
    invisible on the creator's white header. Same button, same class, two hosts,
    1.00:1 on one of them.
  - The comment drawer is translated off-screen when closed, and a transform
    moves a thing without removing it from the tab order. Its name field,
    textarea, Add button and close button were all still focusable: a keyboard
    user could tab into a panel they could not see and could not tell they were
    in. Now visibility:hidden while closed, with the transition delayed so it
    still animates both ways.

The probe itself needed three corrections, each of which was a wrong answer
before it was a right one, and each worth knowing:

  - focus emulation must be ON, or :focus-visible never matches in headless and
    every element reports clean - a pass that means nothing.
  - which surface a ring is drawn against depends on the offset the BROWSER uses,
    not the one the stylesheet asked for. Chromium redraws a low-contrast author
    ring in white at offset 0 on a filled control, which is more contrast than was
    requested; measuring that against the parent scores it 1.00:1 and calls a
    correct ring a defect.
  - focus() on a hidden control does nothing, so the probe has to ask whether the
    focus actually landed. A closed drawer still has layout; a bounding box is not
    evidence that anyone can reach it.

Metric 7, aria-live regions: was 0 at wave 0, now 13 role/aria-live sites across
7 files.

browser_check 71/71, f_items 5 FIXED / F6 REPRODUCES.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

html/console.css

@@ -16,7 +16,7 @@
    element. See docs/reference/tokens.md section 9. */
 :root{ --bg:var(--cds-background); --surface:var(--cds-layer); --border:var(--cds-border-subtle);
   --border-strong:var(--cds-border-strong); --text:var(--cds-text-primary);
-  --muted:var(--cds-text-secondary); --dim:var(--cds-ui-04); --accent:var(--cds-interactive-01);
+  --muted:var(--cds-text-secondary); --dim:var(--cds-text-helper); --accent:var(--cds-interactive-01);
   --accent-hover:var(--cds-hover-primary); --accent-soft:var(--cds-highlight);
   --green:var(--cds-support-success); --green-bg:var(--wp-status-success-bg);
   --red:var(--cds-support-error); --red-bg:var(--wp-status-error-bg);
@@ -66,8 +66,12 @@ button{ font:inherit; font-size:13px; font-weight:600; line-height:1; white-spac
   height:var(--ctl); padding:0 var(--s3); border-radius:0; cursor:pointer;
   border:1px solid var(--wp-btn-secondary-border); background:var(--wp-btn-secondary-bg); color:var(--wp-btn-secondary-fg); }
 button:hover{ border-color:var(--wp-btn-secondary-hover-fg); color:var(--wp-btn-secondary-hover-fg); }
-button:focus-visible{ outline:2px solid var(--accent); outline-offset:-3px; }
-button:disabled, button:disabled:hover{ color:var(--dim); border-color:var(--border); background:var(--surface); cursor:default; }
+/* S12: this was outline-offset:-3px — an INSET accent ring, which on button.primary
+   is a blue ring drawn inside a blue button and measures 1.00:1. Outside now, where
+   it lands on the card behind the toolbar. The filled variants are handled by the
+   rule in theme-light.css, which offsets further to clear their own fill. */
+button:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
+button:disabled, button:disabled:hover{ color:var(--cds-text-disabled); border-color:var(--border); background:var(--surface); cursor:default; }
 button.primary{ background:var(--wp-btn-primary-bg); border-color:var(--wp-btn-primary-bg); color:var(--wp-btn-primary-fg); }
 button.primary:hover{ background:var(--wp-btn-primary-hover); border-color:var(--wp-btn-primary-hover); color:var(--wp-btn-primary-fg); }
 button.danger{ border-color:var(--wp-btn-danger-border); color:var(--wp-btn-danger-fg); }
@@ -100,10 +104,12 @@ button.danger:hover{ background:var(--wp-btn-danger-soft-bg); border-color:var(-
 .banner.ok{ background:var(--green-bg); color:var(--green); border-color:var(--wp-status-success-border-a); border-left-color:var(--green); }
 .banner.bad{ background:var(--red-bg); color:var(--red); border-color:var(--wp-status-error-border-a); border-left-color:var(--red); }
 .banner.warn{ background:var(--amber-bg); color:var(--amber); border-color:var(--wp-status-warning-border-a); border-left-color:var(--amber); }
-/* --muted, not --dim: #8d8d8d on white is 3.3:1, under the 4.5:1 floor at 12px,
-   and the boxes the scripts fill are themselves .note — their primary toggle
-   labels inherit this colour. */
-.note{ font-size:12px; line-height:1.55; color:var(--muted); margin-top:var(--s2); }
+/* This used to read --muted rather than --dim, because --dim was #8d8d8d and
+   measured 3.3:1 on white — under the floor at 12px. S11 (T4.6) fixed --dim at the
+   source instead, so the local override is gone and helper text on these pages is
+   the same colour as helper text everywhere else. Re-measured: 5.02:1 on white,
+   4.81:1 on the zebra stripe, 4.57:1 on a shaded card. */
+.note{ font-size:12px; line-height:1.55; color:var(--dim); margin-top:var(--s2); }
 .note strong, .note em{ color:var(--text); }
 pre.out{ background:var(--wp-term-bg); color:var(--wp-term-fg); border-radius:0; padding:var(--s3) var(--s4); font-family:var(--mono);
   font-size:12px; line-height:1.55; white-space:pre-wrap; max-height:340px; overflow:auto; margin:var(--s3) 0 0; }
@@ -156,7 +162,7 @@ select.role-select{ height:var(--ctl-sm); max-width:170px; padding:0 var(--s1) 0
   background:var(--surface); color:var(--text); cursor:pointer; }
 select.role-select:hover{ border-color:var(--accent); }
 select.role-select.is-admin{ color:var(--accent); border-color:var(--accent); font-weight:600; }
-select.role-select:disabled{ color:var(--dim); border-color:var(--border); background:var(--bg); cursor:default; }
+select.role-select:disabled{ color:var(--cds-text-disabled); border-color:var(--border); background:var(--bg); cursor:default; }
 .tag{ display:inline-block; padding:1px 8px; border-radius:11px; font-size:11px; font-weight:600;
   line-height:1.55; white-space:nowrap; vertical-align:middle; }
 .tag.admin{ background:var(--accent-soft); color:var(--accent); }