Skip to content

🎨 Palette: Add skip to main content link - #110

Open
ELO2026X wants to merge 1 commit into
mainfrom
palette-skip-link-2242009912088168453
Open

ELO2026X wants to merge 1 commit into
mainfrom
palette-skip-link-2242009912088168453

Conversation

@ELO2026X

Copy link
Copy Markdown
Owner

💡 What
Added a "Skip to main content" link to the root App component, allowing users to bypass the sidebar navigation. Also updated ContentView to act as the target by using a semantic <main> tag with id="main-content" and tabIndex={-1}.

🎯 Why
For users who rely on keyboard navigation or screen readers, having to tab through a persistent sidebar every time they want to interact with the main content area is extremely tedious. A skip link is a standard accessibility best practice to solve this problem.

📸 Before/After
Before: Keyboard users must tab through every single effect button in the sidebar before reaching the "Upload Custom Model" button or interacting with the 3D view.
After: The first tab press immediately focuses the "Skip to main content" link. Pressing Enter immediately shifts focus to the main content area, allowing the user to bypass the entire sidebar.

♿ Accessibility

  • Provides a direct skip link to bypass repetitive navigation.
  • Uses semantic <main> tag for the primary content area.
  • Link is visually hidden using .sr-only but becomes visible when receiving focus via .focus-visible:not-sr-only to ensure sighted keyboard users can see it.
  • Prevents focus outline ring from appearing around the entire main container when skipped using focus:outline-none.

PR created automatically by Jules for task 2242009912088168453 started by @ELO2026X

Adds a visually hidden "Skip to main content" link at the top of the application that becomes visible when focused. This allows keyboard and screen reader users to bypass the Sidebar navigation and jump directly to the 3D viewer content area. Updates the main content container to use semantic `<main>` tags and accept programmatic focus without showing an outline.

Co-authored-by: ELO2026X <153048533+ELO2026X@users.noreply.github.com>
@google-labs-jules

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant