From 0cfe7f8678e0d5da875e108ce58798cf8641e6c3 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 25 Mar 2026 05:53:10 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?= =?UTF-8?q?Enhance=20Keyboard=20Accessibility=20and=20ARIA=20Support?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Added focus-visible styles for all interactive elements. - Improved accessibility for product selector (tabindex, role, keyboard listeners). - Added ARIA labels to key interactive elements. - Refactored product selection to use data attributes instead of inline onclick. Co-authored-by: LVT-ENG <214667862+LVT-ENG@users.noreply.github.com> --- .jules/palette.md | 3 +++ index.html | 6 +++--- js/main.js | 11 +++++++++-- styles/main.css | 20 ++++++++++++++++++++ 4 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 .jules/palette.md diff --git a/.jules/palette.md b/.jules/palette.md new file mode 100644 index 0000000..b7389cb --- /dev/null +++ b/.jules/palette.md @@ -0,0 +1,3 @@ +## 2025-05-15 - Accessible Custom Interactive Elements +**Learning:** For custom interactive elements (e.g., `div` as a product item), adding `role="button"` and `tabindex="0"` is only half the battle. To ensure full keyboard operability, explicit listeners for both 'Enter' and 'Space' must be implemented in JavaScript to mirror native button behavior. +**Action:** Always pair `tabindex="0"` on non-interactive elements with a `keydown` handler that triggers the primary action on 'Enter' and 'Space'. diff --git a/index.html b/index.html index a488a43..3a82ba8 100644 --- a/index.html +++ b/index.html @@ -104,11 +104,11 @@

Divineo Studio

Catálogo Shopify

-
+
BALMAIN SLIM

1.290 €

-
+
LEVIS 510

110 €

@@ -123,7 +123,7 @@

Catálogo Shopify

PASE PRIVADO SOLICITADO

Contenido restringido para Curadores del Búnker. Por favor, introduce tu credencial de acceso.

- +
diff --git a/js/main.js b/js/main.js index dcf1947..dc6db78 100644 --- a/js/main.js +++ b/js/main.js @@ -78,13 +78,20 @@ class TryOnYouBunker { // Product Selection document.querySelectorAll('.product-item').forEach(item => { - const productId = item.getAttribute('onclick')?.match(/'([^']+)'/)?.[1]; + const productId = item.dataset.productId; if (productId) { item.addEventListener('click', (e) => { e.preventDefault(); this.selectGarment(productId, item); }); - item.removeAttribute('onclick'); + + // Keyboard accessibility for product selection + item.addEventListener('keydown', (e) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + item.click(); + } + }); } }); } diff --git a/styles/main.css b/styles/main.css index e855bcd..8a4d729 100644 --- a/styles/main.css +++ b/styles/main.css @@ -82,6 +82,11 @@ body { color: var(--accent-gold); } +.nav-menu a:focus-visible { + outline: 2px solid var(--accent-gold); + outline-offset: 4px; +} + /* Hero Section */ .hero { height: 100vh; @@ -131,6 +136,11 @@ body { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } +.cta-button:focus-visible { + outline: 2px solid var(--accent-gold); + outline-offset: 4px; +} + /* Features Section */ .features { padding: 120px 0; @@ -247,6 +257,11 @@ body { color: var(--bg-dark); } +.camera-btn:focus-visible { + outline: 2px solid var(--accent-gold); + outline-offset: 4px; +} + .product-selector h3 { margin-bottom: 2rem; color: var(--accent-gold); @@ -273,6 +288,11 @@ body { border-color: var(--accent-gold); } +.product-item:focus-visible { + outline: 2px solid var(--accent-gold); + outline-offset: 4px; +} + .product-placeholder { height: 180px; display: flex;