🎨 Palette: [UX improvement] Enhancing accessibility and keyboard navigation#20
🎨 Palette: [UX improvement] Enhancing accessibility and keyboard navigation#20
Conversation
…gation 💡 What: - Added ARIA roles, tabindex, and descriptive labels to product items. - Implemented keyboard event listeners (Enter/Space) for product selection. - Added aria-live="polite" to the AI consultation result container. - Introduced a global :focus-visible style for better keyboard navigation visibility. 🎯 Why: The product selection elements were non-semantic divs that were inaccessible to screen readers and keyboard users. The AI results were also not announced when they appeared. 📸 Before/After: Check /home/jules/verification/focus_indicator.png for the new focus state. ♿ Accessibility: - Full keyboard support for product selection. - Screen reader announcements for dynamic AI feedback. - Clear visual focus indicators. Co-authored-by: LVT-ENG <214667862+LVT-ENG@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly improves the user experience of the TryOnYou interface by focusing on accessibility and keyboard navigation. The changes ensure that interactive elements are properly announced to screen readers, dynamic content updates are communicated effectively, and keyboard users have clear visual feedback for focused elements. These enhancements make the application more inclusive and usable for a wider range of users. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces significant accessibility and keyboard navigation enhancements. The addition of ARIA roles, aria-live, and keyboard event handlers for product selection greatly improves the user experience for people using assistive technologies. The new global :focus-visible style is also a great touch for keyboard users. My review includes a suggestion to refactor how product IDs are handled, moving from parsing onclick attributes to using data-* attributes for better code maintainability and robustness.
| <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> |
There was a problem hiding this comment.
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.
| <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> |
| 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'); | ||
| } |
There was a problem hiding this comment.
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);
}
});
}1 participant
This PR adds accessibility and keyboard navigation improvements to the TryOnYou interface. Key changes include adding ARIA roles and labels to product items, implementing keyboard event handlers for selection, and adding aria-live for AI results. A global focus-visible style has also been added to improve visibility for keyboard users.
PR created automatically by Jules for task 5231595872580166960 started by @LVT-ENG