🎨 Palette: Add skip to main content link for keyboard accessibility - #106
🎨 Palette: Add skip to main content link for keyboard accessibility#106ELO2026X wants to merge 1 commit into
Conversation
- Added a visually hidden "Skip to main content" link to the root App component that becomes visible when receiving keyboard focus.
- Modified the ContentView container to act as the main semantic `<main>` tag with `id="main-content"`.
- Added `tabIndex={-1}` and `focus:outline-none` to the main container to allow programmatic focus without displaying an outline.
Co-authored-by: ELO2026X <153048533+ELO2026X@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
Added a "Skip to main content" link to the root of the application, targeting a new semantic
<main>container in the content view.🎯 Why
This is a critical accessibility feature. Keyboard users (and screen reader users) shouldn't have to manually tab through the entire sidebar menu (the "Effects Explorer" list) every time they load the page just to reach the 3D model viewer and effect details.
📸 Before/After
Tabon initial page load would focus the first item in the sidebar list.Tabpress reveals a "Skip to main content" link at the top left. PressingEnterbypasses the sidebar and moves programmatic focus directly to the<main>content area.♿ Accessibility
sr-onlyandfocus-visible:not-sr-onlyto ensure the link is completely invisible to sighted mouse users but becomes a prominent, styled button when accessed via keyboard navigation.ContentViewwrapper from a generic<div>to a semantic<main>tag, improving document structure for assistive technologies.PR created automatically by Jules for task 1372704056460344025 started by @ELO2026X