From dcc451069d179d85ae8d5c78391742fbb957b57f Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Thu, 23 Jun 2022 12:49:20 +0200
Subject: [PATCH] feat: improve WelcomeModal accessibility

---
 src/components/WelcomeModal.tsx | 38 ++++++++++++++++++++-------------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/WelcomeModal.tsx b/src/components/WelcomeModal.tsx
index 6b7b2af..8f336a1 100644
--- a/src/components/WelcomeModal.tsx
+++ b/src/components/WelcomeModal.tsx
@@ -129,31 +129,43 @@ const WelcomeModal: Component = (props) => {
               </div>
             </div>
 
-            <div class="mt-28 flex text-center gap-7 items-center justify-center">
-              <a class="link link-secondary" href="#welcome-quickstart">
+            <div class="mt-28 text-base flex text-center gap-7 items-center justify-center">
+              <a
+                class="link text-secondary-focus hover:text-secondary"
+                href="#welcome-quickstart"
+              >
                 Einleitung
               </a>
-              <a class="link link-secondary" href="#welcome-why-free">
+              <a
+                class="link text-secondary-focus hover:text-secondary"
+                href="#welcome-why-free"
+              >
                 Wieso ist Räppli <br />
                 <strong>komplett kostenlos</strong>?
               </a>
-              <a class="link link-secondary" href="#welcome-lufrai">
+              <a
+                class="link text-secondary-focus hover:text-secondary"
+                href="#welcome-lufrai"
+              >
                 Was ist Lufrai?
               </a>
-              <a class="link link-secondary" href="#welcome-support">
+              <a
+                class="link text-secondary-focus hover:text-secondary"
+                href="#welcome-support"
+              >
                 Das Projekt
                 <br />
                 unterstützen
               </a>
               <a
-                class="link link-secondary"
+                class="link text-secondary-focus hover:text-secondary"
                 title="Häufig gestellte Fragen"
                 href="#welcome-faq"
               >
                 FAQ
               </a>
               <a
-                class="link link-secondary flex items-center gap-2"
+                class="link text-secondary-focus hover:text-secondary flex items-center gap-2"
                 target="_blank"
                 rel="noopener"
                 href="https://git.lufrai.com/rappli/rappli"
@@ -291,6 +303,7 @@ const WelcomeModal: Component = (props) => {
           title="Unterstütze Lufrai mit einem Wasserzeichen im Dokument"
         >
           <input
+            id="welcome-modal-show-watermark"
             checked={localState.showLufraiWatermark}
             class="checkbox checkbox-lg checkbox-accent shadow-md"
             type="checkbox"
@@ -298,17 +311,12 @@ const WelcomeModal: Component = (props) => {
               setLocalState("showLufraiWatermark", evt.currentTarget.checked)
             }
           />
-          <button
-            onClick={() =>
-              setLocalState(
-                "showLufraiWatermark",
-                !localState.showLufraiWatermark
-              )
-            }
+          <label
+            for="welcome-modal-show-watermark"
             class="btn btn-sm btn-accent gap-2 shadow-md"
           >
             Lufrai unterstützen
-          </button>
+          </label>
         </div>
         <button
           onClick={() => setLocalState("showWelcome", false)}