From a78a31d1873a7dca3d175870aee05801b056f5a4 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
---
 .../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 e536ed945680..f4ef2044a38c 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 ? (