🎨 Palette: [UX improvement] Accessibility and Visual Feedback Enhancement

.Jules/palette.md

@@ -0,0 +1,13 @@
+# Palette's Journal
+
+## 2025-05-15 - [Interactive Accessibility Patterns]
+**Learning:** Custom interactive elements like product selection divs in this luxury dark theme were missing standard accessibility markers, making them unreachable via keyboard.
+**Action:** Always ensure custom interactive divs have role="button", tabindex="0", and both click and keydown (Enter/Space) event handlers.
+
+## 2025-05-15 - [Dynamic Content Announcements]
+**Learning:** The AI consultation results were injected dynamically without notifying screen readers, causing a disconnect for assistive technology users.
+**Action:** Assign 'aria-live="polite"' to containers where dynamic content or search results are injected.
+
+## 2025-05-15 - [High-Contrast Focus Indicators]
+**Learning:** The dark anthracite background requires explicit, high-contrast focus indicators for accessibility compliance.
+**Action:** Implement a global ':focus-visible' style with 'outline: 2px solid var(--accent-gold); outline-offset: 4px;' to ensure keyboard navigation visibility.

index.html

@@ -80,7 +80,7 @@ <h2 style="text-align: center; margin-bottom: 4rem;">P.A.U. Divineo AI</h2>
                         </div>
                         <button type="submit" class="cta-button" style="margin-top: 1rem;">Preguntar a P.A.U.</button>
                     </form>
-                    <div id="jules-result" class="jules-result" style="display:none; margin-top: 4rem; padding: 2.5rem;">
+                    <div id="jules-result" class="jules-result" style="display:none; margin-top: 4rem; padding: 2.5rem;" aria-live="polite">
                         <h3 style="margin-top: 0; color: #C5A46D; margin-bottom: 1.5rem;">Análisis de P.A.U.:</h3>
                         <p id="recommendation-text" style="white-space: pre-wrap; line-height: 1.8; font-weight: 300;"></p>
                     </div>
@@ -104,11 +104,11 @@ <h2 style="margin-bottom: 1rem;">Divineo Studio</h2>
                     <div class="product-selector">
                         <h3>Catálogo Shopify</h3>
                         <div class="product-grid">
-                            <div class="product-item selected" onclick="selectProduct('BALMAIN_SS26_SLIM')" style="border-color: #C5A46D;">
+                            <div class="product-item selected" onclick="selectProduct('BALMAIN_SS26_SLIM')" style="border-color: #C5A46D;" role="button" tabindex="0" aria-label="Seleccionar Balmain Slim">
                                 <div class="product-placeholder">BALMAIN SLIM</div>
                                 <p style="font-size: 0.8rem; text-align: center; color: #C5A46D;">1.290 €</p>
                             </div>
-                            <div class="product-item" onclick="selectProduct('LEVIS_510_STRETCH')">
+                            <div class="product-item" onclick="selectProduct('LEVIS_510_STRETCH')" role="button" tabindex="0" aria-label="Seleccionar Levis 510">
                                 <div class="product-placeholder">LEVIS 510</div>
                                 <p style="font-size: 0.8rem; text-align: center; color: #C5A46D;">110 €</p>
                             </div>

js/main.js

@@ -84,6 +84,12 @@ class TryOnYouBunker {
                     e.preventDefault();
                     this.selectGarment(productId, item);
                 });
+                item.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.selectGarment(productId, item);
+                    }
+                });
                 item.removeAttribute('onclick');
             }
         });