🎨 Palette: Improve accessibility of Rust playground buttons

[lavkushry]

💡 What:
Added an aria-label to the "Run" overlay button for Rust code blocks indicating that the button opens in a new tab, and added explicitly matching :focus-visible styling in CSS.

🎯 Why:
The link-based floating button had brief text ("Run") that didn't explain the context (Rust Playground, new tab) for screen readers, and it entirely lacked keyboard focus visibility, making it difficult for keyboard users to interact with.

♿ Accessibility:

• Screen Readers: Now reads "Run this code in the Rust Playground (opens in a new tab)" rather than just "Run".
• Keyboard Navigation: Clear outline focus state added.

📸 Before/After:
(See PR frontend verification screenshots/videos for the clear focus states now available on the button)

---

PR created automatically by Jules for task 7856096359349428289 started by @lavkushry

[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.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ff21b2e9-56b6-4b1c-aaae-a6c3bfecab6e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette-ux-playground-button-accessibility-7856096359349428289

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[gemini-code-assist]

Code Review

This pull request improves the accessibility of the Rust Playground "Run" overlay buttons by adding an explicit aria-label attribute in JavaScript, documenting the learning in .jules/palette.md, and defining :focus-visible styles in CSS. Feedback was provided regarding the :focus-visible outline color, which has low contrast against the dark code block background, and a redundant border-radius property that can be removed.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

The playground button is positioned inside the code block (pre), which always has a dark background (#1a1b26) in both light and dark modes. Using var(--chapter-accent, var(--compiler)) as the outline color results in extremely low contrast (e.g., #023e8a on #1a1b26 has a contrast ratio of ~1.6:1), making the focus indicator virtually invisible to keyboard users. To ensure high visibility and meet WCAG accessibility standards, use a high-contrast color like #ffffff or a bright color like var(--perf, #ffbe0b) for the outline. Additionally, border-radius: 5px is already defined on .playground-btn (line 1572) and does not need to be repeated here.

.playground-btn:focus-visible {
  opacity: 1;
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}