[9.1] [ObsUX][APM][Infra] A11y fixes (#242536) (#242574)

# Backport

This will backport the following commits from `main` to `9.1`:
- [[ObsUX][APM][Infra] A11y fixes
(#242536)](#242536)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Sergi
Romeu","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-11-11T16:21:58Z","message":"[ObsUX][APM][Infra]
A11y fixes
(#242536)","sha":"31e185f9ebb8c24e856caa11ba8c97024f504ff4","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:obs-ux-infra_services","backport:version","v9.3.0","v8.19.7","v9.1.7","v9.2.1"],"title":"[ObsUX][APM][Infra]
A11y
fixes","number":242536,"url":"https://github.com/elastic/kibana/pull/242536","mergeCommit":{"message":"[ObsUX][APM][Infra]
A11y fixes
(#242536)","sha":"31e185f9ebb8c24e856caa11ba8c97024f504ff4"}},"sourceBranch":"main","suggestedTargetBranches":["8.19","9.1","9.2"],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/242536","number":242536,"mergeCommit":{"message":"[ObsUX][APM][Infra]
A11y fixes
(#242536)","sha":"31e185f9ebb8c24e856caa11ba8c97024f504ff4"}},{"branch":"8.19","label":"v8.19.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.1","label":"v9.1.7","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.2","label":"v9.2.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Sergi Romeu <[email protected]>

Author: kibanamachine

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

@@ -126,7 +126,7 @@ describe('Service Overview', () => {
       cy.getByTestSubj('waterfall').should('exist');
       cy.getByTestSubj('accordionWaterfall').should('exist');
       cy.getByTestSubj('accordionWaterfall').click();
-      cy.contains('h4', 'Transaction details');
+      cy.contains('h2', 'Transaction details');
       cy.getByTestSubj('apmTransactionDetailLinkLink').should('exist');
       cy.getByTestSubj('apmTransactionDetailLinkLink').contains(
         'oteldemo.AdServiceEdotSynth/GetAds'

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

@@ -142,7 +142,7 @@ describe('Service Overview', () => {
       cy.getByTestSubj('waterfall').should('exist');
       cy.getByTestSubj('accordionWaterfall').should('exist');
       cy.getByTestSubj('accordionWaterfall').first().click();
-      cy.contains('h4', 'Transaction details');
+      cy.contains('h2', 'Transaction details');
       cy.getByTestSubj('apmTransactionDetailLinkLink').should('exist');
       cy.getByTestSubj('apmTransactionDetailLinkLink').contains('parent-synth');
       cy.getByTestSubj('apmServiceListAppLink').should('exist');

x-pack/solutions/observability/plugins/apm/public/components/app/service_map/controls.tsx

@@ -185,7 +185,11 @@ export function Controls() {
   return (
     <ControlsContainer>
       <Panel hasShadow={true} paddingSize="none">
-        <EuiToolTip anchorClassName="eui-displayInline" content={zoomInLabel}>
+        <EuiToolTip
+          anchorClassName="eui-displayInline"
+          content={zoomInLabel}
+          disableScreenReaderOutput
+        >
           <ZoomInButton
             aria-label={zoomInLabel}
             color="text"
@@ -194,7 +198,11 @@ export function Controls() {
             onClick={zoomIn}
           />
         </EuiToolTip>
-        <EuiToolTip anchorClassName="eui-displayInline" content={zoomOutLabel}>
+        <EuiToolTip
+          anchorClassName="eui-displayInline"
+          content={zoomOutLabel}
+          disableScreenReaderOutput
+        >
           <Button
             aria-label={zoomOutLabel}
             color="text"
@@ -205,7 +213,11 @@ export function Controls() {
         </EuiToolTip>
       </Panel>
       <Panel hasShadow={true} paddingSize="none">
-        <EuiToolTip anchorClassName="eui-displayInline" content={centerLabel}>
+        <EuiToolTip
+          anchorClassName="eui-displayInline"
+          content={centerLabel}
+          disableScreenReaderOutput
+        >
           <Button
             data-test-subj="centerServiceMap"
             aria-label={centerLabel}
@@ -217,7 +229,11 @@ export function Controls() {
       </Panel>
       {showViewFullMapButton && (
         <Panel hasShadow={true} paddingSize="none">
-          <EuiToolTip anchorClassName="eui-displayInline" content={viewFullMapLabel}>
+          <EuiToolTip
+            anchorClassName="eui-displayInline"
+            content={viewFullMapLabel}
+            disableScreenReaderOutput
+          >
             <Button
               aria-label={viewFullMapLabel}
               color="text"
@@ -230,7 +246,11 @@ export function Controls() {
       )}
       {downloadUrl && (
         <Panel hasShadow={true} paddingSize="none">
-          <EuiToolTip anchorClassName="eui-displayInline" content={downloadLabel}>
+          <EuiToolTip
+            anchorClassName="eui-displayInline"
+            content={downloadLabel}
+            disableScreenReaderOutput
+          >
             <Button
               aria-label={downloadLabel}
               color="text"

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

@@ -130,18 +130,21 @@ export function SpanFlyout({
 
   const isLoading = isPending(status);
 
+  const spanDetailsTitle = i18n.translate(
+    'xpack.apm.transactionDetails.spanFlyout.spanDetailsTitle',
+    {
+      defaultMessage: 'Span details',
+    }
+  );
+
   return (
     <EuiPortal>
-      <ResponsiveFlyout onClose={onClose} size="m" ownFocus={true}>
+      <ResponsiveFlyout onClose={onClose} size="m" ownFocus={true} aria-label={spanDetailsTitle}>
         <EuiFlyoutHeader hasBorder>
           <EuiFlexGroup>
             <EuiFlexItem grow={false}>
               <EuiTitle>
-                <h2>
-                  {i18n.translate('xpack.apm.transactionDetails.spanFlyout.spanDetailsTitle', {
-                    defaultMessage: 'Span details',
-                  })}
-                </h2>
+                <h2>{spanDetailsTitle}</h2>
               </EuiTitle>
             </EuiFlexItem>
             {span && (

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

@@ -65,21 +65,26 @@ export function TransactionFlyout({
 
   const isLoading = isPending(status);
 
+  const transactionDetailsTitle = i18n.translate(
+    'xpack.apm.transactionDetails.transFlyout.transactionDetailsTitle',
+    {
+      defaultMessage: 'Transaction details',
+    }
+  );
+
   return (
     <EuiPortal>
-      <ResponsiveFlyout onClose={onClose} ownFocus={true} maxWidth={false}>
+      <ResponsiveFlyout
+        onClose={onClose}
+        ownFocus={true}
+        maxWidth={false}
+        aria-label={transactionDetailsTitle}
+      >
         <EuiFlyoutHeader hasBorder>
           <EuiFlexGroup>
             <EuiFlexItem grow={false}>
               <EuiTitle>
-                <h4>
-                  {i18n.translate(
-                    'xpack.apm.transactionDetails.transFlyout.transactionDetailsTitle',
-                    {
-                      defaultMessage: 'Transaction details',
-                    }
-                  )}
-                </h4>
+                <h2>{transactionDetailsTitle}</h2>
               </EuiTitle>
             </EuiFlexItem>
 

x-pack/solutions/observability/plugins/apm/public/components/shared/truncate_with_tooltip/index.tsx

@@ -35,7 +35,12 @@ export function TruncateWithTooltip(props: Props) {
 
   return (
     <TooltipWrapper {...rest}>
-      <EuiToolTip delay="long" content={text} anchorClassName={tooltipAnchorClassname}>
+      <EuiToolTip
+        delay="long"
+        content={text}
+        anchorClassName={tooltipAnchorClassname}
+        disableScreenReaderOutput
+      >
         <ContentWrapper>{content || text}</ContentWrapper>
       </EuiToolTip>
     </TooltipWrapper>