feat: add admin navigation skip link

apps/web/src/assets/styles/global.scss

@@ -43,6 +43,8 @@ h1 { max-width: 760px; margin: var(--space-3) 0 var(--space-4); font-size: var(-
 .auth-page { display: grid; place-items: center; min-height: 100vh; padding: var(--space-8); background: var(--color-background); }
 .auth-panel { display: grid; gap: var(--space-3); width: min(440px, 100%); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); background: var(--color-surface); box-shadow: var(--shadow-md); }
 .auth-panel h1 { font-size: var(--text-2xl); }
+.skip-link { position: absolute; left: var(--space-4); top: var(--space-2); z-index: 10; transform: translateY(-200%); background: var(--color-surface); color: var(--color-interactive-text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); }
+.skip-link:focus { transform: translateY(0); }
 .admin-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; background: var(--color-background); }
 .admin-sidebar { display: grid; align-content: start; gap: var(--space-6); border-right: var(--border-thin) solid var(--color-border); padding: var(--space-8); background: var(--color-surface); }
 .admin-sidebar h1 { font-size: var(--text-xl); }

apps/web/src/pages/AdminShell.stories.js

@@ -1,4 +1,5 @@
 import AdminShell from './AdminShell.vue';
+import { expect, userEvent, within } from '@storybook/test';
 
 export default {
   title: 'Pages/AdminShell',
@@ -6,3 +7,12 @@ export default {
 };
 
 export const Navigation = { args: { routed: false } };
+
+export const KeyboardSkipLink = {
+  args: { routed: false },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.tab();
+    await expect(canvas.getByRole('link', { name: 'Skip to main content' })).toHaveFocus();
+  },
+};

apps/web/src/pages/AdminShell.vue

@@ -14,6 +14,7 @@ async function logout() {
 
 <template>
   <main class="admin-shell">
+    <a class="skip-link" href="#admin-content">Skip to main content</a>
     <aside class="admin-sidebar">
       <p class="catalog-kicker">Collector workspace</p>
       <h1>Inventory</h1>
@@ -31,6 +32,6 @@ async function logout() {
         <button class="button button--secondary" type="button" @click="logout">Sign out</button>
       </div>
     </aside>
-    <section class="admin-shell__content"><RouterView v-if="routed" /></section>
+    <section id="admin-content" class="admin-shell__content" tabindex="-1"><RouterView v-if="routed" /></section>
   </main>
 </template>