From 4455cd1c1a74eb282d3bd966f5935bad2ba3c948 Mon Sep 17 00:00:00 2001
From: Luna <luna161@users.noreply.github.com>
Date: Sat, 9 May 2026 18:38:07 +0000
Subject: [PATCH] fix: improve HTML semantics, accessibility, and alt texts

- Changed lang="en" to "de" (German content)
- Added aria-labels to all icon-only buttons (edit, delete, home, etc.)
- Replaced <span onClick> with <button> for keyboard accessibility
- Replaced <a onClick> (no href) with <button> elements
- Added proper link-button CSS class for accessible link-styled buttons
- Added focus outline styles for keyboard navigation
- Updated meta description from CRA default

Closes #73
---
 Frontend/frontend/public/index.html           |  4 ++--
 Frontend/frontend/src/Components/EntryList.js |  6 +++---
 Frontend/frontend/src/Components/UserList.js  |  4 ++--
 Frontend/frontend/src/Pages/Info.js           | 12 ++++++------
 Frontend/frontend/src/Pages/Login.js          | 10 +++++-----
 Frontend/frontend/src/Pages/Register.js       |  8 ++++----
 Frontend/frontend/src/Pages/kmRecord.js       |  2 +-
 Frontend/frontend/src/index.css               | 19 +++++++++++++++++++
 8 files changed, 42 insertions(+), 23 deletions(-)
diff --git a/Frontend/frontend/public/index.html b/Frontend/frontend/public/index.html
index 849abdc..c19ae9f 100644
--- a/Frontend/frontend/public/index.html
+++ b/Frontend/frontend/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/laufen.png" />
@@ -8,7 +8,7 @@
     <meta name="csrf_token" content="{{ csrf_token }}"> <!-- required for CSRF-security -->
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="DoRun — Charity Run Donation Management Platform"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
diff --git a/Frontend/frontend/src/Components/EntryList.js b/Frontend/frontend/src/Components/EntryList.js
index 7e7df72..bd544f8 100644
--- a/Frontend/frontend/src/Components/EntryList.js
+++ b/Frontend/frontend/src/Components/EntryList.js
@@ -113,12 +113,12 @@ const EntryList = ({ entries, handleEditEntry, handleDeleteEntryApi, handleAddEn
                 </div>
                 <div className="entry-actions">
                   {!entry.verified && isCooldownActive(entry.donoid) && (
-                    <button className="edit-btn" onClick={() => handleRemind(entry)} title="Verifizierung neu senden">
+                    <button className="edit-btn" aria-label="Verifizierung neu senden" onClick={() => handleRemind(entry)} title="Verifizierung neu senden">
                       <MdMailOutline />
                     </button>
                   )}
-                  <button className="edit-btn"  title="Eintrag bearbeiten" onClick={() => handleEditEntry(entry)}><FaEdit/></button>
-                  <button className="delete-btn" title="Eintrag löschen" onClick={() => handleDelEntry(entry)}><FaTrash/></button>
+                  <button className="edit-btn" aria-label="Eintrag bearbeiten" title="Eintrag bearbeiten" onClick={() => handleEditEntry(entry)}><FaEdit/></button>
+                  <button className="delete-btn" aria-label="Eintrag löschen" title="Eintrag löschen" onClick={() => handleDelEntry(entry)}><FaTrash/></button>
                 </div>
               </li>
             ))
diff --git a/Frontend/frontend/src/Components/UserList.js b/Frontend/frontend/src/Components/UserList.js
index be1e1d1..8f157a8 100644
--- a/Frontend/frontend/src/Components/UserList.js
+++ b/Frontend/frontend/src/Components/UserList.js
@@ -25,8 +25,8 @@ const UserList = ({ entries, handleEditEntry, handleDeleteEntry, handleAddEntry
                   {/* <span>{entry.fixedamount}</span> */}
                 </div>
                 <div className="entry-actions">
-                  <button className="edit-btn" onClick={() => handleEditEntry(entry)}><FaEdit/></button>
-                  <button className="delete-btn" onClick={() => handleDeleteEntry(entry.id)}><FaTrash/></button>
+                  <button className="edit-btn" aria-label="Benutzer bearbeiten" onClick={() => handleEditEntry(entry)}><FaEdit/></button>
+                  <button className="delete-btn" aria-label="Benutzer löschen" onClick={() => handleDeleteEntry(entry.id)}><FaTrash/></button>
                 </div>
               </li>
             ))
