[refactor] Centralize focus ring styling #13340

sfc-gh-bnisco · 2025-12-12T19:03:50Z

Describe your changes

This just reduces copy/paste by centralizing our styling for focus ring.
No functional/visual changes in this PR.

GitHub Issue Link (if applicable)

Refactor for Make title/header anchors keyboard accessible #13329 and Make help tooltips keyboard accessible #13330

Testing Plan

Added unit tests.

Contribution License Agreement

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

snyk-io · 2025-12-12T19:04:01Z

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

sfc-gh-bnisco · 2025-12-12T19:04:07Z

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

github-actions · 2025-12-12T19:04:09Z

✅ PR preview is ready!

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

Copilot

Pull request overview

This pull request significantly improves the accessibility of tooltip icons and markdown heading anchor links across the Streamlit application. The changes introduce keyboard navigation support for help tooltips and anchor links, add proper ARIA labels, and fix HTML structure issues related to nested labels.

Key Changes

Tooltip icons are now keyboard-focusable with a button wrapper and proper ARIA labels
Markdown heading anchor links are accessible via keyboard with visibility improvements using opacity instead of the visibility CSS property
Fixed nested <label> element issues by changing StyledWidgetLabelHelpInline from a label to a span element

Reviewed changes

Copilot reviewed 34 out of 34 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`frontend/lib/src/components/shared/TooltipIcon/TooltipIcon.tsx`	Refactored TooltipIcon to render a focusable button with mandatory aria-label, added `getHelpTooltipAriaLabel` helper function, and enforced type safety via discriminated union
`frontend/lib/src/components/shared/TooltipIcon/styled-components.ts`	Added `StyledTooltipTriggerButton` with focus-visible styles and updated CSS selector for SVG styling
`frontend/lib/src/components/shared/TooltipIcon/TooltipIcon.test.tsx`	Added tests for keyboard focus, blur behavior, Escape key handling, and aria-label normalization
`frontend/lib/src/components/shared/Tooltip/Tooltip.tsx`	Implemented Escape key handler to dismiss focus-triggered tooltips by blurring the active element
`frontend/lib/src/components/shared/StreamlitMarkdown/StreamlitMarkdown.tsx`	Added aria-label to heading anchor links and aria-hidden to decorative SVG icons
`frontend/lib/src/components/shared/StreamlitMarkdown/styled-components.ts`	Changed anchor link visibility from `visibility: hidden` to `opacity: 0` with `pointerEvents: none` to keep links in tab order, added focus-within styles
`frontend/lib/src/components/shared/StreamlitMarkdown/Heading.test.tsx`	Updated test assertions for accessible anchor links
`frontend/lib/src/components/widgets/BaseWidget/WidgetLabel.tsx`	Wrapped label text in aria-hidden span while keeping children (help icons) accessible
`frontend/lib/src/components/widgets/BaseWidget/WidgetLabelHelpIconInline.tsx`	Created new wrapper component to consolidate inline help icon usage with proper aria-label handling
`frontend/lib/src/components/widgets/BaseWidget/styled-components.ts`	Changed `StyledWidgetLabelHelpInline` from `label` to `span` to prevent nested label elements
`frontend/lib/src/components/widgets/BaseWidget/index.ts`	Exported new `WidgetLabelHelpIconInline` component
`frontend/lib/src/components/widgets/BaseWidget/WidgetLabel.test.tsx`	Added tests verifying help icons remain accessible and no nested labels are rendered
Widget files (TimeInput, TextInput, TextArea, Slider, NumberInput, Multiselect, FileUploader, DateTimeInput, DateInput, CameraInput, AudioInput)	Updated TooltipIcon usage to include `getHelpTooltipAriaLabel(element.label)` for proper ARIA labeling
`frontend/lib/src/components/widgets/Checkbox/Checkbox.tsx`	Migrated from `StyledWidgetLabelHelpInline` + `TooltipIcon` to `WidgetLabelHelpIconInline` component
`frontend/lib/src/components/widgets/ButtonGroup/ButtonGroup.tsx`	Migrated to `WidgetLabelHelpIconInline` component
`frontend/lib/src/components/widgets/ChatInput/fileUpload/ChatFileUploadButton.tsx`	Added aria-label to BaseButton wrapped by TooltipIcon
`frontend/lib/src/components/shared/Radio/Radio.tsx`	Migrated to `WidgetLabelHelpIconInline` component
`frontend/lib/src/components/shared/Dropdown/Selectbox.tsx`	Added `getHelpTooltipAriaLabel(label)` to TooltipIcon
`frontend/lib/src/components/shared/BaseColorPicker/BaseColorPicker.tsx`	Migrated to `WidgetLabelHelpIconInline` component
`frontend/lib/src/components/elements/Metric/Metric.tsx`	Migrated to `WidgetLabelHelpIconInline` component
`e2e_playwright/st_slider_test.py`	Added test for keyboard-accessible help tooltip
`e2e_playwright/st_markdown_test.py`	Added test for keyboard-focusable and visible anchor icons
`e2e_playwright/st_heading_test.py`	Added test for keyboard-accessible anchor icons and updated CSS property assertions from `visibility` to `opacity`
`e2e_playwright/shared/app_utils.py`	Added `tab_until_focused` utility function for resilient keyboard navigation testing

