From e992d9dd6f3bb2c37b2a6bccea300c61cf269545 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 13:49:15 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20accessibili?=
 =?UTF-8?q?ty=20and=20UX=20in=20Login=20and=20Chat=20views?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added aria-hidden="true" to decorative icons in Login and Chat views.
- Added visually hidden labels for email and chat inputs using the 'sr-only' class.
- Linked error messages in LoginView with aria-describedby and role="alert".
- Implemented aria-expanded and aria-controls for collapsible citation sections in ChatView.
- Added aria-live="polite" to the loading indicator in ChatView.
- Recorded accessibility learnings in .Jules/palette.md.

Co-authored-by: BenjaminWie <54136562+BenjaminWie@users.noreply.github.com>
---
 .Jules/palette.md        |  3 +++
 components/ChatView.tsx  | 26 ++++++++++++++++++--------
 components/LoginView.tsx | 14 ++++++++++++--
 3 files changed, 33 insertions(+), 10 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..d0e4e9d
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-22 - [Accessibility in Forms and Collapsibles]
+**Learning:** Inputs using only placeholders are inaccessible to screen readers. Always provide a `<label>` (can be `sr-only`). For collapsible content, `aria-expanded` and `aria-controls` are essential for communicating state changes.
+**Action:** Use `sr-only` labels for all form inputs and ensure proper ARIA attributes for interactive collapsible elements in future components.
diff --git a/components/ChatView.tsx b/components/ChatView.tsx
index 43534f2..b5d3a86 100644
--- a/components/ChatView.tsx
+++ b/components/ChatView.tsx
@@ -49,7 +49,7 @@ const ChatView: React.FC<ChatViewProps> = ({ messages, onSendMessage, onEnterVoi
         {messages.length === 0 && (
           <div className="h-full flex flex-col items-center justify-center text-center animate-in fade-in slide-in-from-bottom-12 duration-1000">
             <div className="w-24 h-24 bg-black rounded-[2.5rem] flex items-center justify-center mb-10 shadow-2xl shadow-black/20 ring-4 ring-black/5 ring-offset-4 ring-offset-white">
-              <ChatIcon className="w-12 h-12 text-white" />
+              <ChatIcon className="w-12 h-12 text-white" aria-hidden="true" />
             </div>
             <h1 className="text-4xl font-semibold tracking-tight mb-4 text-gray-900">Wie funktioniert unser Wohnpro?</h1>
             <p className="text-gray-400 max-w-sm mx-auto leading-relaxed text-lg">
@@ -80,6 +80,8 @@ const ChatView: React.FC<ChatViewProps> = ({ messages, onSendMessage, onEnterVoi
                   {/* Expand Hint Button */}
                   <button 
                     onClick={() => toggleCitations(idx)}
+                    aria-expanded={isExpanded}
+                    aria-controls={`citations-${idx}`}
                     className={`flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-300 group/hint border ${
                       isExpanded 
                       ? 'bg-black text-white border-black mb-4' 
@@ -90,11 +92,13 @@ const ChatView: React.FC<ChatViewProps> = ({ messages, onSendMessage, onEnterVoi
                     <span className="text-[10px] font-black uppercase tracking-[0.2em]">
                       {msg.citations!.length} {msg.citations!.length === 1 ? 'Beleg' : 'Belege'} im Wohnpro Guide gefunden
                     </span>
-                    <ArrowRightIcon className={`w-3 h-3 transition-transform duration-500 ${isExpanded ? 'rotate-90' : 'rotate-0'}`} />
+                    <ArrowRightIcon className={`w-3 h-3 transition-transform duration-500 ${isExpanded ? 'rotate-90' : 'rotate-0'}`} aria-hidden="true" />
                   </button>
 
                   {/* Collapsible Citations View */}
-                  <div className={`grid grid-cols-1 gap-3 w-full transition-all duration-500 ease-in-out overflow-hidden ${
+                  <div
+                    id={`citations-${idx}`}
+                    className={`grid grid-cols-1 gap-3 w-full transition-all duration-500 ease-in-out overflow-hidden ${
                     isExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0 pointer-events-none'
                   }`}>
                     {msg.citations!.map((citation, i) => (
@@ -104,11 +108,11 @@ const ChatView: React.FC<ChatViewProps> = ({ messages, onSendMessage, onEnterVoi
                         className="group relative text-left bg-white border border-gray-100 rounded-[2rem] p-5 pr-14 flex gap-5 hover:border-black hover:shadow-xl transition-all duration-500 active:scale-[0.98] overflow-hidden"
                       >
                         <div className="absolute top-0 right-0 bottom-0 w-12 bg-gray-50 flex items-center justify-center border-l border-gray-100 group-hover:bg-black group-hover:border-black transition-all">
-                          <ArrowRightIcon className="w-4 h-4 text-gray-300 group-hover:text-white transition-colors" />
+                          <ArrowRightIcon className="w-4 h-4 text-gray-300 group-hover:text-white transition-colors" aria-hidden="true" />
                         </div>
                         
                         <div className="p-3 bg-gray-50 rounded-xl shrink-0 group-hover:bg-green-50 transition-colors">
-                          <DocIcon className="w-6 h-6 text-gray-400 group-hover:text-green-600" />
+                          <DocIcon className="w-6 h-6 text-gray-400 group-hover:text-green-600" aria-hidden="true" />
                         </div>
                         
                         <div className="flex-1 min-w-0">
@@ -133,7 +137,7 @@ const ChatView: React.FC<ChatViewProps> = ({ messages, onSendMessage, onEnterVoi
 
         {isLoading && (
           <div className="flex justify-start animate-in fade-in slide-in-from-left-4 duration-500">
-            <div className="bg-white border border-gray-100 px-7 py-5 rounded-[2.2rem] rounded-tl-none shadow-sm flex items-center gap-4">
+            <div role="status" aria-live="polite" className="bg-white border border-gray-100 px-7 py-5 rounded-[2.2rem] rounded-tl-none shadow-sm flex items-center gap-4">
               <div className="flex gap-1.5">
                 <div className="w-2 h-2 bg-gray-300 rounded-full animate-bounce [animation-duration:1s]" />
                 <div className="w-2 h-2 bg-gray-300 rounded-full animate-bounce [animation-duration:1s] [animation-delay:0.2s]" />
@@ -150,7 +154,11 @@ const ChatView: React.FC<ChatViewProps> = ({ messages, onSendMessage, onEnterVoi
           <form onSubmit={handleSubmit} className="relative group">
             <div className="absolute inset-0 bg-black/5 blur-3xl rounded-full opacity-0 group-focus-within:opacity-100 transition-all duration-1000" />
             <div className="relative flex items-center">
+              <label htmlFor="chat-input" className="sr-only">
+                Deine Frage zum Wohnpro
+              </label>
               <input
+                id="chat-input"
                 type="text"
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
@@ -164,19 +172,21 @@ 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"
                 >
-                  <MicIcon className="w-7 h-7" />
+                  <MicIcon className="w-7 h-7" aria-hidden="true" />
                 </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' 
                     : 'bg-gray-50 text-gray-300 cursor-not-allowed'
                   }`}
                 >
-                  <ArrowRightIcon className="w-7 h-7" />
+                  <ArrowRightIcon className="w-7 h-7" aria-hidden="true" />
                 </button>
               </div>
             </div>
diff --git a/components/LoginView.tsx b/components/LoginView.tsx
index a7c3c0b..4bf2cb1 100644
--- a/components/LoginView.tsx
+++ b/components/LoginView.tsx
@@ -25,7 +25,7 @@ const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError })
       <div className="w-full max-w-sm text-center">
         <div className="mb-12">
           <div className="w-16 h-16 bg-black rounded-3xl mx-auto flex items-center justify-center mb-6 shadow-xl shadow-black/10">
-            <svg className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <svg aria-hidden="true" className="w-8 h-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
               <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
               <polyline points="9 22 9 12 15 12 15 22" />
             </svg>
@@ -36,14 +36,24 @@ const LoginView: React.FC<LoginViewProps> = ({ onLogin, error: externalError })
 
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="relative group">
+            <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"
+              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`}
             />
-            {error && <p className="mt-2 text-sm text-red-500 text-left px-2">{error}</p>}
+            {error && (
+              <p id="email-error" role="alert" className="mt-2 text-sm text-red-500 text-left px-2">
+                {error}
+              </p>
+            )}
           </div>
 
           <button