From d441b54457190c490d18751f6ffe68b47b5e03a8 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 8 Oct 2024 20:04:40 +0300
Subject: [PATCH] fix: [Obs Applications > Services | Traces |
 Dependencies][SCREEN READER]: H1 tag should not include secondary information
 (#193880)

Closes: https://github.com/elastic/kibana/issues/194988
Closes: https://github.com/elastic/kibana/issues/194987
Closes: https://github.com/elastic/kibana/issues/194986

## Description
Observability has a few pages that wrap related information like alert
counts in the H1 tag. This presents a challenge to screen readers
because all of that information now becomes the heading level one. It
clogs up the Headings menu and makes it harder to reason about the page
and what's primary information vs. secondary.

## What was changed?:

1. extra content has been removed from `pageTitle` and moved to
`rightSideItems`.

## Screen:

<img width="1226" alt="image"
src="https://github.com/user-attachments/assets/221a1d80-7686-47e3-b0d1-b8c8eada9374">

> [!NOTE]
> On smaller screens (at certain resolutions) sometimes we have an issue
described in https://github.com/elastic/eui/issues/8039 . But It's not a
blocker for that PR and will be fixed on EUI side

(cherry picked from commit a78a31d1873a7dca3d175870aee05801b056f5a4)
---
 .../templates/apm_main_template/index.tsx     | 47 +++++++------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx
index e536ed9456801..f4ef2044a38c7 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/routing/templates/apm_main_template/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiPageHeaderProps } from '@elastic/eui';
+import { EuiFlexGroup, EuiPageHeaderProps } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { entityCentricExperience } from '@kbn/observability-plugin/common';
 import { ObservabilityPageTemplateProps } from '@kbn/observability-shared-plugin/public';
@@ -132,35 +132,24 @@ export function ApmMainTemplate({
     noDataConfig,
   });
 
-  const rightSideItems = [...(showServiceGroupSaveButton ? [<ServiceGroupSaveButton />] : [])];
-
   const sanitizedPath = getPathForFeedback(window.location.pathname);
 
-  const pageHeaderTitle = (
-    <EuiFlexGroup justifyContent="spaceBetween" wrap={true}>
-      {pageHeader?.pageTitle ?? pageTitle}
-      <EuiFlexItem grow={false} />
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup justifyContent="center">
-          <EuiFlexItem grow={false}>
-            <FeatureFeedbackButton
-              data-test-subj="infraApmFeedbackLink"
-              formUrl={
-                isEntityCentricExperienceEnabled && sanitizedPath.includes('service')
-                  ? APM_NEW_EXPERIENCE_FEEDBACK_LINK
-                  : APM_FEEDBACK_LINK
-              }
-              kibanaVersion={kibanaVersion}
-              isCloudEnv={isCloudEnv}
-              isServerlessEnv={isServerlessEnv}
-              sanitizedPath={sanitizedPath}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>{environmentFilter && <ApmEnvironmentFilter />}</EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
+  const rightSideItems = [
+    ...(showServiceGroupSaveButton ? [<ServiceGroupSaveButton />] : []),
+    ...(environmentFilter ? [<ApmEnvironmentFilter />] : []),
+    <FeatureFeedbackButton
+      data-test-subj="infraApmFeedbackLink"
+      formUrl={
+        isEntityCentricExperienceEnabled && sanitizedPath.includes('service')
+          ? APM_NEW_EXPERIENCE_FEEDBACK_LINK
+          : APM_FEEDBACK_LINK
+      }
+      kibanaVersion={kibanaVersion}
+      isCloudEnv={isCloudEnv}
+      isServerlessEnv={isServerlessEnv}
+      sanitizedPath={sanitizedPath}
+    />,
+  ];
 
   const [dismissedEntitiesInventoryCallout, setdismissedEntitiesInventoryCallout] = useLocalStorage(
     `apm.dismissedEntitiesInventoryCallout`,
@@ -180,7 +169,7 @@ export function ApmMainTemplate({
         pageHeader={{
           rightSideItems,
           ...pageHeader,
-          pageTitle: pageHeaderTitle,
+          pageTitle: pageHeader?.pageTitle ?? pageTitle,
           children: (
             <EuiFlexGroup direction="column">
               {showEntitiesInventoryCallout ? (