From 616e64f37d384c297064dc81c815a3abb55ebc04 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 18 Feb 2026 21:06:56 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Accessibility=20and?=
 =?UTF-8?q?=20Interaction=20improvements=20for=20QuickScan=20and=20Search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added ARIA labels to search inputs, search buttons, and department dropdown.
- Improved QuickScan modal keyboard accessibility (role="button", tabindex="0", Enter/Space support).
- Added focus-visible indicators to QuickScan trigger and cards.
- Implemented loading state with spinner for QuickScan confirmation button.
- Wrapped icon-only buttons with aria-hidden icons for screen readers.

Co-authored-by: Woschj <81321922+Woschj@users.noreply.github.com>
---
 .Jules/palette.md                             |  3 ++
 app/static/js/quickscan.js                    | 17 +++++++++-
 app/templates/base.html                       |  7 +++-
 app/templates/components/quickscan_modal.html | 32 +++++++++++++------
 app/templates/shared/list_base.html           |  5 +--
 5 files changed, 50 insertions(+), 14 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..f2ea895
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-02-18 - [Accessibility & Interaction Feedback]
+**Learning:** Custom interactive elements (like cards used as buttons) must have proper ARIA roles, tabindex, and keyboard event handlers (Enter/Space) to be accessible. Additionally, async buttons should always provide visual loading states and use a `finally` block in JS to ensure the button is restored if the modal stays open or on error.
+**Action:** Always check for `role="button"` and `tabindex="0"` on non-button interactive elements, and implement robust button state management for async calls.
diff --git a/app/static/js/quickscan.js b/app/static/js/quickscan.js
index 0b0b3f9..6ca91d5 100755
--- a/app/static/js/quickscan.js
+++ b/app/static/js/quickscan.js
@@ -1074,6 +1074,13 @@ const QuickScan = {
             return;
         }
 
+        const btn = document.getElementById('quickScanConfirmBtn');
+        const originalHTML = btn ? btn.innerHTML : '';
+        if (btn) {
+            btn.disabled = true;
+            btn.innerHTML = '<span class="loading loading-spinner loading-xs"></span> Verarbeitung...';
+        }
+
         try {
             // Daten für die API zusammenstellen
             const requestData = {
@@ -1108,11 +1115,19 @@ const QuickScan = {
             } else {
                 showQuickScanToast('success', data.message);
                 this.reset();
-                document.getElementById('quickScanModal').close();
+                const modal = document.getElementById('quickScanModal');
+                if (modal) modal.close();
             }
         } catch (error) {
             console.error('Error:', error);
             showQuickScanToast('error', 'Ein Fehler ist aufgetreten');
+        } finally {
+            if (btn) {
+                btn.disabled = false;
+                btn.innerHTML = originalHTML;
+                // Re-validate button state based on remaining inputs if modal wasn't closed
+                updateQuickScanButton();
+            }
         }
     }
 };
diff --git a/app/templates/base.html b/app/templates/base.html
index c376ba7..6b91edc 100755
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -203,6 +203,11 @@
             box-shadow: 0 8px 20px rgba(0,0,0,0.2);
         }
 
