Skip to content

🎨 Palette: [UX improvement] Enhance accessibility and visual feedback #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LVT-ENG wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: [UX improvement] Enhance accessibility and visual feedback #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added .jules/palette.md
View file
Open in desktop
Empty file.
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="Introduce tu credencial de acceso" style="width:100%; padding:1rem; background:#0d0e10; border:1px solid rgba(255,255,255,0.1); color:#F5EFE6; margin-bottom:2rem;">
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Para mejorar la accesibilidad y la consistencia, te sugiero los siguientes cambios:

  1. aria-label conciso: El valor de aria-label es una instrucción completa. Es mejor que sea una etiqueta concisa, como "Credencial de acceso", ya que el párrafo anterior ya da el contexto.
  2. Consistencia de idioma: El placeholder "Credential ID" está en inglés. Sería bueno traducirlo a "ID de Credencial" para que coincida con el resto de la interfaz.

Adicionalmente, considera mover los estilos en línea de este elemento a una clase CSS en styles/main.css para mejorar la mantenibilidad.

Suggested change
<input type="password" id="private-pass-input" placeholder="Credential ID" aria-label="Introduce tu credencial de acceso" 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="ID de Credencial" aria-label="Credencial de acceso" 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>
Expand Down
2 changes: 2 additions & 0 deletions js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,8 @@ class TryOnYouBunker {
requestPrivatePass() {
const modal = document.getElementById('private-pass-modal');
modal.style.display = 'flex';
const input = document.getElementById('private-pass-input');
if (input) input.focus();
Comment on lines +228 to +229
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist bot Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

¡Excelente mejora de accesibilidad al mover el foco al input!

Para completar el patrón de accesibilidad de un modal, es crucial devolver el foco al elemento que lo activó cuando el modal se cierra. De lo contrario, el foco se "pierde" en la página (a menudo vuelve al inicio del <body>), creando una mala experiencia para la navegación por teclado.

Para solucionarlo, puedes guardar el elemento activo antes de mostrar el modal y restaurar el foco al cerrarlo.

1. Añade una propiedad en el constructor:

constructor() {
    // ...
    this.previouslyFocusedElement = null;
    this.init();
}

2. Guarda el foco en requestPrivatePass:

requestPrivatePass() {
    this.previouslyFocusedElement = document.activeElement; // Guardar foco
    const modal = document.getElementById('private-pass-modal');
    modal.style.display = 'flex';
    const input = document.getElementById('private-pass-input');
    if (input) input.focus();
}

3. Restaura el foco en closePrivatePass:

closePrivatePass() {
    const modal = document.getElementById('private-pass-modal');
    modal.style.display = 'none';
    if (this.previouslyFocusedElement) {
        this.previouslyFocusedElement.focus(); // Restaurar foco
    }
}

Esto asegurará una experiencia de usuario fluida y accesible.

}

closePrivatePass() {
Expand Down
18 changes: 18 additions & 0 deletions styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,6 +376,24 @@ body {
.notification-success { border-left: 5px solid #4CAF50; }
.notification-error { border-left: 5px solid #f44336; }

.loader {
width: 16px;
height: 16px;
border: 2px solid rgba(20, 22, 25, 0.3);
border-bottom-color: var(--bg-dark);
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
margin-right: 10px;
vertical-align: middle;
}

@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 992px) {
.try-on-interface {
Expand Down