diff --git a/plugins/voyage/playground/voyage-playground.html b/plugins/voyage/playground/voyage-playground.html index 6ce0e40..3b064b7 100644 --- a/plugins/voyage/playground/voyage-playground.html +++ b/plugins/voyage/playground/voyage-playground.html @@ -46,6 +46,36 @@ } .voyage-skeleton-msg { padding: var(--space-6); } + /* v4.3 Step 10 — A11Y foundations + .visually-hidden: standard SR-only utility (clip-path technique). + .skip-link: hidden until keyboard focus, then surfaces in viewport. */ + .visually-hidden { + position: absolute !important; + width: 1px; height: 1px; + padding: 0; margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + } + .skip-link { + position: absolute; + top: -40px; + left: var(--space-3); + background: var(--color-primary-500); + color: #fff; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-sm); + text-decoration: none; + z-index: 100; + transition: top 0.15s ease; + } + .skip-link:focus { + top: var(--space-3); + outline: 2px solid var(--color-text-primary); + outline-offset: 2px; + } + /* Render-pipeline layout (left 70% viewport / right 30% sidebar reserved for Step 10). The viewport panel mounts the rendered markdown. */ .voyage-layout { @@ -474,9 +504,9 @@ - +
-
+