fix: add keyboard accessibility to span name and child expander in Trace Timeline

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.test.jsx

@@ -108,6 +108,29 @@ describe('<SpanBarRow>', () => {
     expect(defaultProps.onDetailToggled).toHaveBeenCalledWith(spanID);
   });
 
+  it('triggers onDetailToggled when Enter is pressed on span name', () => {
+    render(<SpanBarRow {...defaultProps} />);
+    const spanName = screen.getByRole('switch');
+    fireEvent.keyDown(spanName, { key: 'Enter' });
+    expect(defaultProps.onDetailToggled).toHaveBeenCalledTimes(1);
+    expect(defaultProps.onDetailToggled).toHaveBeenCalledWith(spanID);
+  });
+
+  it('triggers onDetailToggled when Space is pressed on span name', () => {
+    render(<SpanBarRow {...defaultProps} />);
+    const spanName = screen.getByRole('switch');
+    fireEvent.keyDown(spanName, { key: ' ' });
+    expect(defaultProps.onDetailToggled).toHaveBeenCalledTimes(1);
+    expect(defaultProps.onDetailToggled).toHaveBeenCalledWith(spanID);
+  });
+
+  it('does not trigger onDetailToggled for other keys on span name', () => {
+    render(<SpanBarRow {...defaultProps} />);
+    const spanName = screen.getByRole('switch');
+    fireEvent.keyDown(spanName, { key: 'Tab' });
+    expect(defaultProps.onDetailToggled).not.toHaveBeenCalled();
+  });
+
   it('triggers onChildrenToggled when SpanTreeOffset is clicked', () => {
     render(<SpanBarRow {...defaultProps} />);
     const treeOffset = screen.getByTestId('span-tree-offset');

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBarRow.tsx

@@ -94,6 +94,15 @@ const SpanBarRow: React.FC<SpanBarRowProps> = ({
     onChildrenToggled(span.spanID);
   }, [onChildrenToggled, span.spanID]);
 
+  const _detailToggleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onDetailToggled(span.spanID);
+      }
+    },
+    [onDetailToggled, span.spanID]
+  );
   const {
     duration,
     hasChildren: isParent,
@@ -143,6 +152,7 @@ const SpanBarRow: React.FC<SpanBarRowProps> = ({
             className={`span-name ${isDetailExpanded ? 'is-detail-expanded' : ''}`}
             aria-checked={isDetailExpanded}
             onClick={_detailToggle}
+            onKeyDown={_detailToggleKeyDown}
             role="switch"
             style={{ borderColor: color }}
             tabIndex={0}

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.test.jsx

@@ -274,6 +274,45 @@ describe('SpanTreeOffset', () => {
       expect(props.removeHoverIndentGuideId).toHaveBeenCalledTimes(1);
       expect(props.removeHoverIndentGuideId).toHaveBeenCalledWith(ownSpanID);
     });
+
+    it('calls onClick when Enter is pressed on the span wrapper', () => {
+      const onClick = jest.fn();
+      const { container } = render(
+        <UnconnectedSpanTreeOffset {...props} span={spanWithChildren} onClick={onClick} />
+      );
+      const wrapper = container.querySelector('.SpanTreeOffset');
+      fireEvent.keyDown(wrapper, { key: 'Enter' });
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onClick when Space is pressed on the span wrapper', () => {
+      const onClick = jest.fn();
+      const { container } = render(
+        <UnconnectedSpanTreeOffset {...props} span={spanWithChildren} onClick={onClick} />
+      );
+      const wrapper = container.querySelector('.SpanTreeOffset');
+      fireEvent.keyDown(wrapper, { key: ' ' });
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onClick for other keys on the span wrapper', () => {
+      const onClick = jest.fn();
+      const { container } = render(
+        <UnconnectedSpanTreeOffset {...props} span={spanWithChildren} onClick={onClick} />
+      );
+      const wrapper = container.querySelector('.SpanTreeOffset');
+      fireEvent.keyDown(wrapper, { key: 'Tab' });
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('sets tabIndex on the span wrapper when onClick is provided', () => {
+      const onClick = jest.fn();
+      const { container } = render(
+        <UnconnectedSpanTreeOffset {...props} span={spanWithChildren} onClick={onClick} />
+      );
+      const wrapper = container.querySelector('.SpanTreeOffset');
+      expect(wrapper).toHaveAttribute('tabindex', '0');
+    });
   });
 
   describe('mapDispatchToProps()', () => {

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanTreeOffset.tsx

@@ -87,7 +87,25 @@ export const UnconnectedSpanTreeOffset: React.FC<TProps> = ({
   };
 
   const { hasChildren, spanID, childSpans } = span;
-  const wrapperProps = hasChildren ? { onClick, role: 'switch', 'aria-checked': childrenVisible } : null;
+  const _childrenToggleKeyDown = (e: React.KeyboardEvent) => {
+    if ((e.key === 'Enter' || e.key === ' ') && onClick) {
+      e.preventDefault();
+      onClick();
+    }
+  };
+
+  const wrapperProps = hasChildren
+    ? {
+        onClick,
+        ...(onClick && {
+          onKeyDown: _childrenToggleKeyDown,
+          tabIndex: 0,
+        }),
+        role: 'switch',
+        'aria-checked': childrenVisible,
+        'aria-label': 'Expand or collapse child spans',
+      }
+    : null;
 
   // Get parent color for horizontal line
   const parentSpan = span.parentSpan;