🎨 Palette: [UX improvement] Improve playground button a11y

[lavkushry]

💡 What: Added a visible focus state for keyboard navigation and an aria-label for screen readers to the injected Rust playground "Run" buttons on code blocks.
🎯 Why: Previously, when navigating the handbook with a keyboard, it was hard to tell when focus was on the "Run" button over a code block. Also, the label "Run" was not descriptive enough for screen reader users when taking them to an external site.
📸 Before/After:
(See Playwright frontend verification screenshot for the new :focus-visible state)
♿ Accessibility: Improved keyboard navigation focus visibility (:focus-visible outline). Improved screen reader experience by adding contextual aria-label attribute.

---

PR created automatically by Jules for task 7084237943914985350 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: 2d09879b-d72c-489f-a842-33f743e6ab1a

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/improve-playground-button-a11y-7084237943914985350

---

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 injected Rust Playground buttons by adding custom focus-visible styles and descriptive ARIA labels. The review feedback highlights two important improvements: increasing the CSS selector specificity for the focus-visible styles to prevent them from being overridden by more general rules, and appending a notice to the ARIA label to inform screen reader users that the link opens in a new tab.

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 selector .playground-btn:focus-visible has a specificity of (0, 2, 0). However, there is a more general selector #mdbook-content main a:focus-visible on line 146 with a higher specificity of (1, 1, 2) due to the ID selector #mdbook-content.

Because of this, the custom outline styles and offset you defined here will be overridden by the default focus outline styles. To ensure your custom focus outline is applied, you should increase the specificity of this selector.

Suggested change

	.playground-btn:focus-visible {
	outline: 2px solid var(--ownership, #E63946);
	outline-offset: 2px;
	opacity: 1;
	}
	#mdbook-content main .playground-btn:focus-visible {
	outline: 2px solid var(--ownership, #E63946);
	outline-offset: 2px;
	opacity: 1;
	}

[gemini-code-assist]

Since the playground link opens in a new tab (target = '_blank'), it is an accessibility best practice to inform screen reader users about this behavior. Consider appending (opens in a new tab) to the aria-label.

Suggested change

	btn.setAttribute('aria-label', 'Run code in Rust Playground');
	btn.setAttribute('aria-label', 'Run code in Rust Playground (opens in a new tab)');