Revert "[APM][A11y] Fix Waterfall Flyout not being accessible by keyboard" (elastic#229835)

Reverts elastic#229411

Author: rmyz

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/service_overview/otel_edot_service_overview_and_transactions.cy.ts

@@ -124,8 +124,8 @@ describe('Service Overview', () => {
 
       cy.getByTestSubj('apmWaterfallButton').should('exist');
       cy.getByTestSubj('waterfall').should('exist');
-      cy.getByTestSubj('accordionWaterfall').should('exist');
-      cy.getByTestSubj('accordionWaterfall').click();
+      cy.getByTestSubj('waterfallItem').should('exist');
+      cy.getByTestSubj('waterfallItem').click();
       cy.contains('h4', 'Transaction details');
       cy.getByTestSubj('apmTransactionDetailLinkLink').should('exist');
       cy.getByTestSubj('apmTransactionDetailLinkLink').contains(

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/service_overview/otel_service_overview_and_transactions.cy.ts

@@ -140,8 +140,8 @@ describe('Service Overview', () => {
 
       cy.getByTestSubj('apmWaterfallButton').should('exist');
       cy.getByTestSubj('waterfall').should('exist');
-      cy.getByTestSubj('accordionWaterfall').should('exist');
-      cy.getByTestSubj('accordionWaterfall').first().click();
+      cy.getByTestSubj('waterfallItem').should('exist');
+      cy.getByTestSubj('waterfallItem').first().click();
       cy.contains('h4', 'Transaction details');
       cy.getByTestSubj('apmTransactionDetailLinkLink').should('exist');
       cy.getByTestSubj('apmTransactionDetailLinkLink').contains('parent-synth');

x-pack/solutions/observability/plugins/apm/ftr_e2e/cypress/e2e/transaction_details/large_trace_in_waterfall/large_traces_in_waterfall.cy.ts

@@ -43,7 +43,7 @@ describe('Large Trace in waterfall', () => {
 
     it('renders waterfall items', () => {
       // it renders a virtual list, so the number of items rendered is not the same as the number of items in the trace
-      cy.getByTestSubj('accordionWaterfall').should('have.length.at.least', 39);
+      cy.getByTestSubj('waterfallItem').should('have.length.at.least', 39);
       cy.getByTestSubj('waterfall').should('have.css', 'height').and('eq', '10011px');
     });
 
@@ -73,7 +73,7 @@ describe('Large Trace in waterfall', () => {
 
     it('renders waterfall items', () => {
       // it renders a virtual list, so the number of items rendered is not the same as the number of items in the trace
-      cy.getByTestSubj('accordionWaterfall').should('have.length.at.least', 39);
+      cy.getByTestSubj('waterfallItem').should('have.length.at.least', 39);
       cy.getByTestSubj('waterfall').should('have.css', 'height').and('eq', '10011px');
     });
 

x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx

@@ -200,7 +200,7 @@ const WaterfallNode = React.memo((props: WaterfallNodeProps) => {
 
   return (
     <EuiAccordion
-      data-test-subj="accordionWaterfall"
+      data-test-subj="waterfallItem"
       style={{ position: 'relative' }}
       buttonClassName={`button_${node.item.id}`}
       id={node.item.id}

x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx

@@ -25,10 +25,7 @@ import { SyncBadge } from './badge/sync_badge';
 import { FailureBadge } from './failure_badge';
 import { OrphanItemTooltipIcon } from './orphan_item_tooltip_icon';
 import { SpanMissingDestinationTooltip } from './span_missing_destination_tooltip';
-import type {
-  IWaterfallSpan,
-  IWaterfallSpanOrTransaction,
-} from './waterfall_helpers/waterfall_helpers';
+import type { IWaterfallSpanOrTransaction } from './waterfall_helpers/waterfall_helpers';
 
 type ItemType = 'transaction' | 'span' | 'error';
 
@@ -260,43 +257,16 @@ export function WaterfallItem({
 
   const waterfallItemFlyoutTab = 'metadata';
 
-  const itemName =
-    item.docType === 'transaction'
-      ? item.doc.transaction.name
-      : (item as IWaterfallSpan).doc.span.name;
-
   return (
     <Container
       ref={waterfallItemRef}
       type={item.docType}
       timelineMargins={timelineMargins}
       isSelected={isSelected}
       hasToggle={hasToggle}
-      data-test-subj="waterfallItem"
-      onKeyDown={(e) => {
-        if (onClick && (e.key === 'Enter' || e.key === ' ')) {
-          // Ignore event if it comes from a link
-          if (e.target instanceof HTMLAnchorElement) {
-            return;
-          }
-          e.preventDefault(); // Prevent scroll if Space is pressed
-          onClick(item.id);
-        }
-      }}
-      tabIndex={onClick ? 0 : -1}
-      role={onClick ? 'button' : undefined}
-      aria-label={
-        onClick
-          ? i18n.translate('xpack.apm.waterfall.openDetailsButton', {
-              defaultMessage: 'View details for {name}',
-              values: {
-                name: itemName,
-              },
-            })
-          : undefined
-      }
-      onClick={() => {
+      onClick={(e: React.MouseEvent) => {
         if (onClick) {
+          e.stopPropagation();
           onClick(waterfallItemFlyoutTab);
         }
       }}

x-pack/solutions/observability/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall_container.test.tsx

@@ -29,7 +29,8 @@ describe('WaterfallContainer', () => {
     const { getAllByRole } = renderWithTheme(<Example />);
     const buttons = await waitFor(() => getAllByRole('button'));
     const parentItem = buttons[1];
-    const childItem = buttons[3];
+    const childItem = buttons[2];
+
     await userEvent.click(parentItem);
 
     expect(parentItem).toHaveAttribute('aria-expanded', 'false');