From 3f0f9dd270baa683f5c8c711d200f552e13b03b9 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 Jan 2026 13:52:21 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20Login=20acc?=
 =?UTF-8?q?essibility=20and=20add=20loading=20states?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced browser alert() with managed state for login errors.
- Added loading state and spinner to the LoginView login button.
- Added visually hidden labels and ARIA attributes for better accessibility in LoginView.
- Added ARIA labels to icon-only buttons in ChatView and Sidebar.
- Added LoadingIcon to components/Icons.tsx.

Co-authored-by: BenjaminWie <54136562+BenjaminWie@users.noreply.github.com>
---
 .Jules/palette.md        |  3 +++
 App.tsx                  |  4 ++--
 components/ChatView.tsx  |  2 ++
 components/Icons.tsx     |  4 +++-
 components/LoginView.tsx | 41 ++++++++++++++++++++++++++++++++--------
 components/Sidebar.tsx   |  2 +-
 6 files changed, 44 insertions(+), 12 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..5fccd9b
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-22 - [Login Accessibility & Loading States]
+**Learning:** Replacing browser `alert()` with managed state in the Login component allows for better UX (loading spinners, inline error messages) and improved accessibility (ARIA attributes).
+**Action:** Always prefer inline validation over `alert()` for better user experience and screen reader support. Use `sr-only` for hidden labels.
diff --git a/App.tsx b/App.tsx
index 28169f5..d2bae80 100644
--- a/App.tsx
+++ b/App.tsx
@@ -100,9 +100,9 @@ const App: React.FC = () => {
     const user = users.find(u => u.email.toLowerCase() === email.toLowerCase() && u.status === 'aktiv');
     if (user) {
       setCurrentUser(user);
-    } else {
-      alert("Zugang verweigert. Nur verifizierte Wohnpro-Bewohner können sich im Wohnpro Guide anmelden.");
+      return true;
     }
+    return false;
   };
 
   const sendMessage = async (text: string) => {
diff --git a/components/ChatView.tsx b/components/ChatView.tsx
index 43534f2..bedfca7 100644
--- a/components/ChatView.tsx
+++ b/components/ChatView.tsx
@@ -164,12 +164,14 @@ const ChatView: React.FC<ChatViewProps> = ({ messages, onSendMessage, onEnterVoi
                   onClick={onEnterVoice}
                   className="p-3.5 text-gray-400 hover:text-green-600 transition-all rounded-full hover:bg-gray-50 active:scale-90"
                   title="Sprachmodus"
+                  aria-label="Sprachmodus starten"
                 >
                   <MicIcon className="w-7 h-7" />
                 </button>
                 <button
                   type="submit"
                   disabled={!input.trim() || isLoading}
+                  aria-label="Nachricht senden"
                   className={`p-4 rounded-full transition-all active:scale-90 ${
                     input.trim() && !isLoading 
                     ? 'bg-black text-white shadow-xl shadow-black/20 hover:bg-gray-900' 
diff --git a/components/Icons.tsx b/components/Icons.tsx
index 6d8f925..54b8003 100644
--- a/components/Icons.tsx
+++ b/components/Icons.tsx
@@ -22,10 +22,12 @@ import {
   HelpCircle,
   ThumbsUp,
   ThumbsDown,
-  Download
+  Download,
+  Loader2
 } from 'lucide-react';
 
 export const ChatIcon = ({ className = "w-6 h-6" }) => <MessageSquare className={className} />;
+export const LoadingIcon = ({ className = "w-6 h-6" }) => <Loader2 className={`animate-spin ${className}`} />;
 export const MicIcon = ({ className = "w-6 h-6" }) => <Mic className={className} />;
 export const DocIcon = ({ className = "w-6 h-6" }) => <FileText className={className} />;
 export const SettingsIcon = ({ className = "w-6 h-6" }) => <Settings className={className} />;
diff --git a/components/LoginView.tsx b/components/LoginView.tsx
index a7c3c0b..e28c622 100644
--- a/components/LoginView.tsx
+++ b/components/LoginView.tsx
@@ -1,23 +1,31 @@
 
 import React, { useState } from 'react';
 import { User } from '../types';
+import { LoadingIcon } from './Icons';
 
 interface LoginViewProps {
-  onLogin: (email: string) => void;
+  onLogin: (email: string) => boolean;
   error?: string;
 }
 
 const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError }) => {
   const [email, setEmail] = useState('');
   const [error, setError] = useState(externalError || '');
+  const [isLoading, setIsLoading] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!email) {
       setError('Bitte gib deine Wohnpro E-Mail Adresse ein.');
       return;
     }
-    onLogin(email);
+
+    setIsLoading(true);
+    const success = onLogin(email);
+    if (!success) {
+      setError('Zugang verweigert. Nur verifizierte Wohnpro-Bewohner können sich anmelden.');
+      setIsLoading(false);
+    }
   };
 
   return (
@@ -35,22 +43,39 @@ const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError })
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="relative group">
+          <div className="relative group text-left">
+            <label htmlFor="email-input" className="sr-only">Wohnpro E-Mail Adresse</label>
             <input
+              id="email-input"
               type="email"
               value={email}
               onChange={(e) => { setEmail(e.target.value); setError(''); }}
               placeholder="Wohnpro E-Mail Adresse"
-              className={`w-full bg-gray-50 border ${error ? 'border-red-200' : 'border-gray-100'} rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-black/5 transition-all text-lg placeholder:text-gray-300`}
+              disabled={isLoading}
+              aria-invalid={!!error}
+              aria-describedby={error ? "email-error" : undefined}
+              className={`w-full bg-gray-50 border ${error ? 'border-red-200' : 'border-gray-100'} rounded-2xl px-6 py-4 focus:outline-none focus:ring-2 focus:ring-black/5 transition-all text-lg placeholder:text-gray-300 disabled:opacity-50`}
             />
-            {error && <p className="mt-2 text-sm text-red-500 text-left px-2">{error}</p>}
+            {error && (
+              <p id="email-error" className="mt-2 text-sm text-red-500 px-2 animate-in fade-in slide-in-from-top-1">
+                {error}
+              </p>
+            )}
           </div>
 
           <button
             type="submit"
-            className="w-full bg-black text-white rounded-2xl py-4 font-semibold text-lg hover:bg-gray-900 active:scale-[0.98] transition-all shadow-lg shadow-black/5"
+            disabled={isLoading}
+            className="w-full bg-black text-white rounded-2xl py-4 font-semibold text-lg hover:bg-gray-900 active:scale-[0.98] transition-all shadow-lg shadow-black/5 flex items-center justify-center gap-2 disabled:opacity-70 disabled:active:scale-100"
           >
-            Guide öffnen
+            {isLoading ? (
+              <>
+                <LoadingIcon className="w-5 h-5" />
+                <span className="sr-only">Wird geladen...</span>
+              </>
+            ) : (
+              'Guide öffnen'
+            )}
           </button>
         </form>
 
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index cb713bf..fb8530c 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -27,7 +27,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, sessions, currentVie
         <div className="flex flex-col h-full p-6">
           <div className="flex items-center justify-between mb-8 lg:hidden">
             <span className="font-semibold text-xl tracking-tight">Wohnpro Guide</span>
-            <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full">
+            <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full" aria-label="Menü schließen">
               <CloseIcon className="w-5 h-5" />
             </button>
           </div>