From 3bd0b937250963fc5f0ae90f361cba9a01a78af0 Mon Sep 17 00:00:00 2001
From: Andrew Gentry <andrew@reedgen.com>
Date: Sat, 29 Nov 2025 20:00:27 -0500
Subject: [PATCH] Accessibility Improvements (#66)

* Accessibility Fixes

* More improvements

* add padding to headers

---------

Co-authored-by: Will Freeman <hohosanta@me.com>
---
 webapp/src/App.vue                      | 42 ++++++++++++++++++-------
 webapp/src/components/layout/Footer.vue | 14 +++++----
 webapp/src/views/Landing.vue            |  2 +-
 3 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index c07826d..9ee1ccb 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -78,6 +78,7 @@ watch(() => theme.global.name.value, (newTheme) => {
           variant="text" 
           @click.stop="drawer = !drawer"
           class="d-md-none"
+          aria-label="Toggle Navigation Drawer"
         ></v-app-bar-nav-icon>
 
         <!-- Logo -->
@@ -176,7 +177,7 @@ watch(() => theme.global.name.value, (newTheme) => {
         <v-spacer class="d-md-none" />
 
         <v-btn icon>
-          <v-icon @click="toggleTheme">mdi-theme-light-dark</v-icon>
+          <v-icon @click="toggleTheme" aria-label="Toggle Theme">mdi-theme-light-dark</v-icon>
         </v-btn>
       </v-app-bar>
 
@@ -185,42 +186,61 @@ watch(() => theme.global.name.value, (newTheme) => {
         v-model="drawer"
         temporary
         class="d-md-none"
+        aria-label="Navigation Drawer"
       >
-        <v-list nav>
+        <v-list nav aria-label="Main Navigation">
           <v-list-item
             v-for="item in items"
             :key="item.title"
             link
             :to="item.to"
-          ><v-icon start>{{ item.icon }}</v-icon>{{ item.title }}</v-list-item>
+            role="option"
+          >
+            <v-icon start>{{ item.icon }}</v-icon>
+            {{ item.title }}
+          </v-list-item>
+        </v-list>
 
-          <v-divider />
+        <v-divider class="my-2" aria-hidden="true" role="presentation" />
 
-          <v-list-subheader>Contribute</v-list-subheader>
+        <v-list-subheader class="px-4">Contribute</v-list-subheader>
+        <v-list nav aria-label="Contribute Links">
           <v-list-item
             v-for="item in contributeItems"
             :key="item.title"
             link
             :to="item.to"
+            role="option"
           >
             <v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
-              <span style="vertical-align: middle;">{{ item.title }}</span>
+            <span style="vertical-align: middle;">{{ item.title }}</span>
           </v-list-item>
+        </v-list>
           
-          <v-divider />
+        <v-divider class="my-2" aria-hidden="true" role="presentation" />
           
-          <v-list-subheader>Get Involved</v-list-subheader>
+        <v-list-subheader class="px-4">Get Involved</v-list-subheader>
+        <v-list nav aria-label="Meta Links">
           <v-list-item
             v-for="item in metaItems"
             :key="item.title"
             link
             :to="item.to"
             :href="item.href"
-            :target="{ '_blank': item.href }"
+            :target="item.href ? '_blank' : undefined"
+            role="option"
           >
             <v-icon v-if="item.icon" start>{{ item.icon }}</v-icon>
-              <v-img v-else-if="item.customIcon" class="mr-2 custom-icon" contain width="24" height="24" :src="isDark ? item.customIconDark : item.customIcon" style="vertical-align: middle;" />
-              <span style="vertical-align: middle;">{{ item.title }}</span>
+            <v-img
+              v-else-if="item.customIcon"
+              class="mr-2 custom-icon"
+              contain
+              width="24"
+              height="24"
+              :src="isDark ? item.customIconDark : item.customIcon"
+              style="vertical-align: middle;"
+            />
+            <span style="vertical-align: middle;">{{ item.title }}</span>
           </v-list-item>
         </v-list>
       </v-navigation-drawer>
diff --git a/webapp/src/components/layout/Footer.vue b/webapp/src/components/layout/Footer.vue
index 4d02a8d..559b28b 100644
--- a/webapp/src/components/layout/Footer.vue
+++ b/webapp/src/components/layout/Footer.vue
@@ -9,14 +9,15 @@
         
         <!-- Internal Links -->
         <v-col cols="7" sm="3">
-          <v-list density="compact">
-            <v-list-subheader>Info</v-list-subheader>
-            <v-list-item
+          <v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-info-heading">Info</v-list-subheader>
+          <v-list density="compact" aria-labelledby="footer-info-heading" role="list">
+            <v-list-item role="listitem"
               v-for="link in internalLinks"
               :key="link.title"
               link
               :to="link.to"
               slim
+              :aria-label="link.alt"
             >
                 <v-list-item-title class="d-flex align-center">
                 <v-icon class="custom-icon" start :icon="link.icon" :alt="link.alt" />
@@ -28,8 +29,8 @@
 
         <!-- External Links -->
         <v-col cols="5" sm="3">
-          <v-list density="compact">
-            <v-list-subheader>Get Involved</v-list-subheader>
+          <v-list-subheader class="mx-4 font-weight-black text-subtitle-1" :class="isDark ? 'text-grey-lighten-5' : 'text-black'" id="footer-involved-heading">Get Involved</v-list-subheader>
+          <v-list density="compact" aria-labelledby="footer-involved-heading" role="list">
             <v-list-item
               v-for="link in externalLinks"
               :key="link.title"
@@ -38,6 +39,7 @@
               :href="link.href"
               :to="link.to"
               :target="link.href ? '_blank' : undefined"
+              role="listitem"
             >
               <v-list-item-title class="d-flex align-center justify-start">
                 <v-icon start v-if="link.icon" class="custom-icon" :icon="link.icon"></v-icon>
@@ -54,7 +56,7 @@
           cols="12"
           sm="6"
         >
-          <div class="copyright">
+          <div class="copyright" :class="isDark ? 'text-grey-lighten-5' : 'text-black'">
             <p>&copy; {{ currentYear }} DeFlock. All Rights Reserved</p>
             <p>Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank" style="color: unset; font-weight: normal;">OpenStreetMap contributors</a></p>
             <p class="mt-4">v1.1.0</p>
diff --git a/webapp/src/views/Landing.vue b/webapp/src/views/Landing.vue
index dabe8ee..d9d2b03 100644
--- a/webapp/src/views/Landing.vue
+++ b/webapp/src/views/Landing.vue
@@ -10,7 +10,7 @@
           
           <!-- Featured On Section -->
           <v-container class="featured-on-section my-8">
-            <h4 class="mb-4" style="opacity: 0.8">Featured On</h4>
+            <h2 class="mb-4 text-h5 font-weight-black" style="opacity: 0.8">Featured On</h2>
             <v-row justify="center" align-items="center">
               <v-card v-for="site in featuredOn" flat target="_blank" :href="site.url" class="mx-4" :width="site.wide ? 200 : 100" height="50" style="background: rgba(0,0,0,0)">
                 <v-img contain :src="site.logo" :alt="site.name" class="featured-logo" style="display: flex; align-items: center; height: 100%;" />