🎨 Palette: Semantic Navigation & Accessibility Improvements - #58
🎨 Palette: Semantic Navigation & Accessibility Improvements#58ISTEC-FOR340 wants to merge 1 commit into
Conversation
- Refactor landing page cards from div+JS to semantic <a> tags - Convert project back buttons to <a> tags with aria-label - Add :focus-visible states for better keyboard navigation - Update HTML lang="en" and remove redundant script.js - Ensure focus rings are not clipped with overflow: visible Co-authored-by: ISTEC-FOR340 <269002038+ISTEC-FOR340@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. |
1 participant
💡 What: The UX enhancement added
Refactored the core navigation of the application to use semantic HTML
<a>tags instead ofdivelements with JavaScriptonclicklisteners. This includes the project cards on the landing page and the "Back" buttons within the p5.js sketches.🎯 Why: The user problem it solves
Non-semantic navigation breaks standard browser features (like middle-clicking to open in a new tab) and is completely invisible to screen readers as interactive links. Additionally, the lack of visible focus states made the site difficult to navigate for keyboard users.
♿ Accessibility: Any a11y improvements made
:focus-visiblestates that mirror the hover effects, ensuring keyboard users have clear visual feedback.aria-label="Back to home"to back buttons to provide clear context for assistive technologies.lang="es"tolang="en"to match the primary language of the content, ensuring correct pronunciation by screen readers.📸 Before/After:
Verification Screenshot shows the new semantic link structure and visible focus indicator on the "Circle Matrix" card.
PR created automatically by Jules for task 123987103147693066 started by @ISTEC-FOR340