+        #quickScanTrigger:focus-visible {
+            outline: 2px solid #4f46e5;
+            outline-offset: 2px;
+        }
+
         /* Trennlinie */
         .sidebar-divider {
             width: 85%;
@@ -399,7 +404,7 @@ <h1 class="text-xl font-bold text-slate-900 truncate">
                 </a>
                 {% if current_user.is_authenticated %}
                 <div class="dropdown dropdown-end">
-                    <button type="button" tabindex="0" class="btn btn-ghost btn-sm text-slate-600 hover:bg-slate-100">
+                    <button type="button" tabindex="0" class="btn btn-ghost btn-sm text-slate-600 hover:bg-slate-100" aria-label="Abteilung wechseln">
                         <i class="fas fa-building mr-2"></i>
                         <span class="hidden sm:inline">{{ departments_ctx.current or departments.current or 'Abteilung wählen' }}</span>
                     </button>
diff --git a/app/templates/components/quickscan_modal.html b/app/templates/components/quickscan_modal.html
index c624cab..6a04983 100755
--- a/app/templates/components/quickscan_modal.html
+++ b/app/templates/components/quickscan_modal.html
@@ -1,24 +1,36 @@
 <!-- QuickScan Modal -->
 <dialog id="quickScanModal" class="modal">
     <div class="modal-box w-full max-w-4xl max-h-[95vh] flex flex-col p-4 relative overflow-y-auto">
-        <button class="absolute top-2 right-2 btn btn-sm btn-circle btn-ghost text-xl" onclick="document.getElementById('quickScanModal').close()" aria-label="Schließen">&times;</button>
+        <button class="absolute top-2 right-2 btn btn-sm btn-circle btn-ghost text-xl" onclick="document.getElementById('quickScanModal').close()" aria-label="Schließen"><span aria-hidden="true">&times;</span></button>
         <h3 class="font-bold text-base mb-4 text-center">QuickScan</h3>
         <div class="flex flex-col md:flex-row gap-6 mb-6 justify-center items-center">
             <!-- Karte: Werkzeug/Verbrauchsgut -->
-            <div id="itemCard" class="card w-[320px] h-[320px] bg-base-200 cursor-pointer transition hover:shadow-2xl hover:scale-[1.03] active:scale-[0.98] border-2 border-transparent" onclick="QuickScan.activateInput('item')">
+            <div id="itemCard"
+                 role="button"
+                 tabindex="0"
+                 aria-labelledby="itemCardTitle"
+                 onkeydown="if(event.key==='Enter' || event.key===' ') { event.preventDefault(); this.click(); }"
+                 class="card w-[320px] h-[320px] bg-base-200 cursor-pointer transition hover:shadow-2xl hover:scale-[1.03] active:scale-[0.98] border-2 border-transparent focus:outline-none focus:ring-4 focus:ring-primary/50"
+                 onclick="QuickScan.activateInput('item')">
                 <div class="card-body flex flex-col items-center justify-center h-full">
-                    <i class="fas fa-tools text-2xl text-primary mb-1"></i>
-                    <h2 class="card-title text-base mb-1">Werkzeug / Verbrauchsgut</h2>
+                    <i class="fas fa-tools text-2xl text-primary mb-1" aria-hidden="true"></i>
+                    <h2 id="itemCardTitle" class="card-title text-base mb-1">Werkzeug / Verbrauchsgut</h2>
                     <div id="itemCardContent">
                         <p class="text-sm opacity-50">Klicken &amp; Barcode scannen oder eingeben</p>
                     </div>
                 </div>
             </div>
             <!-- Karte: Mitarbeiter -->
-            <div id="workerCard" class="card w-[320px] h-[320px] bg-base-200 cursor-pointer transition hover:shadow-2xl hover:scale-[1.03] active:scale-[0.98] border-2 border-transparent" onclick="QuickScan.activateInput('worker')">
+            <div id="workerCard"
+                 role="button"
+                 tabindex="0"
+                 aria-labelledby="workerCardTitle"
+                 onkeydown="if(event.key==='Enter' || event.key===' ') { event.preventDefault(); this.click(); }"
+                 class="card w-[320px] h-[320px] bg-base-200 cursor-pointer transition hover:shadow-2xl hover:scale-[1.03] active:scale-[0.98] border-2 border-transparent focus:outline-none focus:ring-4 focus:ring-secondary/50"
+                 onclick="QuickScan.activateInput('worker')">
                 <div class="card-body flex flex-col items-center justify-center h-full">
-                    <i class="fas fa-id-badge text-2xl text-secondary mb-1"></i>
-                    <h2 class="card-title text-base mb-1">Mitarbeiter</h2>
+                    <i class="fas fa-id-badge text-2xl text-secondary mb-1" aria-hidden="true"></i>
+                    <h2 id="workerCardTitle" class="card-title text-base mb-1">Mitarbeiter</h2>
                     <div id="workerCardContent">
                         <p class="text-sm opacity-50">Klicken &amp; Barcode scannen oder eingeben</p>
                     </div>
@@ -28,7 +40,7 @@ <h2 class="card-title text-base mb-1">Mitarbeiter</h2>
         <!-- Sichtbares Eingabefeld, das nur bei aktiver Karte angezeigt wird -->
         <div class="flex flex-col items-center gap-2 mt-4">
             <div id="quickScanActiveInputContainer" class="hidden w-full max-w-sm">
-                <input type="text" id="quickScanActiveInput" class="input input-bordered w-full" autocomplete="off" />
+                <input type="text" id="quickScanActiveInput" class="input input-bordered w-full" autocomplete="off" aria-label="Barcode scannen oder eingeben" />
             </div>
             <div class="flex gap-2 mt-2">
                 <button class="btn btn-ghost hover:btn-warning active:scale-95 transition" type="button" onclick="QuickScan.reset()">Reset</button>
@@ -47,7 +59,7 @@ <h3 class="font-bold text-lg mb-4">Menge eingeben</h3>
                 <label class="label">
                     <span class="label-text">Menge</span>
                 </label>
-                <input type="number" id="quantityInput" class="input input-bordered" min="1" value="1" style="height: 3rem; line-height: 1.5; padding: 0.5rem 1rem;">
+                <input type="number" id="quantityInput" class="input input-bordered" min="1" value="1" style="height: 3rem; line-height: 1.5; padding: 0.5rem 1rem;" aria-label="Menge">
             </div>
             <div class="flex justify-end space-x-4">
                 <button type="button" onclick="QuickScan.closeQuantityModal()" class="btn btn-ghost">Abbrechen</button>
@@ -66,7 +78,7 @@ <h3 class="font-bold text-lg mb-4">Rückgabedatum festlegen</h3>
                 <label class="label">
                     <span class="label-text">Voraussichtliche Rückgabe</span>
                 </label>
-                <input type="date" id="returnDateInput" class="input input-bordered" style="height: 3rem; line-height: 1.5; padding: 0.5rem 1rem;">
+                <input type="date" id="returnDateInput" class="input input-bordered" style="height: 3rem; line-height: 1.5; padding: 0.5rem 1rem;" aria-label="Rückgabedatum">
             </div>
             <div class="text-sm text-base-content/60 mt-2">
                 <i class="fas fa-info-circle mr-1"></i>
diff --git a/app/templates/shared/list_base.html b/app/templates/shared/list_base.html
index 0bcb254..ca99c4d 100755
--- a/app/templates/shared/list_base.html
+++ b/app/templates/shared/list_base.html
@@ -12,8 +12,9 @@
                         <input type="text" 
                                placeholder="Suchen..." 
                                class="input input-bordered w-full" 
-                               id="searchInput">
-                        <button class="btn btn-square">
+                               id="searchInput"
+                               aria-label="Suchen">
+                        <button class="btn btn-square" aria-label="Suchen">
                             <i class="fas fa-search"></i>
                         </button>
                     </div>