fix(code-block): move copy action into toolbar and preserve keyboard accessibility by sfc-gh-bnisco · Pull Request #14024 · streamlit/streamlit

sfc-gh-bnisco · 2026-02-19T18:05:36Z

Describe your changes

Refactoring the copy button implementation to use the shared Toolbar component
- This fixes the visual issue with the copy button on long strings of code not being visible
Adding proper tabindex to code blocks to make them focusable
Ensuring the copy button is accessible via keyboard navigation
Maintaining the same hover behavior while adding keyboard focus support
Added a new test to verify keyboard accessibility of the copy action

Screenshot or video (only for visual changes)

Please see the updated e2e snapshots.

GitHub Issue Link (if applicable)

Fixes #12958

Testing Plan

Unit Tests: Updated existing tests to verify the copy button functionality using proper accessibility queries
E2E Tests: Added a new test case test_copy_action_keyboard_accessibility to verify keyboard navigation to code blocks and copy buttons
Manual Testing: Verify that the copy button appears on hover for code blocks and functions correctly with both mouse and keyboard

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

Co-authored-by: Raymond [email protected]
Co-authored-by: Daniel Derefaka [email protected]
Co-authored-by: Tyson Cung [email protected]
Co-authored-by: Manas Vardhan [email protected]
Co-authored-by: Nilesh Hadalgi [email protected]

snyk-io · 2026-02-19T18:05:48Z

✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

github-actions · 2026-02-19T18:05:50Z

✅ PR preview is ready!

Name	Link
📦 Wheel file	https://core-previews.s3-us-west-2.amazonaws.com/pr-14024/streamlit-1.54.0-py3-none-any.whl
📦 `@streamlit/component-v2-lib`	Download from artifacts
🕹️ Preview app	pr-14024.streamlit.app (☁️ Deploy here if not accessible)

sfc-gh-bnisco · 2026-02-19T18:05:52Z

fix(code-block): move copy action into toolbar and preserve keyboard accessibility #14024 👈 (View in Graphite)
develop

This stack of pull requests is managed by Graphite. Learn more about stacking.

Copilot

Pull request overview

Refactors code-block copy UI to use a shared toolbar action (via ToolbarAction + useCopyToClipboard) instead of a bespoke overlay button, and updates unit/E2E tests accordingly.

Changes:

Added CodeBlockCopyToolbar and replaced existing code-block copy button usage in code block renderers.
Updated CodeBlock styling to show the copy action via a toolbar wrapper on hover/focus-within.
Updated unit tests to use accessible role/name queries and refreshed Playwright snapshot baselines.

Reviewed changes

Copilot reviewed 7 out of 46 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.test.tsx	Updates markdown code-copy test to query the copy control by accessible role/name.
frontend/lib/src/components/elements/CodeBlock/styled-components.ts	Replaces copy-button overlay styling with toolbar wrapper styling and hover/focus-within behavior.
frontend/lib/src/components/elements/CodeBlock/StreamlitSyntaxHighlighter.tsx	Switches syntax highlighter code blocks to render `CodeBlockCopyToolbar` for non-empty content.
frontend/lib/src/components/elements/CodeBlock/StreamlitSyntaxHighlighter.test.tsx	Adds coverage for presence/absence of the copy toolbar action based on code content.
frontend/lib/src/components/elements/CodeBlock/StreamlitErrorCodeBlock.tsx	Switches error code blocks to render `CodeBlockCopyToolbar` when copy is applicable.
frontend/lib/src/components/elements/CodeBlock/StreamlitErrorCodeBlock.test.tsx	Updates copy-button assertions to use accessible role/name queries.
frontend/lib/src/components/elements/CodeBlock/CodeBlockCopyToolbar.tsx	New component that renders a `ToolbarAction` copy control backed by `useCopyToClipboard`.
e2e_playwright/snapshots/linux/st_container_test/st_container-content_width[webkit].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_container_test/st_container-content_width[firefox].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_container_test/st_container-content_width[chromium].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-long-wrap[chromium].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-long-single-word-string-wrap[webkit].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-long-single-word-string-wrap[chromium].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-long-single-word-string-no-wrap[firefox].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-long-single-word-string-no-wrap[chromium].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-long-numbers-wrap[chromium].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-hover_copy[light_theme-webkit].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-hover_copy[light_theme-firefox].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-hover_copy[light_theme-chromium].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-hover_copy[dark_theme-webkit].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-hover_copy[dark_theme-firefox].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-hover_copy[dark_theme-chromium].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-height_container[chromium].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-form_container[chromium].png	Updated snapshot baseline after UI changes.
e2e_playwright/snapshots/linux/st_code_test/st_code-columns[chromium].png	Updated snapshot baseline after UI changes.

