diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.test.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.test.js
index 344dec9208..16e739826c 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.test.js
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.test.js
@@ -25,10 +25,8 @@ describe('<AccordianText>', () => {
   const props = {
     compact: false,
     data: warnings,
-    highContrast: false,
     isOpen: false,
     label: 'le-label',
-    onToggle: jest.fn(),
   };
 
   beforeEach(() => {
@@ -52,4 +50,33 @@ describe('<AccordianText>', () => {
     expect(content.length).toBe(1);
     expect(content.prop('data')).toBe(warnings);
   });
+
+  it('disables onClick if data is empty', () => {
+    wrapper = shallow(<AccordianText {...props} data={[]} />);
+    const headerProps = wrapper.find('.AccordianText--header').props();
+    expect(headerProps.onClick).toBeNull();
+  });
+
+  it('has role="switch" when interactive = true', () => {
+    wrapper = shallow(<AccordianText {...props} isOpen />);
+    const headerProps = wrapper.find('.AccordianText--header').props();
+    expect(headerProps.role).toBe('switch');
+  });
+
+  it('has class "is-empty" class if data is empty', () => {
+    wrapper = shallow(<AccordianText {...props} data={[]} />);
+    expect(wrapper.find('.AccordianText--header').hasClass('is-empty')).toBe(true);
+  });
+
+  it('has class "is-high-contrast" class if highContrast=true', () => {
+    wrapper = shallow(<AccordianText {...props} highContrast />);
+    expect(wrapper.find('.AccordianText--header').hasClass('is-high-contrast')).toBe(true);
+  });
+
+  it('does not render arrow or clickable header if interactive = false', () => {
+    wrapper = shallow(<AccordianText {...props} interactive={false} />);
+    const header = wrapper.find('.AccordianText--header');
+    expect(header.prop('role')).toBeUndefined();
+    expect(header.find('.u-align-icon').exists()).toBe(false);
+  });
 });
diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx
index ba21141524..34f2edd60a 100644
--- a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx
+++ b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx
@@ -31,8 +31,16 @@ type AccordianTextProps = {
   onToggle?: null | (() => void);
 };
 
-export default function AccordianText(props: AccordianTextProps) {
-  const { className, data, headerClassName, highContrast, interactive, isOpen, label, onToggle } = props;
+export default function AccordianText({
+  className = null,
+  data,
+  headerClassName,
+  highContrast = false,
+  interactive = true,
+  isOpen,
+  label,
+  onToggle = null,
+}: AccordianTextProps) {
   const isEmpty = !Array.isArray(data) || !data.length;
   const iconCls = cx('u-align-icon', { 'AccordianKeyValues--emptyIcon': isEmpty });
 
@@ -64,10 +72,3 @@ export default function AccordianText(props: AccordianTextProps) {
     </div>
   );
 }
-
-AccordianText.defaultProps = {
-  className: null,
-  highContrast: false,
-  interactive: true,
-  onToggle: null,
-};