🎨 Palette: [UX improvement] - Enhanced feedback and accessibility#28
🎨 Palette: [UX improvement] - Enhanced feedback and accessibility#28
Conversation
- Added .loader CSS class to provide visual feedback during consultation. - Improved accessibility in index.html with aria-live, aria-label, and dialog roles. - Ensured ARIA labels match the primary language of the associated elements. - Fixed modal accessibility with role="dialog" and aria-modal="true". 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 application's user experience and accessibility by addressing several key areas. It introduces visual feedback for ongoing processes, enhances screen reader compatibility for dynamic content, and refactors interactive elements and modals to be more accessible and semantically correct for assistive technologies. These changes aim to make the application more inclusive and user-friendly for all 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 several valuable accessibility and UX improvements, such as adding ARIA attributes and a loading spinner. My review focuses on further enhancing these accessibility features. I've identified a few areas for improvement:
index.html: There's an accessibility issue with a navigation link where the visible text andaria-labelare mismatched, violating a WCAG guideline. Additionally, the new modal dialog implementation is missing critical focus management, which is essential for keyboard and screen reader users.styles/main.css: The new loader animation should respect theprefers-reduced-motionuser preference to avoid issues for users sensitive to motion.
These suggestions aim to make the application more robustly accessible, building on the great work already done in this PR.
|
|
||
| <!-- Private Pass Modal --> | ||
| <div id="private-pass-modal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:2000; align-items:center; justify-content:center;"> | ||
| <div id="private-pass-modal" class="modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:2000; align-items:center; justify-content:center;" role="dialog" aria-modal="true" aria-labelledby="modal-title"> |
There was a problem hiding this comment.
While adding role="dialog" and aria-modal="true" is a great step towards making this modal accessible, a complete implementation requires JavaScript for focus management. Without it, the modal is not fully accessible for keyboard and screen reader users.
Specifically:
- When the modal opens, focus should be programmatically moved to an element inside it (e.g., the password input).
- While the modal is open, focus should be 'trapped' within it, so users cannot tab to elements in the background page.
- When the modal closes, focus should return to the element that originally opened it.
Since js/main.js is not part of this PR, I can't suggest the code, but this is a critical follow-up to ensure this feature is truly accessible.
| <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-label="Acceso para el personal">Staff Access</a></li> |
There was a problem hiding this comment.
For consistency and accessibility, the visible link text should be in Spanish, matching the rest of the navigation menu. Using an aria-label for translation creates a mismatch between the visible text ('Staff Access') and what screen readers announce ('Acceso para el personal').
This violates WCAG 2.5.3 Label in Name, which requires the accessible name to contain the visible text. The best solution is to change the visible text to Spanish, which also makes the aria-label redundant.
| <li><a href="javascript:void(0)" onclick="requestPrivatePass()" aria-label="Acceso para el personal">Staff Access</a></li> | |
| <li><a href="javascript:void(0)" onclick="requestPrivatePass()">Acceso para el personal</a></li> |
| .loader { | ||
| width: 16px; | ||
| height: 16px; | ||
| border: 2px solid var(--bg-dark); | ||
| border-bottom-color: var(--accent-gold); | ||
| border-radius: 50%; | ||
| display: inline-block; | ||
| box-sizing: border-box; | ||
| animation: rotation 1s linear infinite; | ||
| margin-right: 10px; | ||
| vertical-align: middle; | ||
| } |
There was a problem hiding this comment.
This is a nice loader animation. To further improve accessibility for users sensitive to motion, please consider adding a prefers-reduced-motion media query to disable or reduce the animation. For example:
@media (prefers-reduced-motion: reduce) {
.loader {
animation: none;
}
}
1 participant
💡 What
Implemented several micro-UX and accessibility improvements:
.loaderanimation instyles/main.css. This spinner is dynamically injected by the existing JavaScript during the P.A.U. consultation process, providing immediate feedback that the system is "executing."aria-live="polite"to the#jules-resultcontainer. This ensures that when P.A.U.'s analysis is updated, screen reader users are automatically notified of the new content.aria-labelto the "Staff Access" link and "Iniciar Escaneo Biométrico" button, ensuring these interactive elements have clear, localized descriptions.role="dialog",aria-modal="true", andaria-labelledby="modal-title".🎯 Why
The application had several accessibility gaps:
📸 Before/After
♿ Accessibility
aria-livefor dynamic content.role="dialog"for the access modal.aria-labelattributes to icon-only/custom buttons.PR created automatically by Jules for task 8761066912514883789 started by @LVT-ENG