[refactor] Centralize focus ring styling#13340
Merged
sfc-gh-bnisco merged 1 commit intodevelopfrom Dec 17, 2025
Merged
Conversation
Contributor
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
Collaborator
Author
Contributor
✅ PR preview is ready!
|
sfc-gh-bnisco
added
security-assessment-completed
change:feature
sfc-gh-bnisco
changed the title
Contributor
There was a problem hiding this comment.
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 changingStyledWidgetLabelHelpInlinefrom 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/styled-components.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
4 times, most recently
from
78303c9 to
4685cd8
Compare
Contributor
📈 Frontend coverage change detectedThe frontend unit test (vitest) coverage has increased by 0.0100%
✅ Coverage change is within normal range. |
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
This was referenced Dec 16, 2025
sfc-gh-bnisco
changed the title
sfc-gh-bnisco
added
change:refactor
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
mayagbarnes
reviewed
Dec 17, 2025
mayagbarnes
approved these changes
Dec 17, 2025
sfc-gh-bnisco
force-pushed
the
12-12-_feat_improve_accessibility_of_tooltips_and_markdown
branch
from
5678480 to
11d03f4
Compare
sfc-gh-bnisco
deleted the
12-12-_feat_improve_accessibility_of_tooltips_and_markdown
branch
This was referenced Dec 18, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Describe your changes
GitHub Issue Link (if applicable)
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.