feat: add skip-to-content links and aria-labels for accessibility

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>

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>

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>