From 750dccc86387b8fed8b359262817a71d63e30937 Mon Sep 17 00:00:00 2001
From: Sabrina Hennrich <sabrina@digimedialoop.de>
Date: Mon, 16 Jun 2025 16:39:48 +0200
Subject: [PATCH] nav barrierefrei

---
 components/CallToActionBox.vue         |  2 +-
 components/ContactForm.vue             | 52 ++++++++++++++++----------
 components/FAQArea.vue                 |  2 +-
 components/template/NavBar.vue         | 10 ++++-
 layouts/default.vue                    |  2 +-
 pages/designer/index.vue               |  4 +-
 pages/magazin/index.vue                |  2 +-
 pages/sectors/film/index.vue           |  2 +-
 pages/sectors/schools/index.vue        |  2 +-
 pages/services/accessibility/index.vue |  2 +-
 pages/services/index.vue               |  2 +-
 pages/webagency/index.vue              |  6 +--
 12 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/components/CallToActionBox.vue b/components/CallToActionBox.vue
index b69ebf2..1bad02a 100644
--- a/components/CallToActionBox.vue
+++ b/components/CallToActionBox.vue
@@ -2,7 +2,7 @@
     <div class="ctaBox">
       <h3>{{ headline }}</h3>
       <p>{{ text }}</p>
-      <button class="pinkBtn mt-1" role="button" @click.prevent="toggleContactBubble">
+      <button class="btn pinkBtn mt-1" role="button" @click.prevent="toggleContactBubble">
         {{ buttonText }}
       </button>
     </div>
diff --git a/components/ContactForm.vue b/components/ContactForm.vue
index 4b54f27..f17c4e8 100644
--- a/components/ContactForm.vue
+++ b/components/ContactForm.vue
@@ -7,17 +7,20 @@
       aria-labelledby="controlIcon"
       role="dialog"
     >
-    <svg
-      id="controlIcon"
-      tabindex="0"
-      role="button"
-      aria-label="Toggle contact form"
-      @click="toggleContactBubble"
-      @keydown.space.prevent="toggleContactBubble"
-      @keydown.enter.prevent="toggleContactBubble"
-    >
-        <use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`" />
-      </svg>
+      <button
+        id="controlIcon"
+        tabindex="0"
+        role="button"
+        aria-label="Toggle contact form"
+        @click="toggleContactBubble"
+        @keydown.space.prevent="toggleContactBubble"
+        @keydown.enter.prevent="toggleContactBubble"
+      >
+        <svg>
+          <use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`" />
+        </svg>
+      </button>
+
   
       <div
         v-show="isContactBubbleOpen"
@@ -168,7 +171,7 @@
   
                 <button
                   type="submit"
-                  class="pinkBtn"
+                  class="btn pinkBtn"
                   :aria-label="$t('contactForm.sendMessage')"
                 >
                   {{ $t('contactForm.sendMessage') }}
