🎨 Palette: Semantic navigation and high-contrast focus states - #47
🎨 Palette: Semantic navigation and high-contrast focus states#47ISTEC-FOR340 wants to merge 1 commit into
Conversation
- Refactored landing page cards and project back-buttons to use semantic `<a>` tags instead of `onclick` handlers. - Enhanced accessibility by adding high-contrast `:focus-visible` states to interactive cards and buttons. - Cleaned up redundant navigation logic in `script.js` (deleted) and removed its inclusion in `index.html`. - Improved internationalization consistency by adding/updating `lang="es"` in all HTML files. - Ensured valid HTML by converting nested interactive elements to descriptive spans. 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
This PR refactors the navigation system from a JavaScript-based approach to semantic HTML links and adds high-contrast focus indicators for keyboard users.
🎯 Why
Using semantic
<a>tags provides native browser benefits like better SEO, the ability to open links in new tabs, and improved screen reader support. Adding explicit focus states ensures that the interactive elements are clearly identifiable for keyboard-only users, fulfilling a core accessibility requirement.♿ Accessibility
div+onclickwith<a>tags.:focus-visiblestyles that mirror hover states (including transforms and shadows) plus a high-contrast focus ring.lang="es"is set on all pages to match the project's target demographic.🛠 Technical Changes
index.htmlto use<a>for cards.script.jsas the routing logic is now handled by the browser.style.csswith focus-visible rules and link resets.proyecto1/andproyecto2/HTML and CSS for consistent back-button behavior.PR created automatically by Jules for task 8471672719410227009 started by @ISTEC-FOR340