Skip to content

🎨 Palette: [UX improvement] Enhancing accessibility and keyboard navigation #20

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] Enhancing accessibility and keyboard navigation #20

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
11 changes: 11 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
## 2024-03-21 - [Accessibility for Custom Components]
**Learning:** Custom interactive elements (e.g., product selection divs) must include role="button", tabindex="0", descriptive aria-label, and support for 'Enter' and 'Space' keydown events for full keyboard operability.
**Action:** Always check for non-semantic buttons and apply these attributes and listeners to ensure accessibility.

## 2024-03-21 - [Dynamic Content Announcement]
**Learning:** Assign 'aria-live="polite"' to containers where dynamic content (like AI results) is injected to notify screen readers of updates.
**Action:** Implement aria-live on all async feedback containers.

## 2024-03-21 - [Focus Visibility]
**Learning:** Implement a global ':focus-visible' style with a clear outline to ensure keyboard navigation visibility while maintaining aesthetics for mouse users.
**Action:** Ensure a gold outline with sufficient offset is applied globally to :focus-visible.
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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-Fit Jeans - 1.290 €">
<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 Skinny - 110 €">
<div class="product-placeholder">LEVIS 510</div>
<p style="font-size: 0.8rem; text-align: center; color: #C5A46D;">110 €</p>
</div>
Comment on lines +107 to 114
Copy link
Copy Markdown
Contributor

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

Choose a reason for hiding this comment

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

medium

For better separation of concerns and more robust code, it's recommended to use data-* attributes to store data, rather than embedding it within an onclick attribute. This makes your HTML cleaner and your JavaScript less fragile. This change should be made in conjunction with the suggested change in js/main.js.

Suggested change
<div class="product-item selected" onclick="selectProduct('BALMAIN_SS26_SLIM')" style="border-color: #C5A46D;" role="button" tabindex="0" aria-label="Seleccionar Balmain Slim-Fit Jeans - 1.290 €">
<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 Skinny - 110 €">
<div class="product-placeholder">LEVIS 510</div>
<p style="font-size: 0.8rem; text-align: center; color: #C5A46D;">110 €</p>
</div>
<div class="product-item selected" data-product-id="BALMAIN_SS26_SLIM" style="border-color: #C5A46D;" role="button" tabindex="0" aria-label="Seleccionar Balmain Slim-Fit Jeans - 1.290 €">
<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" data-product-id="LEVIS_510_STRETCH" role="button" tabindex="0" aria-label="Seleccionar Levis 510 Skinny - 110 €">
<div class="product-placeholder">LEVIS 510</div>
<p style="font-size: 0.8rem; text-align: center; color: #C5A46D;">110 €</p>
</div>

Expand Down
8 changes: 7 additions & 1 deletion js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,15 @@ class TryOnYouBunker {
document.querySelectorAll('.product-item').forEach(item => {
const productId = item.getAttribute('onclick')?.match(/'([^']+)'/)?.[1];
if (productId) {
item.addEventListener('click', (e) => {
const selectFn = (e) => {
e.preventDefault();
this.selectGarment(productId, item);
};
item.addEventListener('click', selectFn);
item.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
selectFn(e);
}
});
item.removeAttribute('onclick');
}
Comment on lines 81 to 94
Copy link
Copy Markdown
Contributor

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

Choose a reason for hiding this comment

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

medium

To accompany the change to using data-product-id in index.html, this logic should be updated to read from the dataset property. This is a more robust and standard way to access data attributes and avoids parsing strings from the onclick attribute. This also allows you to remove the call to removeAttribute('onclick').

            const productId = item.dataset.productId;
            if (productId) {
                const selectFn = (e) => {
                    e.preventDefault();
                    this.selectGarment(productId, item);
                };
                item.addEventListener('click', selectFn);
                item.addEventListener('keydown', (e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                        selectFn(e);
                    }
                });
            }

Expand Down
Loading