From 440cd861f109c5b9dc9eda60e6ccb7b5f7e09a2e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 16 Mar 2026 15:34:02 +0000
Subject: [PATCH] feat: add micro-UX and accessibility improvements to V2 Login
 and Examen

- Implement password visibility toggle in V2Login
- Improve form accessibility in V2Login with proper label associations
- Enhance V2Examen feedback loop with visual markers (check/close icons)
- Update V2Examen logic to correctly evaluate answers from data
- Add ARIA labels and hide decorative icons for better accessibility screen reader support

Co-authored-by: godie <227743+godie@users.noreply.github.com>
---
 src/v2/pages/V2Examen.jsx | 42 ++++++++++++++++++++++++---------------
 src/v2/pages/V2Login.jsx  | 38 +++++++++++++++++++++++++++++------
 2 files changed, 58 insertions(+), 22 deletions(-)

diff --git a/src/v2/pages/V2Examen.jsx b/src/v2/pages/V2Examen.jsx
index f8a7b52..78a0f57 100644
--- a/src/v2/pages/V2Examen.jsx
+++ b/src/v2/pages/V2Examen.jsx
@@ -46,15 +46,16 @@ const V2Examen = () => {
     }, [identificador]);
 
     const handleSubmit = () => {
-        if (state.selectedAnswer === null) return;
-        const correct = state.selectedAnswer === 0; // In mock, first is correct
-        setState(prev => ({ ...prev, showFeedback: true, isCorrect: correct }));
+        if (state.selectedAnswer === null || !state.caso) return;
+        // In the current implementation, we evaluate the first question
+        const isCorrect = state.caso.preguntas[0].respuestas[state.selectedAnswer].is_correct;
+        setState(prev => ({ ...prev, showFeedback: true, isCorrect }));
     };
 
     if (state.loading) return (
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '60vh' }}>
             <div className="v2-text-primary">Cargando caso clínico...</div>
-            <div className="v2-linear-progress" style={{ width: '200px', marginTop: '16px' }}>
+            <div className="v2-linear-progress" role="progressbar" aria-label="Cargando contenido" style={{ width: '200px', marginTop: '16px' }}>
                 <div className="v2-linear-progress-bar" style={{ width: '40%' }}></div>
             </div>
         </div>