frontend/lib/src/components/shared/TooltipIcon/TooltipIcon.tsx

frontend/lib/src/components/shared/TooltipIcon/styled-components.ts

frontend/lib/src/components/shared/TooltipIcon/TooltipIcon.tsx

e2e_playwright/shared/app_utils.py

frontend/lib/src/components/widgets/BaseWidget/WidgetLabel.tsx

frontend/lib/src/components/shared/StreamlitMarkdown/styled-components.ts

github-actions · 2025-12-12T22:07:17Z

📈 Frontend coverage change detected

The frontend unit test (vitest) coverage has increased by 0.0100%

Current PR: 86.3500% (12618 lines, 1722 missed)
Latest develop: 86.3400% (12614 lines, 1722 missed)

✅ Coverage change is within normal range.

📊 View detailed coverage comparison

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

frontend/lib/src/theme/utils.ts

frontend/lib/src/components/shared/StreamlitMarkdown/styled-components.ts

Copilot

Pull request overview

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

frontend/lib/src/theme/utils.ts

sfc-gh-bnisco added security-assessment-completed Security assessment has been completed for PR change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Dec 12, 2025

sfc-gh-bnisco changed the title ~~[feat] Improve accessibility of Tooltips and Markdown~~ [WIP] [feat] Improve accessibility of Tooltips and Markdown Dec 12, 2025

sfc-gh-bnisco requested a review from Copilot December 12, 2025 19:05

Copilot started reviewing on behalf of sfc-gh-bnisco December 12, 2025 19:05 View session

Copilot AI reviewed Dec 12, 2025

View reviewed changes

sfc-gh-bnisco force-pushed the 12-12-_feat_improve_accessibility_of_tooltips_and_markdown branch 4 times, most recently from 78303c9 to 4685cd8 Compare December 12, 2025 21:57

sfc-gh-bnisco force-pushed the 12-12-_feat_improve_accessibility_of_tooltips_and_markdown branch 5 times, most recently from dae7b87 to 096a34d Compare December 16, 2025 04:38

This was referenced Dec 16, 2025

[fix] Ensure anchor links in Markdown headers are accessible from keyboard #13378

Merged

[fix] Ensure help Tooltips are accessible #13379

Merged

sfc-gh-bnisco changed the title ~~[WIP] [feat] Improve accessibility of Tooltips and Markdown~~ [refactor] Centralize focus ring styling Dec 16, 2025

sfc-gh-bnisco added change:refactor PR contains code refactoring without behavior change impact:internal PR changes only affect internal code and removed change:feature PR contains new feature or enhancement implementation impact:users PR changes affect end users labels Dec 16, 2025

sfc-gh-bnisco requested a review from Copilot December 16, 2025 04:41

Copilot started reviewing on behalf of sfc-gh-bnisco December 16, 2025 04:41 View session

Copilot AI reviewed Dec 16, 2025

View reviewed changes

frontend/lib/src/theme/utils.ts Outdated Show resolved Hide resolved

frontend/lib/src/theme/utils.ts Outdated Show resolved Hide resolved

frontend/lib/src/components/shared/StreamlitMarkdown/styled-components.ts Show resolved Hide resolved

sfc-gh-bnisco force-pushed the 12-12-_feat_improve_accessibility_of_tooltips_and_markdown branch from 096a34d to 5678480 Compare December 16, 2025 05:06

sfc-gh-bnisco requested a review from Copilot December 16, 2025 05:06

Copilot started reviewing on behalf of sfc-gh-bnisco December 16, 2025 05:07 View session

Copilot AI reviewed Dec 16, 2025

View reviewed changes

sfc-gh-bnisco marked this pull request as ready for review December 17, 2025 00:56

mayagbarnes reviewed Dec 17, 2025

View reviewed changes

frontend/lib/src/theme/utils.ts Outdated Show resolved Hide resolved

mayagbarnes approved these changes Dec 17, 2025

View reviewed changes

[refactor] Centralize focus ring styling

11d03f4

sfc-gh-bnisco force-pushed the 12-12-_feat_improve_accessibility_of_tooltips_and_markdown branch from 5678480 to 11d03f4 Compare December 17, 2025 16:48

sfc-gh-bnisco merged commit 7af8313 into develop Dec 17, 2025
43 of 44 checks passed

sfc-gh-bnisco deleted the 12-12-_feat_improve_accessibility_of_tooltips_and_markdown branch December 17, 2025 17:20

This was referenced Dec 18, 2025

[feat] Update AGENTS rules for better a11y practices #13411

Merged

[feat] Update eslint rules for better a11y support #13412

Merged

[refactor] Centralize focus ring styling #13340

[refactor] Centralize focus ring styling #13340

Uh oh!

Conversation

sfc-gh-bnisco commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes

GitHub Issue Link (if applicable)

Testing Plan

Uh oh!

snyk-io bot commented Dec 12, 2025 • 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!

sfc-gh-bnisco commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ PR preview is ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📈 Frontend coverage change detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sfc-gh-bnisco commented Dec 12, 2025 •

edited

Loading

snyk-io bot commented Dec 12, 2025 •

edited

Loading

sfc-gh-bnisco commented Dec 12, 2025 •

edited

Loading

github-actions bot commented Dec 12, 2025 •

edited

Loading

github-actions bot commented Dec 12, 2025 •

edited

Loading