diff --git a/Frontend/frontend/src/Pages/Info.js b/Frontend/frontend/src/Pages/Info.js
index 184b120..920d09d 100644
--- a/Frontend/frontend/src/Pages/Info.js
+++ b/Frontend/frontend/src/Pages/Info.js
@@ -6,12 +6,12 @@ import { useNavigate } from 'react-router-dom';
 const Info = () => {
   const navigate = useNavigate();
   return (
-    <div className="info-wrapper-root">
+    <main className="info-wrapper-root">
       <div className="info-container-outer">
-        <div className="info-container">
-          <div className="back-btn-wrapper">
+        <article className="info-container">
+          <nav className="back-btn-wrapper">
             <button className="btn-back-from-info" onClick={() => navigate(-1)}>Zurück</button>
-          </div>          
+          </nav>          
           
           <h1 className="title">🏃‍♂️ Spendenlauf am 30. Februar 2026</h1>
 
@@ -86,9 +86,9 @@ const Info = () => {
             Bei weiteren Fragen kannst du dich gerne an <a href="mailto:test@Spendenlauf.de">test@test.de</a> wenden
           </p>
           
+      </article>
       </div>
-      </div>
-    </div>
+    </main>
   );
 };
 
diff --git a/Frontend/frontend/src/Pages/Login.js b/Frontend/frontend/src/Pages/Login.js
index 6cc6112..a5293a5 100644
--- a/Frontend/frontend/src/Pages/Login.js
+++ b/Frontend/frontend/src/Pages/Login.js
@@ -119,17 +119,17 @@ function Login() {
                 required
               />
             </div>
-            <p className="pwd-forget" onClick={handleForgorPwd}><span>Passwort vergessen?</span></p>
+            <p className="pwd-forget"><button className="link-button" onClick={handleForgorPwd}>Passwort vergessen?</button></p>
             <button className="login-button" type="submit">Anmelden</button>
             <p className="switch-text">
-              Noch kein Konto? <span onClick={handleRegister}>Registrieren</span>
+              Noch kein Konto? <button className="link-button" onClick={handleRegister}>Registrieren</button>
             </p>
             <div className="impressum-login">
-              <a className="impressum-login-link" title="impressum" onClick={() => navigate("/impressum")}>Impressum</a>
+              <button className="impressum-login-link link-button" title="Impressum" onClick={() => navigate("/impressum")}>Impressum</button>
               &nbsp;|&nbsp; 
-              <a className="impressum-login-link" title="datenschutz" onClick={() => navigate("/datenschutz")}>Datenschutz</a>
+              <button className="impressum-login-link link-button" title="Datenschutz" onClick={() => navigate("/datenschutz")}>Datenschutz</button>
               &nbsp;|&nbsp; 
-              <a className="impressum-login-link" title="info" onClick={() => navigate("/info")}>Info</a>
+              <button className="impressum-login-link link-button" title="Info" onClick={() => navigate("/info")}>Info</button>
             </div>
           </form>
           <br/>
diff --git a/Frontend/frontend/src/Pages/Register.js b/Frontend/frontend/src/Pages/Register.js
index 57e9612..73eb307 100644
--- a/Frontend/frontend/src/Pages/Register.js
+++ b/Frontend/frontend/src/Pages/Register.js
@@ -156,14 +156,14 @@ function Register() {
             </div>
             <button type="submit">Registrieren</button>
             <p className="switch-text">
-              Bereits ein Konto? <span onClick={handleLogin}>Anmelden</span>
+              Bereits ein Konto? <button className="link-button" onClick={handleLogin}>Anmelden</button>
             </p>
             <div className="impressum-login">
-              <a className="impressum-login-link" title="impressum" onClick={() => navigate("/impressum")}>Impressum</a>
+              <button className="impressum-login-link link-button" title="Impressum" onClick={() => navigate("/impressum")}>Impressum</button>
                 &nbsp;|&nbsp; 
-              <a className="impressum-login-link" title="datenschutz" onClick={() => navigate("/datenschutz")}>Datenschutz</a>
+              <button className="impressum-login-link link-button" title="Datenschutz" onClick={() => navigate("/datenschutz")}>Datenschutz</button>
                 &nbsp;|&nbsp; 
-              <a className="impressum-login-link" title="info" onClick={() => navigate("/info")}>Info</a>
+              <button className="impressum-login-link link-button" title="Info" onClick={() => navigate("/info")}>Info</button>
             </div>
           </form>
         </div>
diff --git a/Frontend/frontend/src/Pages/kmRecord.js b/Frontend/frontend/src/Pages/kmRecord.js
index c1d4148..502d141 100644
--- a/Frontend/frontend/src/Pages/kmRecord.js
+++ b/Frontend/frontend/src/Pages/kmRecord.js
@@ -128,7 +128,7 @@ const KmRecord = () => {
     return (
         <>
             <div>
-                <button className="home-btn" onClick={() => navigate("/admin")}>
+                <button className="home-btn" aria-label="Zurück zum Admin" onClick={() => navigate("/admin")}>
                     <IoHomeOutline /> Home
                 </button>
             </div>
diff --git a/Frontend/frontend/src/index.css b/Frontend/frontend/src/index.css
index ec2585e..502de95 100644
--- a/Frontend/frontend/src/index.css
+++ b/Frontend/frontend/src/index.css
@@ -11,3 +11,22 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+/* Accessible link-styled button — looks like a link but is keyboard-focusable */
+.link-button {
+  background: none;
+  border: none;
+  color: #2c5282;
+  cursor: pointer;
+  font-size: inherit;
+  font-family: inherit;
+  padding: 0;
+  text-decoration: underline;
+}
+.link-button:hover {
+  color: #1a365d;
+}
+.link-button:focus {
+  outline: 2px solid #4299e1;
+  outline-offset: 2px;
+}
