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

3
app/layouts/admin.vue
View file

@ -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>

22
app/layouts/default.vue
View file

@ -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>