Skip to content

🎨 Palette: Enhance navigation toggle accessibility and interaction#173

Merged
ruhdevops merged 1 commit intomainfrom
palette-a11y-navigation-toggles-4850187806746701682
May 10, 2026
Merged

🎨 Palette: Enhance navigation toggle accessibility and interaction#173
ruhdevops merged 1 commit intomainfrom
palette-a11y-navigation-toggles-4850187806746701682

Conversation

@ruhdevops
Copy link
Copy Markdown
Owner

This PR introduces several micro-UX improvements focused on accessibility and predictable keyboard navigation:

  • Accessible Toggles: Added aria-expanded and aria-controls to the Search, Watch Later, and Mobile Menu buttons. These attributes are now dynamically updated as the panels open and close.
  • Improved Escape Key Logic: The global 'Escape' handler was enhanced to ensure that if focus is inside the Search input, 'Escape' will not only blur the input but also close the search section and reset the toggle's ARIA state.
  • Better Interactive Targets: The click event for the "Watch Later" feature was moved from the small badge element to the entire #watchLaterBtn container, improving the hit target for all users.
  • Journaled Learnings: Added a new entry to .Jules/palette.md regarding predictable keyboard navigation for overlays.

Verification:

  • Ran pnpm test:run (100/100 tests passed).
  • Verified visually and functionally using a Playwright script that tested all toggle states and keyboard interactions.
  • Cleared unnecessary lockfile changes to ensure a clean submission.

PR created automatically by Jules for task 4850187806746701682 started by @ruhdevops

- Added aria-expanded and aria-controls to Search, Watch Later, and Mobile Menu toggles.
- Improved 'Escape' key behavior to predictably close active overlays and update ARIA states.
- Enhanced watchLaterBtn hit target by shifting the event listener from the badge to the button.
- Ensured consistent state synchronization between UI classes and ARIA attributes.
- Verified changes via Playwright and ensured all 100 tests pass.

Co-authored-by: ruhdevops <203426218+ruhdevops@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.

@vercel
Copy link
Copy Markdown

vercel Bot commented May 10, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
yt-studio Error Error May 10, 2026 3:35am
yt-studio-production Error Error May 10, 2026 3:35am

@bolt-new-by-stackblitz
Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@cloudflare-workers-and-pages
Copy link
Copy Markdown
Contributor

cloudflare-workers-and-pages Bot commented May 10, 2026

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
❌ Deployment failed
View logs
ytstudio 0896df5 May 10 2026, 03:35 AM

@cloudflare-workers-and-pages
Copy link
Copy Markdown
Contributor

cloudflare-workers-and-pages Bot commented May 10, 2026

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Updated (UTC)
❌ Deployment failed
View logs
ytstudio 0896df5 May 10 2026, 03:35 AM

@ruhdevops ruhdevops self-assigned this May 10, 2026
@ruhdevops ruhdevops marked this pull request as ready for review May 10, 2026 07:22
@ruhdevops ruhdevops merged commit 1ff0ade into main May 10, 2026
7 of 15 checks passed
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