jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-04 12:42:07 +01:00
parent ee438f5c60
commit c64933418b
3 changed files with 24 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/components/UpdateCard.vue
View file

@ -60,6 +60,7 @@
color="neutral" color="neutral"
size="xs" size="xs"
icon="i-lucide-edit" icon="i-lucide-edit"
aria-label="Edit update"
@click="$emit('edit', update)" @click="$emit('edit', update)"
/> />
<UButton <UButton
@ -67,6 +68,7 @@
color="neutral" color="neutral"
size="xs" size="xs"
icon="i-lucide-trash-2" icon="i-lucide-trash-2"
aria-label="Delete update"
@click="$emit('delete', update)" @click="$emit('delete', update)"
/> />
</div> </div>

3
app/layouts/admin.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<div class="site"> <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 --> <!-- Desktop Sidebar -->
<aside class="sidebar sidebar-desktop"> <aside class="sidebar sidebar-desktop">
<NuxtLink to="/" class="sidebar-brand">Ghost Guild</NuxtLink> <NuxtLink to="/" class="sidebar-brand">Ghost Guild</NuxtLink>
@ -49,7 +50,7 @@
</div> </div>
<!-- Main Content --> <!-- Main Content -->
<main class="main"> <main id="main-content" class="main">
<TopStrip :page-path="currentPageName" /> <TopStrip :page-path="currentPageName" />
<slot /> <slot />
</main> </main>

20
app/layouts/default.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<div class="site"> <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 --> <!-- Desktop Sidebar -->
<AppNavigation class="sidebar-desktop" /> <AppNavigation class="sidebar-desktop" />
@ -10,9 +11,11 @@
</div> </div>
<!-- Main Content --> <!-- Main Content -->
<main class="main"> <main id="main-content" class="main">
<TopStrip :page-path="currentPageName" /> <TopStrip :page-path="currentPageName" />
<div class="main-body">
<slot /> <slot />
</div>
</main> </main>
<!-- Mobile Drawer --> <!-- Mobile Drawer -->
@ -40,10 +43,23 @@ const currentPageName = computed(() => {
<style scoped> <style scoped>
.site { .site {
min-height: 100vh; min-height: 100vh;
display: flex;
flex-direction: column;
} }
.main { .main {
flex: 1;
margin-left: 220px; 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 { .sidebar-desktop {
@ -79,6 +95,8 @@ const currentPageName = computed(() => {
} }
.main { .main {
margin-left: 0; margin-left: 0;
flex: 1;
min-height: 0;
} }
} }
</style> </style>