open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions

feat(voyage): add A11Y skip-link + aria-label foundations

Browse source
This commit is contained in:
Kjell Tore Guttormsen 2026-05-10 16:16:18 +02:00
commit 820ebf0f02
1 changed files with 32 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

34
plugins/voyage/playground/voyage-playground.html
View file

@ -46,6 +46,36 @@
} }
.voyage-skeleton-msg { padding: var(--space-6); } .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 /* Render-pipeline layout (left 70% viewport / right 30% sidebar reserved
for Step 10). The viewport panel mounts the rendered markdown. */ for Step 10). The viewport panel mounts the rendered markdown. */
.voyage-layout { .voyage-layout {
@ -474,9 +504,9 @@
</style> </style>
</head> </head>
<body> <body>
<a class="visually-hidden" href="#main">Skip to main content</a> <a class="skip-link" href="#main-content">Hopp til hovedinnhold</a>
<header class="app-header" id="app-header" data-renderable></header> <header class="app-header" id="app-header" data-renderable></header>
<main id="main"> <main id="main-content">
<section <section
class="guide-panel guide-panel--info" class="guide-panel guide-panel--info"
role="status" role="status"