From b67da0f48a41b8fdaba44a048bc45b4fa42d5d87 Mon Sep 17 00:00:00 2001
From: Patrick Buckley <eous@users.noreply.github.com>
Date: Fri, 8 May 2026 14:30:18 -0700
Subject: [PATCH] fix(skills): apply designer review on lock-icon UX
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Designer review of the cb5fa1b lock-icon iteration flagged five
items; four are addressed here, one was a deliberate trade-off
documented below.

- Glyph hardening (#2): the lock character is now 🔒︎ — U+1F512 with
  the U+FE0E text variation selector — paired with the existing
  font-variant-emoji: text rule. font-variant-emoji shipped late
  and isn't universal yet (Chrome 131+, Safari 16.4+, Firefox 132+);
  the explicit text VS is belt-and-braces so older Chromium / most
  Linux don't fall back to a coloured emoji that would clash with
  the monochrome instrument-panel aesthetic.
- Accent-line de-conflict (#3): top:14px → 18px so the lock button
  sits below the modal's ::before accent-line decoration's visual
  band rather than competing with it horizontally. h2's
  padding-right reservation (44px) still gives the title clearance.
- Mobile touch target (#4): @media (max-width: 700px) bumps the
  button to 44×44 (WCAG 2.5.5 / Apple HIG / Material minimum) and
  shifts it to top:8px right:8px, with h2 padding-right widened to
  56px to match.
- Keyboard discoverability (#6): on readonly open, focus lands on
  the lock button instead of Cancel. Keyboard users hit the unlock
  affordance immediately instead of having to Tab past every
  disabled spec input to reach it. Cancel is one Shift-Tab away.

Deferred:
- (#1) Reviewer flagged top-right placement as risking confusion
  with the universal × close-button convention. Keeping the
  icon-only design per product direction; the bordered chip styling
  + accent-coloured hover make it visually distinct from the
  thin-stroke unbordered × pattern, and the confirm dialog catches
  any misclick safely.
- (#5) Optional empty-corner indicator after unlock — the
  "Customized from upstream" badge text already carries the signal;
  not adding new chrome.
---
 turnstone/console/static/governance.js |  9 ++++++++-
 turnstone/console/static/index.html    |  2 +-
 turnstone/console/static/style.css     | 14 +++++++++++++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/turnstone/console/static/governance.js b/turnstone/console/static/governance.js
index 976a14cc..0c5b0868 100644
--- a/turnstone/console/static/governance.js
+++ b/turnstone/console/static/governance.js
@@ -1527,8 +1527,15 @@ function showEditTemplateModal(tmplId) {
     );
     // Focus management — only on the initial open. Re-renders preserve
     // wherever focus was so a screen reader doesn't get a transition.
+    // For readonly skills, prefer the lock button so keyboard users land
+    // on the unlock affordance instead of having to Tab past every
+    // disabled spec field to reach it. Cancel is still one Shift-Tab away.
     if (isReadonly) {
-      if (cancelBtn) cancelBtn.focus();
+      if (lockBtn && lockBtn.style.display !== "none") {
+        lockBtn.focus();
+      } else if (cancelBtn) {
+        cancelBtn.focus();
+      }
     } else {
       document.getElementById("etm-name").focus();
     }
diff --git a/turnstone/console/static/index.html b/turnstone/console/static/index.html
index fcd67ee0..bd7a4f4a 100644
--- a/turnstone/console/static/index.html
+++ b/turnstone/console/static/index.html
@@ -3307,7 +3307,7 @@
           aria-label="Customize skill (detach from upstream and unlock editing)"
           title="Customize — detach from upstream and unlock editing"
         >
-          <span aria-hidden="true">🔒</span>
+          <span aria-hidden="true">🔒︎</span>
         </button>
         <div
           id="etm-origin-badge"
diff --git a/turnstone/console/static/style.css b/turnstone/console/static/style.css
index 23d69e34..56a237e0 100644
--- a/turnstone/console/static/style.css
+++ b/turnstone/console/static/style.css
@@ -2028,6 +2028,16 @@ textarea.skill-content-area {
   .skill-config-grid {
     grid-template-columns: 1fr 1fr;
   }
+  /* Touch target: 44×44 minimum on mobile (WCAG 2.5.5 / Apple HIG). */
+  .skill-lock-btn {
+    width: 44px;
+    height: 44px;
+    top: 8px;
+    right: 8px;
+  }
+  .admin-modal-skill > h2 {
+    padding-right: 56px;
+  }
 }
 
 .modal-buttons {
@@ -2096,7 +2106,9 @@ textarea.skill-content-area {
    button class. */
 .skill-lock-btn {
   position: absolute;
-  top: 14px;
+  /* top: 18px (not 14px) so the button drops below the modal's accent-line
+     decoration's visual zone instead of competing with it horizontally. */
+  top: 18px;
   right: 14px;
   width: 32px;
   height: 32px;