fix: add keyboard accessibility to span name and child expander in Trace Timeline#3807
Merged
yurishkuro merged 4 commits intoMay 10, 2026
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds keyboard operability to key controls in the Trace Timeline viewer to address #3804 (span-name detail toggle and child-span expander).
Changes:
- Add
onKeyDownhandler to the span-name “switch” so Enter/Space toggles details. - Make the child-span expander reachable by keyboard (Tab) and activatable via Enter/Space.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx | Adds keyboard activation for the span-name detail toggle. |
| packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.tsx | Makes the child expander focusable and keyboard-activatable. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ace Timeline Signed-off-by: Swetalin Rout <[email protected]>
…ia-label Signed-off-by: Swetalin Rout <[email protected]>
swetalin-10
force-pushed
the
fix/keyboard-accessibility-trace-timeline-3804
branch
from
d4e60e0 to
f230d2b
Compare
yurishkuro
previously approved these changes
May 10, 2026
yurishkuro
added
the
changelog:bugfix-or-minor-feature
Comment on lines
+97
to
+105
| const _detailToggleKeyDown = useCallback( | ||
| (e: React.KeyboardEvent) => { | ||
| if (e.key === 'Enter' || e.key === ' ') { | ||
| e.preventDefault(); | ||
| onDetailToggled(span.spanID); | ||
| } | ||
| }, | ||
| [onDetailToggled, span.spanID] | ||
| ); |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3807 +/- ##
==========================================
+ Coverage 90.58% 90.59% +0.01%
==========================================
Files 333 333
Lines 10484 10496 +12
Branches 2739 2744 +5
==========================================
+ Hits 9497 9509 +12
Misses 860 860
Partials 127 127 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
- SpanBarRow: Enter and Space on span-name calls onDetailToggled; other keys do not - SpanTreeOffset: Enter and Space on wrapper calls onClick; Tab does not; tabIndex=0 set when onClick provided - SpanTreeOffset: fix ternary indentation per formatter Signed-off-by: Swetalin Rout <[email protected]>
auto-merge was automatically disabled
May 10, 2026 20:25
Head branch was pushed to by a user without write access
Contributor
Author
|
Added tests for keyboard interactions in both SpanBarRow and SpanTreeOffset, and fixed the ternary formatting in SpanTreeOffset. |
yurishkuro
approved these changes
May 10, 2026
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.
Which problem is this PR solving?
Description of the changes
SpanBarRow.tsx: Added_detailToggleKeyDowncallback and wired it to the span name<a>tag viaonKeyDown, so pressing Enter or Space now triggersonDetailToggledthe same as a mouse clickSpanTreeOffset.tsx: Added_childrenToggleKeyDownhandler,tabIndex: 0, andonKeyDowntowrapperPropsso the child span expander is reachable via Tab and activatable via Enter or SpaceHow was this change tested?
Checklist
make lint testAI Usage in this PR (choose one)
See AI Usage Policy.