From c64933418bcee2a5b97e9c41fddf8973eaad8622 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Sat, 4 Apr 2026 12:42:07 +0100
Subject: [PATCH] feat: add skip-to-content links and aria-labels for
 accessibility

---
 app/components/UpdateCard.vue |  2 ++
 app/layouts/admin.vue         |  3 ++-
 app/layouts/default.vue       | 22 ++++++++++++++++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/components/UpdateCard.vue b/app/components/UpdateCard.vue
index 57b05ed..b7772de 100644
--- a/app/components/UpdateCard.vue
+++ b/app/components/UpdateCard.vue
@@ -60,6 +60,7 @@
               color="neutral"
               size="xs"
               icon="i-lucide-edit"
+              aria-label="Edit update"
               @click="$emit('edit', update)"
             />
             <UButton
@@ -67,6 +68,7 @@
               color="neutral"
               size="xs"
               icon="i-lucide-trash-2"
+              aria-label="Delete update"
               @click="$emit('delete', update)"
             />
           </div>
diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue
index 019ee76..7f1aa80 100644
--- a/app/layouts/admin.vue
+++ b/app/layouts/admin.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="site">
+    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]">Skip to content</a>
     <!-- Desktop Sidebar -->
     <aside class="sidebar sidebar-desktop">
       <NuxtLink to="/" class="sidebar-brand">Ghost Guild</NuxtLink>
@@ -49,7 +50,7 @@
     </div>
 
     <!-- Main Content -->
-    <main class="main">
+    <main id="main-content" class="main">
       <TopStrip :page-path="currentPageName" />
       <slot />
     </main>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 6eaedff..77d16d7 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="site">
+    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:z-[100] focus:p-3 focus:bg-[var(--bg)] focus:text-[var(--text)]">Skip to content</a>
     <!-- Desktop Sidebar -->
     <AppNavigation class="sidebar-desktop" />
 
@@ -10,9 +11,11 @@
     </div>
 
     <!-- Main Content -->
-    <main class="main">
+    <main id="main-content" class="main">
       <TopStrip :page-path="currentPageName" />
-      <slot />
+      <div class="main-body">
+        <slot />
+      </div>
     </main>
 
     <!-- Mobile Drawer -->
@@ -40,10 +43,23 @@ const currentPageName = computed(() => {
 <style scoped>
 .site {
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .main {
+  flex: 1;
   margin-left: 220px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.main-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .sidebar-desktop {
@@ -79,6 +95,8 @@ const currentPageName = computed(() => {
   }
   .main {
     margin-left: 0;
+    flex: 1;
+    min-height: 0;
   }
 }
 </style>