frontend/lib/src/components/elements/CodeBlock/styled-components.ts

Copilot

Pull request overview

Copilot reviewed 8 out of 47 changed files in this pull request and generated no new comments.

Replace the absolute copy overlay in code and error code blocks with a shared toolbar action so long unwrapped lines no longer cover the copy control. Preserve copy feedback states and add tests for toolbar copy visibility with empty-content guardrails.

sfc-gh-bnisco added the change:bugfix PR contains bug fix implementation label Feb 19, 2026 — with Graphite App

sfc-gh-bnisco added feature:st.code Related to the `st.code` element impact:users PR changes affect end users security-assessment-completed labels Feb 19, 2026 — with Graphite App

sfc-gh-bnisco force-pushed the 02-19-fix_code-block_move_copy_action_into_toolbar branch from 121950a to 2c9e988 Compare February 19, 2026 18:24

sfc-gh-bnisco requested a review from Copilot February 19, 2026 18:37

Copilot started reviewing on behalf of sfc-gh-bnisco February 19, 2026 18:37 View session

Copilot AI reviewed Feb 19, 2026

View reviewed changes

frontend/lib/src/components/elements/CodeBlock/styled-components.ts Outdated Show resolved Hide resolved

sfc-gh-bnisco changed the title ~~fix(code-block): move copy action into toolbar~~ fix(code-block): move copy action into toolbar and preserve keyboard accessibility Feb 19, 2026

sfc-gh-bnisco force-pushed the 02-19-fix_code-block_move_copy_action_into_toolbar branch from 2c9e988 to de55d66 Compare February 19, 2026 19:15

sfc-gh-bnisco requested a review from Copilot February 19, 2026 19:23

Copilot started reviewing on behalf of sfc-gh-bnisco February 19, 2026 19:24 View session

Copilot AI reviewed Feb 19, 2026

View reviewed changes

sfc-gh-bnisco force-pushed the 02-19-fix_code-block_move_copy_action_into_toolbar branch from de55d66 to f6c8618 Compare February 19, 2026 19:34

sfc-gh-bnisco marked this pull request as ready for review February 19, 2026 21:08

sfc-gh-nbellante approved these changes Feb 20, 2026

View reviewed changes

sfc-gh-bnisco merged commit 63396a3 into develop Feb 20, 2026
44 of 45 checks passed

sfc-gh-bnisco deleted the 02-19-fix_code-block_move_copy_action_into_toolbar branch February 20, 2026 17:17

This was referenced Feb 20, 2026

Prevent code text from overlapping copy button in st.code #13860

Closed

fix: prevent copy button from being obscured by long code lines in st.code #14017

Closed

fix: prevent code text from overlapping copy button in st.code #14019

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(code-block): move copy action into toolbar and preserve keyboard accessibility#14024

fix(code-block): move copy action into toolbar and preserve keyboard accessibility#14024
sfc-gh-bnisco merged 1 commit intodevelopfrom
02-19-fix_code-block_move_copy_action_into_toolbar

sfc-gh-bnisco commented Feb 19, 2026 •

edited

Loading

Uh oh!

snyk-io bot commented Feb 19, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 19, 2026 •

edited

Loading

Uh oh!

sfc-gh-bnisco commented Feb 19, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

sfc-gh-bnisco commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

Screenshot or video (only for visual changes)

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

snyk-io bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Snyk checks have passed. No issues have been found so far.

Uh oh!

github-actions bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

sfc-gh-bnisco commented Feb 19, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sfc-gh-bnisco commented Feb 19, 2026 •

edited

Loading

snyk-io bot commented Feb 19, 2026 •

edited

Loading

github-actions bot commented Feb 19, 2026 •

edited

Loading