Skip to content

🎨 Palette: Semantic Navigation & Focus States - #44

Open
ISTEC-FOR340 wants to merge 1 commit into
mainfrom
palette-semantic-nav-3327561888174266170
Open

🎨 Palette: Semantic Navigation & Focus States#44
ISTEC-FOR340 wants to merge 1 commit into
mainfrom
palette-semantic-nav-3327561888174266170

Conversation

@ISTEC-FOR340

@ISTEC-FOR340 ISTEC-FOR340 commented Jun 22, 2026

Copy link
Copy Markdown
Owner

🎨 Palette: Semantic Navigation & Focus States

💡 What

This PR improves the accessibility and usability of the Interactive Sketches collection by replacing non-semantic, JavaScript-driven navigation with standard HTML anchors.

Key changes:

  • Semantic Links: Project cards on the landing page and "Back" buttons in projects now use <a> tags instead of div/button with onclick.
  • Keyboard Delight: Added :focus-visible styles to project cards that mirror the existing hover effects (lifting animation and glow), providing a consistent and pleasant experience for keyboard users.
  • Valid HTML: Refactored nested buttons to spans within the new link structure to ensure accessibility tree correctness.
  • Cleanup: Removed script.js and manual routing logic as it is now redundant.
  • Localization: Unified the lang attribute to "es" across all pages to better support the Spanish-speaking student demographic (ISTEC).

🎯 Why

Native navigation is more robust, supports standard browser behaviors (middle-click, right-click, keyboard focus), and provides a clearer structure for assistive technologies. Adding focus indicators ensures the interface is fully navigable and visually responsive to keyboard interactions.

♿ Accessibility

  • Improved screen reader semantics for navigation links.
  • Enhanced visual focus indicators for keyboard navigation.
  • Corrected language metadata for the target audience.
  • Ensured valid HTML by removing nested interactive elements.

PR created automatically by Jules for task 3327561888174266170 started by @ISTEC-FOR340

@google-labs-jules @ISTEC-FOR340
🎨 Palette: Improve accessibility with semantic navigation and focus s…
fbced3b 
…tates

- Replace JS-based card navigation with semantic <a> tags
- Convert nested buttons to <span> elements for valid HTML
- Add :focus-visible styles to cards for delightful keyboard navigation
- Refactor project "Back" buttons to semantic <a> tags
- Standardize lang="es" for consistency with target audience (ISTEC)
- Clean up redundant script.js and manual routing logic

Co-authored-by: ISTEC-FOR340 <269002038+ISTEC-FOR340@users.noreply.github.com>
@google-labs-jules

google-labs-jules Bot commented Jun 22, 2026

Copy link
Copy Markdown
Contributor

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ISTEC-FOR340