@@ -406,6 +409,11 @@ watch(isContactBubbleOpen, async (newVal) => {
         a
             color: $primaryColor 
     #controlIcon
+      border: none
+      &:focus
+        outline: 2px solid $primaryColor
+        outline-offset: 8px
+      svg
         position: absolute
         bottom: 50%
         left: 50%
@@ -419,15 +427,22 @@ watch(isContactBubbleOpen, async (newVal) => {
     &.active
         height: 90vh
         width: 90vw
-        background-color: rgba(lighten($beige, 8%), .98)
-        color: $darkgrey
+        background-color: white
         display: flex
         flex-direction: column
         text-align: left
         border: 1px solid $lightgrey
         animation: none
         box-shadow: 1px 1px 15px 2px $beige
-        @media(max-width: $breakPointMD)
+        #controlIcon
+          width: auto
+          height: auto
+          top: 2rem
+          position: absolute
+          svg
+            display: block
+            fill: #888
+        @media(max-width: $breakPointLG)
             border-radius: 0
             height: 100%
             width: 100%
@@ -437,10 +452,7 @@ watch(isContactBubbleOpen, async (newVal) => {
                 right: 5vw 
                 left: auto
                 bottom: 4rem !important
-        #controlIcon
-            bottom: 3rem
-            fill: #888
-            width: 2rem
+           
         .mobileAspBox
             width: 30vw
             max-width: 90px
@@ -480,7 +492,7 @@ watch(isContactBubbleOpen, async (newVal) => {
     textarea
         height: 20%
         font-size: 1.1rem
-    button
+    .btn
         font-size: 1.2rem
         border: none
         background-image: linear-gradient(to bottom right, lighten($pink, 10%), $pink)
diff --git a/components/FAQArea.vue b/components/FAQArea.vue
index 917c335..48e0a60 100644
--- a/components/FAQArea.vue
+++ b/components/FAQArea.vue
@@ -9,7 +9,7 @@
         <h4> {{ $t('faqBox.questions') }} </h4>
       </div>
       <div class="col-md-6">
-        <button role="button" class="pinkBtn" @click.prevent="toggleContactBubble">
+        <button role="button" class="btn pinkBtn" @click.prevent="toggleContactBubble">
           {{ button }}
         </button>
       </div>
diff --git a/components/template/NavBar.vue b/components/template/NavBar.vue
index e2622a5..4c06b19 100644
--- a/components/template/NavBar.vue
+++ b/components/template/NavBar.vue
@@ -7,6 +7,7 @@
       scrollPosition > 50 ? 'scrolled' : ''
     ]"
     aria-label="Hauptnavigation"
+    role="menu"
   >
     <!-- Burger Icon als Button -->
     <button
@@ -38,6 +39,9 @@
         class="nav-item"
         @mouseenter="screenWidth >= 1350 && link.subNav && showSubNav(link.label)"
         @mouseleave="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
+        @focusin="screenWidth >= 1350 && link.subNav && showSubNav(link.label)"
+        @focusout="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
+        role="menuitem"
       >
         <!-- Mit SubNav -->
         <template v-if="link.subNav">
@@ -55,10 +59,10 @@
               {{ isActiveSubNav(link.label) ? 'Untermenü schließen' : 'Untermenü öffnen' }}
             </span>
           </button>
-          <div v-else>
+          <button v-else>
             {{ $t(link.label) }}
             <span class="arrow" :class="{ open: isSubNavOpen === link.label }"></span>
-          </div>
+          </button>
 
           <ul
             :id="`submenu-${link.label}`"
@@ -240,6 +244,8 @@
     color: $darkgrey
     font-size: 1.1rem
     cursor: pointer
+    button
+        all: unset
     a
         text-decoration: none
         color: $darkgrey
diff --git a/layouts/default.vue b/layouts/default.vue
index 1e2638f..bb2fcf4 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -117,7 +117,7 @@ main
   .loopShape
     border-radius: $loopShape
 
-  button, .btn
+  .btn
     background-color: white
     border: 1px solid $darkgrey
     border-radius: 5px
diff --git a/pages/designer/index.vue b/pages/designer/index.vue
index 6c34d0d..32d4346 100644
--- a/pages/designer/index.vue
+++ b/pages/designer/index.vue
@@ -37,7 +37,7 @@
                 </ul>
                 <p><b>Du bleibst der kreative Kopf!</b><br>
                 Ich sorge dafür, dass dein Design genauso im Web erscheint, wie du es geplant hast – mit Top-Performance & perfekter technischer Umsetzung.</p>
-                <button class="pinkBtn" role="button" @click.prevent="toggleContactBubble">Lass uns kennenlernen</button>
+                <button class="btn pinkBtn" role="button" @click.prevent="toggleContactBubble">Lass uns kennenlernen</button>
             </div>
             
         </section>
@@ -126,7 +126,7 @@
                         <h2>Hat Dein Design den richtigen Kontrast?</h2>
                         <p>Mit dem praktischen Kontrastchecker kannst Du herausfinden, ob die Schrift und der Hintergrund in Deinem Design den WCAG_Richtlinien entsprechen. So stellst Du sicher, dass Dein Design für alle gut lesbar ist.</p>
                         <button
-class="mintBtn" role="button"
+class="btn mintBtn" role="button"
             aria-label="Zum Kontrastchecker"
             @click.prevent="navigateTo('/toolbox/kontrastchecker')">Jetzt kostenlos Konstrast prüfen</button>
             </div>
diff --git a/pages/magazin/index.vue b/pages/magazin/index.vue
index 49ee2ca..7139c07 100644
--- a/pages/magazin/index.vue
+++ b/pages/magazin/index.vue
@@ -34,7 +34,7 @@
               <h2>{{ article.header }}</h2>
               
             </div>
-            <button class="mintBtn">{{ $t('pages.magazin.readmore') }}</button>
+            <button class="btn mintBtn">{{ $t('pages.magazin.readmore') }}</button>
           </div>
         </NuxtLinkLocale>
 
diff --git a/pages/sectors/film/index.vue b/pages/sectors/film/index.vue
index 08bff25..b3ec2fa 100644
--- a/pages/sectors/film/index.vue
+++ b/pages/sectors/film/index.vue
@@ -12,7 +12,7 @@
         <h1>Webseiten für die Film- & Fernsehbranche</h1>
         <h2>Für Schauspieler, Regisseure, Produktionsfirmen und Filmtechnik-Profis</h2>
         <h3>Einfach zu bedienende Webseiten, die Ihre Arbeit ins richtige Licht rücken</h3>
-        <button class="whiteBtn" role="button" @click.prevent="toggleContactBubble">Erstkontakt – ganz ohne Drehbuch</button>
+        <button class="btn whiteBtn" role="button" @click.prevent="toggleContactBubble">Erstkontakt – ganz ohne Drehbuch</button>
       </HeroBox>
   
       <section class="visibility">
diff --git a/pages/sectors/schools/index.vue b/pages/sectors/schools/index.vue
index 81f0cde..a12cc1a 100644
--- a/pages/sectors/schools/index.vue
+++ b/pages/sectors/schools/index.vue
@@ -125,7 +125,7 @@
                             </p>
                             <h3>Dürfen wir auch Sie unterstützen?</h3>
                             <button
-                                class="my-4 pinkBtn"
+                                class="my-4 btn pinkBtn"
                                 role="button"
                                 aria-label="Kontaktformular öffnen"
                                 @click.prevent="toggleContactBubble"
diff --git a/pages/services/accessibility/index.vue b/pages/services/accessibility/index.vue
index d9c2115..057ec35 100644
--- a/pages/services/accessibility/index.vue
+++ b/pages/services/accessibility/index.vue
@@ -30,7 +30,7 @@
                 </ul>
                 <h3>Möchten Sie wissen, wie barrierefrei Ihre aktuelle Webseite ist?</h3>
             <button
-class="pinkBtn" role="button"
+class="btn pinkBtn" role="button"
                 aria-label="Barrierefreiheitscheck"
                 @click.prevent="toggleContactBubble">Kostenlosen Barrierefreiheits-Check anfordern!</button>
             </div>
diff --git a/pages/services/index.vue b/pages/services/index.vue
index d7e8700..982ac90 100644
--- a/pages/services/index.vue
+++ b/pages/services/index.vue
@@ -62,7 +62,7 @@
             <h2 id="invitation-title">{{ $t('pages.home.invitation.title') }}</h2>
             <h3>{{ $t('pages.home.invitation.teaser') }}</h3>
             <button
-class="pinkBtn" role="button"
+class="btn pinkBtn" role="button"
                     aria-describedby="invitation-title"
                     aria-label="Kontaktformular öffnen"
                     @click.prevent="toggleContactBubble">{{ $t('pages.home.invitation.button') }}</button>
diff --git a/pages/webagency/index.vue b/pages/webagency/index.vue
index 8b143cf..6de8df2 100644
--- a/pages/webagency/index.vue
+++ b/pages/webagency/index.vue
@@ -9,7 +9,7 @@
           <p v-html="$t('pages.webagency.hero.text2')" />
           <p v-html="$t('pages.webagency.hero.text3')" />
           <button
-            class="my-4 pinkBtn"
+            class="my-4 btn pinkBtn"
             role="button"
             aria-label="Kontaktformular öffnen"
             @click.prevent="toggleContactBubble"
@@ -74,7 +74,7 @@
           </div>
 
           <button
-            class="pinkBtn mt-4"
+            class="btn pinkBtn mt-4"
             role="button"
             aria-label="Kontaktformular öffnen"
             @click.prevent="toggleContactBubble"
@@ -90,7 +90,7 @@
         <p class="supheadlineMint">{{ $t('pages.webagency.grafiker.supheadline') }}</p>
         <h2>{{ $t('pages.webagency.grafiker.title') }}</h2>
         <button
-          class="mintBtn"
+          class="btn mintBtn"
           role="button"
           aria-label="Zum Angebot für Kreative"
           @click.prevent="navigateTo(designerLink)"