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

# Backport

This will backport the following commits from `main` to `8.19`:
- [[APM][Unified Waterfall] Enable telemetry by removing unnecessary
stopPropagation calls and updating data-test-subj attributes
(#229182)](#229182)

<!--- Backport version: 10.0.1 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Irene
Blanco","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-07-25T19:07:23Z","message":"[APM][Unified
Waterfall] Enable telemetry by removing unnecessary stopPropagation
calls and updating data-test-subj attributes (#229182)\n\n##
Summary\n\nRelates to
https://github.com/elastic/kibana/issues/225472\n\nWhile building the
Unified Waterfall, part of the code was inspired by\nthe APM waterfall,
and there were some `e.stopPropagation` calls that\nwere no longer
needed and they were preventing the click event from\nreaching our
EBT.\n\nTo bring those events back and enable telemetry analysis on
waterfall\nusage, the `e.stopPropagation` calls have been removed, and a
few\n`data-test-subj` attributes have been renamed and/or added.\n\nA
minor UI issue with the dependency field was also detected and
fixed\nalong the way.\n\n|Before|After|\n|-|-|\n|<img width=\"1317\"
height=\"969\" alt=\"Screenshot 2025-07-23 at 17 26
11\"\nsrc=\"https://github.com/user-attachments/assets/bfea8171-9430-4480-9664-65d1e6780c61\"\n/>|<img
width=\"1317\" height=\"965\" alt=\"Screenshot 2025-07-23 at 17
28\n27\"\nsrc=\"https://github.com/user-attachments/assets/46ddac58-c723-4ab2-82b7-b6d9ee9996b5\"\n/>|\n\n\n##
How to test\n- Go to Discover in an Observability Solution space\n-
Query traces (`FROM traces-*`)\n- Open any span/transaction flyout\n-
Open the full screen waterfall\n- Open flyout from the waterfall\n-
Check for the sent events, we now have
clicks\n\n---------\n\nCo-authored-by: Cauê Marcondes
<[email protected]>","sha":"46e1b78c9d6d282bd8222f69d4ab692b05cfb25a","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:obs-ux-infra_services","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[APM][Unified
Waterfall] Enable telemetry by removing unnecessary stopPropagation
calls and updating data-test-subj
attributes","number":229182,"url":"https://github.com/elastic/kibana/pull/229182","mergeCommit":{"message":"[APM][Unified
Waterfall] Enable telemetry by removing unnecessary stopPropagation
calls and updating data-test-subj attributes (#229182)\n\n##
Summary\n\nRelates to
https://github.com/elastic/kibana/issues/225472\n\nWhile building the
Unified Waterfall, part of the code was inspired by\nthe APM waterfall,
and there were some `e.stopPropagation` calls that\nwere no longer
needed and they were preventing the click event from\nreaching our
EBT.\n\nTo bring those events back and enable telemetry analysis on
waterfall\nusage, the `e.stopPropagation` calls have been removed, and a
few\n`data-test-subj` attributes have been renamed and/or added.\n\nA
minor UI issue with the dependency field was also detected and
fixed\nalong the way.\n\n|Before|After|\n|-|-|\n|<img width=\"1317\"
height=\"969\" alt=\"Screenshot 2025-07-23 at 17 26
11\"\nsrc=\"https://github.com/user-attachments/assets/bfea8171-9430-4480-9664-65d1e6780c61\"\n/>|<img
width=\"1317\" height=\"965\" alt=\"Screenshot 2025-07-23 at 17
28\n27\"\nsrc=\"https://github.com/user-attachments/assets/46ddac58-c723-4ab2-82b7-b6d9ee9996b5\"\n/>|\n\n\n##
How to test\n- Go to Discover in an Observability Solution space\n-
Query traces (`FROM traces-*`)\n- Open any span/transaction flyout\n-
Open the full screen waterfall\n- Open flyout from the waterfall\n-
Check for the sent events, we now have
clicks\n\n---------\n\nCo-authored-by: Cauê Marcondes
<[email protected]>","sha":"46e1b78c9d6d282bd8222f69d4ab692b05cfb25a"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/229182","number":229182,"mergeCommit":{"message":"[APM][Unified
Waterfall] Enable telemetry by removing unnecessary stopPropagation
calls and updating data-test-subj attributes (#229182)\n\n##
Summary\n\nRelates to
https://github.com/elastic/kibana/issues/225472\n\nWhile building the
Unified Waterfall, part of the code was inspired by\nthe APM waterfall,
and there were some `e.stopPropagation` calls that\nwere no longer
needed and they were preventing the click event from\nreaching our
EBT.\n\nTo bring those events back and enable telemetry analysis on
waterfall\nusage, the `e.stopPropagation` calls have been removed, and a
few\n`data-test-subj` attributes have been renamed and/or added.\n\nA
minor UI issue with the dependency field was also detected and
fixed\nalong the way.\n\n|Before|After|\n|-|-|\n|<img width=\"1317\"
height=\"969\" alt=\"Screenshot 2025-07-23 at 17 26
11\"\nsrc=\"https://github.com/user-attachments/assets/bfea8171-9430-4480-9664-65d1e6780c61\"\n/>|<img
width=\"1317\" height=\"965\" alt=\"Screenshot 2025-07-23 at 17
28\n27\"\nsrc=\"https://github.com/user-attachments/assets/46ddac58-c723-4ab2-82b7-b6d9ee9996b5\"\n/>|\n\n\n##
How to test\n- Go to Discover in an Observability Solution space\n-
Query traces (`FROM traces-*`)\n- Open any span/transaction flyout\n-
Open the full screen waterfall\n- Open flyout from the waterfall\n-
Check for the sent events, we now have
clicks\n\n---------\n\nCo-authored-by: Cauê Marcondes
<[email protected]>","sha":"46e1b78c9d6d282bd8222f69d4ab692b05cfb25a"}}]}]
BACKPORT-->

Author: iblancof

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

@@ -46,13 +46,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);
           }
         }}
@@ -78,6 +78,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)}
@@ -86,13 +87,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);
                 }
               }}
@@ -138,11 +138,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 {