From 9fd30acb9ec91ea14e1a9f70f90622cc7a4b076c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 27 Mar 2026 05:46:43 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Improve=20Staff=20Acc?=
 =?UTF-8?q?ess=20Modal=20UX=20&=20Accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add aria-haspopup="dialog" and role="button" to Staff Access link
- Add aria-label to private-pass-input
- Implement auto-focus and Enter-key submission in js/main.js

Co-authored-by: LVT-ENG <214667862+LVT-ENG@users.noreply.github.com>
---
 .jules/palette.md |  3 +++
 index.html        |  4 ++--
 js/main.js        | 12 ++++++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 .jules/palette.md

diff --git a/.jules/palette.md b/.jules/palette.md
new file mode 100644
index 0000000..62b9e30
--- /dev/null
+++ b/.jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-15 - Staff Access Accessibility & UX
+**Learning:** Adding `aria-haspopup="dialog"` and `role="button"` to triggers for modal dialogs is essential for screen readers to properly announce the interaction. Focus management (auto-focusing the first input) and keyboard support (Enter key) are critical for power users and those with motor impairments.
+**Action:** Always ensure modal triggers have appropriate ARIA roles and that modals implement focus management and keyboard listeners for common actions.
diff --git a/index.html b/index.html
index 1ec1ae4..623389e 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@ <h1>TRYONYOU</h1>
                 <li><a href="#features">Experiencia</a></li>
                 <li><a href="#try-on">Búnker</a></li>
                 <li><a href="#consultation">P.A.U.</a></li>
-                <li><a href="javascript:void(0)" onclick="requestPrivatePass()">Staff Access</a></li>
+                <li><a href="javascript:void(0)" onclick="requestPrivatePass()" aria-haspopup="dialog" role="button">Staff Access</a></li>
             </ul>
         </nav>
     </header>
@@ -123,7 +123,7 @@ <h3>Catálogo Shopify</h3>
             <div class="modal-content" style="background:#141619; border:1px solid #C5A46D; padding:3rem; max-width:500px; text-align:center;">
                 <h3 style="color:#C5A46D; margin-bottom:1.5rem;">PASE PRIVADO SOLICITADO</h3>
                 <p style="color:#F5EFE6; opacity:0.7; margin-bottom:2rem;">Contenido restringido para Curadores del Búnker. Por favor, introduce tu credencial de acceso.</p>
-                <input type="password" id="private-pass-input" placeholder="Credential ID" style="width:100%; padding:1rem; background:#0d0e10; border:1px solid rgba(255,255,255,0.1); color:#F5EFE6; margin-bottom:2rem;">
+                <input type="password" id="private-pass-input" placeholder="Credential ID" aria-label="Staff Credential ID" style="width:100%; padding:1rem; background:#0d0e10; border:1px solid rgba(255,255,255,0.1); color:#F5EFE6; margin-bottom:2rem;">
                 <div style="display:flex; gap:1rem; justify-content:center;">
                     <button class="cta-button" onclick="verifyPrivatePass()" style="padding:10px 20px; font-size:0.8rem;">ACCEDER</button>
                     <button class="cta-button" onclick="closePrivatePass()" style="padding:10px 20px; font-size:0.8rem; background:transparent; border:1px solid #C5A46D; color:#C5A46D;">CERRAR</button>
diff --git a/js/main.js b/js/main.js
index 56a1cb6..5ef8a41 100644
--- a/js/main.js
+++ b/js/main.js
@@ -230,7 +230,19 @@ class TryOnYouBunker {
 
     requestPrivatePass() {
         const modal = document.getElementById('private-pass-modal');
+        const input = document.getElementById('private-pass-input');
         modal.style.display = 'flex';
+        input.focus();
+
+        if (!this._passListener) {
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    this.verifyPrivatePass();
+                }
+            });
+            this._passListener = true;
+        }
     }
 
     closePrivatePass() {