[APM][Unified Waterfall] Enable telemetry by removing unnecessary stopPropagation calls and updating data-test-subj attributes (#229182)

## Summary

Relates to #225472

While building the Unified Waterfall, part of the code was inspired by
the APM waterfall, and there were some `e.stopPropagation` calls that
were no longer needed and they were preventing the click event from
reaching our EBT.

To bring those events back and enable telemetry analysis on waterfall
usage, the `e.stopPropagation` calls have been removed, and a few
`data-test-subj` attributes have been renamed and/or added.

A minor UI issue with the dependency field was also detected and fixed
along the way.

|Before|After|
|-|-|
|<img width="1317" height="969" alt="Screenshot 2025-07-23 at 17 26 11"
src="https://github.com/user-attachments/assets/bfea8171-9430-4480-9664-65d1e6780c61"
/>|<img width="1317" height="965" alt="Screenshot 2025-07-23 at 17 28
27"
src="https://github.com/user-attachments/assets/46ddac58-c723-4ab2-82b7-b6d9ee9996b5"
/>|


## How to test
- Go to Discover in an Observability Solution space
- Query traces (`FROM traces-*`)
- Open any span/transaction flyout
- Open the full screen waterfall
- Open flyout from the waterfall
- Check for the sent events, we now have clicks

---------

Co-authored-by: Cauê Marcondes <55978943+cauemarcondes@users.noreply.github.com>

Author: iblancof

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces/doc_viewer_span_overview/sub_components/dependency_name_link.tsx

@@ -69,7 +69,7 @@ export function DependencyNameLink({
 
   const content = (
     <EuiFlexGroup gutterSize="xs" alignItems="center">
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <SpanIcon type={spanType} subtype={spanSubtype} size="m" />
       </EuiFlexItem>
       <EuiFlexItem>{formattedDependencyName}</EuiFlexItem>

x-pack/solutions/observability/plugins/apm/public/components/shared/trace_waterfall/toggle_accordion_button.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import { asBigNumber } from '../../../../common/utils/formatters';
 
 export const TOGGLE_BUTTON_WIDTH = 20;
@@ -23,17 +24,22 @@ export function ToggleAccordionButton({ isOpen, childrenCount, onClick }: Props)
       justifyContent="center"
       responsive={false}
       css={{ position: 'relative', width: `${TOGGLE_BUTTON_WIDTH}px` }}
+      data-test-subj="toggleAccordionButton"
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault(); // Prevent scroll if Space is pressed
+          onClick();
+        }
+      }}
+      tabIndex={0}
+      role="button"
+      aria-label={i18n.translate('xpack.apm.toggleAccordionButton', {
+        defaultMessage: 'Toggle accordion',
+      })}
     >
       <EuiFlexItem grow={false}>
-        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-            onClick();
-          }}
-        >
-          <EuiIcon type={isOpen ? 'arrowDown' : 'arrowRight'} />
-        </div>
+        <EuiIcon type={isOpen ? 'arrowDown' : 'arrowRight'} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <div

x-pack/solutions/observability/plugins/apm/public/components/shared/trace_waterfall/trace_item_row.tsx

@@ -50,13 +50,13 @@ export function TraceItemRow({ item, childrenCount, state, onToggle }: Props) {
     <>
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
       <div
+        data-test-subj="traceItemRowWrapper"
         css={css`
           border-bottom: ${euiTheme.border.thin};
           ${onClick || hasToggle ? 'cursor: pointer;' : 'cursor: default'}
         `}
-        onClick={(e: React.MouseEvent) => {
+        onClick={() => {
           if (!hasToggle && onClick) {
-            e.stopPropagation();
             onClick(item.id);
           }
         }}
@@ -82,6 +82,7 @@ export function TraceItemRow({ item, childrenCount, state, onToggle }: Props) {
           {hasToggle ? (
             <EuiFlexItem grow={false}>
               <ToggleAccordionButton
+                data-test-subj="traceItemRowToggleAccordionButton"
                 isOpen={state === 'open'}
                 childrenCount={childrenCount}
                 onClick={() => onToggle(item.id)}
@@ -90,13 +91,12 @@ export function TraceItemRow({ item, childrenCount, state, onToggle }: Props) {
           ) : null}
           <EuiFlexItem>
             <div
-              data-test-subj="trace-bar-row"
+              data-test-subj="traceItemRowContent"
               css={css`
                 margin-left: ${calculateMarginLeft()}px;
               `}
-              onClick={(e: React.MouseEvent) => {
+              onClick={() => {
                 if (hasToggle && onClick) {
-                  e.stopPropagation();
                   onClick(item.id);
                 }
               }}
@@ -142,11 +142,6 @@ export function TraceItemRow({ item, childrenCount, state, onToggle }: Props) {
         paddingSize="none"
         forceState={state}
         arrowDisplay="none"
-        onToggle={() => {
-          if (hasToggle) {
-            onToggle(item.id);
-          }
-        }}
         buttonContentClassName="accordion__buttonContent"
         css={css`
           .accordion__buttonContent {