@@ -68,11 +69,11 @@ const V2Examen = () => {
                 <span className="v2-label-large v2-text-primary">Sesión Activa</span>
                 <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                        <i className="material-icons" style={{ fontSize: '18px' }}>bolt</i>
+                        <i className="material-icons" style={{ fontSize: '18px' }} aria-hidden="true">bolt</i>
                         <span className="v2-label-large">+50 XP</span>
                     </div>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-                        <i className="material-icons" style={{ fontSize: '18px' }}>timer</i>
+                        <i className="material-icons" style={{ fontSize: '18px' }} aria-hidden="true">timer</i>
                         <span className="v2-label-large">14:22</span>
                     </div>
                 </div>
@@ -96,23 +97,32 @@ const V2Examen = () => {
                                     key={rIdx}
                                     onClick={() => !showFeedback && setState(prev => ({ ...prev, selectedAnswer: rIdx }))}
                                     className="v2-card-outlined"
+                                    aria-label={`${String.fromCharCode(65 + rIdx)}. ${resp.texto}${showFeedback ? (resp.is_correct ? ' - Correcta' : (selectedAnswer === rIdx ? ' - Incorrecta' : '')) : ''}`}
                                     style={{
                                         display: 'flex', alignItems: 'center', textAlign: 'left',
                                         cursor: showFeedback ? 'default' : 'pointer',
-                                        borderColor: selectedAnswer === rIdx ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-outline-variant)',
-                                        backgroundColor: selectedAnswer === rIdx ? 'var(--md-sys-color-primary-container)' : 'transparent',
-                                        opacity: showFeedback && selectedAnswer !== rIdx ? 0.6 : 1,
+                                        borderColor: showFeedback
+                                            ? (resp.is_correct ? 'var(--md-sys-color-primary)' : (selectedAnswer === rIdx ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-outline-variant)'))
+                                            : (selectedAnswer === rIdx ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-outline-variant)'),
+                                        backgroundColor: showFeedback
+                                            ? (resp.is_correct ? 'var(--md-sys-color-primary-container)' : (selectedAnswer === rIdx ? 'var(--md-sys-color-error-container)' : 'transparent'))
+                                            : (selectedAnswer === rIdx ? 'var(--md-sys-color-primary-container)' : 'transparent'),
+                                        opacity: showFeedback && !resp.is_correct && selectedAnswer !== rIdx ? 0.6 : 1,
                                         width: '100%', padding: '16px', transition: 'all 0.2s'
                                     }}
                                 >
                                     <span style={{
                                         width: '32px', height: '32px', borderRadius: '50%',
-                                        backgroundColor: selectedAnswer === rIdx ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-surface-variant)',
-                                        color: selectedAnswer === rIdx ? 'white' : 'inherit',
+                                        backgroundColor: showFeedback
+                                            ? (resp.is_correct ? 'var(--md-sys-color-primary)' : (selectedAnswer === rIdx ? 'var(--md-sys-color-error)' : 'var(--md-sys-color-surface-variant)'))
+                                            : (selectedAnswer === rIdx ? 'var(--md-sys-color-primary)' : 'var(--md-sys-color-surface-variant)'),
+                                        color: (selectedAnswer === rIdx || (showFeedback && resp.is_correct)) ? 'white' : 'inherit',
                                         display: 'flex', alignItems: 'center',
                                         justifyContent: 'center', marginRight: '16px', fontWeight: 'bold'
                                     }}>
-                                        {String.fromCharCode(65 + rIdx)}
+                                        {showFeedback && resp.is_correct ? <i className="material-icons" style={{fontSize: '20px'}} aria-hidden="true">check</i> :
+                                         showFeedback && selectedAnswer === rIdx && !resp.is_correct ? <i className="material-icons" style={{fontSize: '20px'}} aria-hidden="true">close</i> :
+                                         String.fromCharCode(65 + rIdx)}
                                     </span>
                                     <span className="v2-body-large">{resp.texto}</span>
                                 </button>
@@ -128,7 +138,7 @@ const V2Examen = () => {
                                     disabled={selectedAnswer === null}
                                 >
                                     Confirmar Respuesta
-                                    <i className="material-icons">check_circle</i>
+                                    <i className="material-icons" aria-hidden="true">check_circle</i>
                                 </button>
                             </div>
                         ) : (
@@ -138,7 +148,7 @@ const V2Examen = () => {
                                     color: isCorrect ? 'var(--md-sys-color-on-primary-container)' : 'var(--md-sys-color-on-error-container)',
                                     marginBottom: '24px', display: 'flex', alignItems: 'center', gap: '12px', padding: '20px'
                                 }}>
-                                    <i className="material-icons">{isCorrect ? 'check_circle' : 'cancel'}</i>
+                                    <i className="material-icons" aria-hidden="true">{isCorrect ? 'check_circle' : 'cancel'}</i>
                                     <div>
                                         <h4 className="v2-title-large" style={{ margin: 0 }}>{isCorrect ? '¡Excelente elección!' : 'Respuesta incorrecta'}</h4>
                                         <p className="v2-body-large" style={{ margin: 0, opacity: 0.8 }}>
@@ -149,7 +159,7 @@ const V2Examen = () => {
 
                                 <div className="v2-card-outlined" style={{ padding: '24px', backgroundColor: 'var(--md-sys-color-tertiary-container)', color: 'var(--md-sys-color-on-tertiary-container)', border: 'none' }}>
                                     <h4 className="v2-title-large" style={{ marginBottom: '12px', display: 'flex', alignItems: 'center', gap: '8px' }}>
-                                        <i className="material-icons">lightbulb</i>
+                                        <i className="material-icons" aria-hidden="true">lightbulb</i>
                                         Perla Médica
                                     </h4>
                                     <p className="v2-body-large" style={{ lineHeight: '1.6' }}>
@@ -164,7 +174,7 @@ const V2Examen = () => {
                                         onClick={() => history.push('/v2/simulacro/resumen')}
                                     >
                                         Siguiente Caso
-                                        <i className="material-icons">arrow_forward</i>
+                                        <i className="material-icons" aria-hidden="true">arrow_forward</i>
                                     </button>
                                 </div>
                             </div>
diff --git a/src/v2/pages/V2Login.jsx b/src/v2/pages/V2Login.jsx
index 6c7648e..026235f 100644
--- a/src/v2/pages/V2Login.jsx
+++ b/src/v2/pages/V2Login.jsx
@@ -8,6 +8,7 @@ import '../styles/v2-theme.css';
 const V2Login = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const history = useHistory();
 
@@ -45,7 +46,7 @@ const V2Login = () => {
             display: 'flex', alignItems: 'center', justifyContent: 'center',
             margin: '0 auto 16px'
           }}>
-            <i className="material-icons" style={{ fontSize: '40px' }}>stethoscope</i>
+            <i className="material-icons" style={{ fontSize: '40px' }} aria-hidden="true">stethoscope</i>
           </div>
           <h1 className="v2-headline-medium" style={{ color: 'var(--md-sys-color-primary)' }}>ENARM V2</h1>
           <p className="v2-body-large" style={{ opacity: 0.7 }}>Bienvenido de nuevo, Doctor</p>
@@ -53,8 +54,9 @@ const V2Login = () => {
 
         <form onSubmit={handleLogin} style={{ display: 'flex', flexDirection: 'column', gap: '20px', textAlign: 'left' }}>
           <div className="v2-input-outlined">
-            <label>Correo Electrónico</label>
+            <label htmlFor="email">Correo Electrónico</label>
             <input
+              id="email"
               type="email"
               placeholder="doctor@medical.com"
               value={email}
@@ -63,15 +65,39 @@ const V2Login = () => {
             />
           </div>
 
-          <div className="v2-input-outlined">
-            <label>Contraseña</label>
+          <div className="v2-input-outlined" style={{ position: 'relative' }}>
+            <label htmlFor="password">Contraseña</label>
             <input
-              type="password"
+              id="password"
+              type={showPassword ? "text" : "password"}
               placeholder="••••••••"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required
+              style={{ paddingRight: '48px' }}
             />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              aria-label={showPassword ? "Ocultar contraseña" : "Mostrar contraseña"}
+              title={showPassword ? "Ocultar contraseña" : "Mostrar contraseña"}
+              style={{
+                position: 'absolute',
+                right: '12px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: 'var(--md-sys-color-outline)',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '8px',
+                marginTop: '12px'
+              }}
+            >
+              <i className="material-icons">{showPassword ? 'visibility_off' : 'visibility'}</i>
+            </button>
           </div>
 
           <div style={{ textAlign: 'right' }}>
@@ -82,7 +108,7 @@ const V2Login = () => {
 
           <button type="submit" className="v2-btn-filled" style={{ justifyContent: 'center', height: '56px' }} disabled={loading}>
             {loading ? 'Iniciando sesión...' : 'Entrar'}
-            {!loading && <i className="material-icons">arrow_forward</i>}
+            {!loading && <i className="material-icons" aria-hidden="true">arrow_forward</i>}
           </button>
         </form>