🎨 Palette: Micro-UX and Accessibility Enhancements

[ruhdevops]

🎨 Palette: Micro-UX and Accessibility Enhancements

This PR introduces several micro-UX improvements focused on accessibility, discoverability, and interaction delight.

💡 What:

• Accessibility: Added missing aria-label and title attributes to icon-only buttons in index.html (Studio view toggles, back button, modal close, etc.).
• Touch Targets: Updated the Watch Later header button in js/app.js to ensure the entire button is the click target, improving usability on mobile and desktop.
• Keyboard Shortcuts: Added a new 'T' shortcut to toggle themes globally (when not in an input), providing a more efficient way for users to switch modes.
• Visual Feedback: Included toast notifications when switching themes via keyboard and added tooltips to dynamically rendered video card buttons.

🎯 Why:

• Users with screen readers or those who rely on tooltips were missing context for many icon-only actions.
• Small touch targets on the Watch Later button led to missed clicks.
• Keyboard shortcuts add a layer of "delight" and efficiency for power users.

♿ Accessibility:

• WCAG-aligned improvements for interactive elements.
• ARIA labels added to previously anonymous buttons.
• High-contrast focus states and native tooltips for all primary actions.

✅ Verification:

• Ran pnpm build (Success).
• Ran pnpm test:run (100/100 Tests Passed).
• Verified visually and functionally via Playwright script (/home/jules/verification/verify_palette.py).

---

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

[google-labs-jules]

👋 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]

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

Project	Deployment	Actions	Updated (UTC)
yt-studio	Error		May 11, 2026 7:38am
yt-studio-production	Error		May 11, 2026 7:38am

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[cloudflare-workers-and-pages]

Deploying with    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	f364189	May 11 2026, 07:38 AM

[cloudflare-workers-and-pages]

Deploying with    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	f364189	May 11 2026, 07:38 AM